Phase • Animations made easy!

Adding animations to apps made with Kodular had never been an easy task. Even though we have a dedicated component, Animation Utilities, for animations in Kodular, it was never that easy to use. That’s why I thought of creating Phase as my first extension. :sunglasses:

Introducing Phase

Phase is powerful yet an easy to use animation extension. It makes it possible to animate any View/UI component on the screen. So, no matter if it’s a simple label or a vertical arrangement containing a complex group of components, Phase has got them all covered! :wink:


Phase features a total of 9 main blocks (excluding 68 property-type), which are as follows:

  • component_event1

  • component_event2

  • component_event3

  • component_event4

  • component_event5

  • component_method

  • phaseM2

  • component_method

  • component_method%20(1)

  • And 68 property-type blocks which returns the technique with which Phase should animate the given component. As of now, there are 68 techniques, subcategorized into 8 categories as follows:

Category Available techniques
Attention Flash , Pulse , RubberBand , Shake , Swing , Wobble , Bounce , Tada , StandUp , Wave
Special Hinge , RollIn , RollOut , Landing , TakingOff , DropOut
Bounce BounceIn , BounceInDown, BounceInLeft , BounceInRight, BounceInUp, BounceOut , BounceOutDown, BounceOutLeft , BounceOutRight, BounceOutUp
Fade FadeIn, FadeInUp, FadeInDown , FadeInLeft, FadeInRight, FadeOut, FadeOutDown, FadeOutLeft, FadeOutRight, FadeOutUp
Flip FlipInX , FlipInY , FlipOutX , FlipOutY
Rotate RotateIn , RotateInDownLeft , RotateInDownRight , RotateInUpLeft , RotateInUpRight, RotateOut , RotateOutDownLeft , RotateOutDownRight , RotateOutUpLeft , RotateOutUpRight
Slide SlideInLeft , SlideInRight , SlideInUp , SlideInDown, SlideOutLeft , SlideOutRight , SlideOutUp , SlideOutDown
Zoom ZoomIn, ZoomInDown, ZoomInLeft, ZoomInRight, ZoomInUp, ZoomOut, ZoomOutDown, ZoomOutLeft, ZoomOutRight, ZoomOutUp

How To

To animate any component, just call the AnimateComponent method and pass the required parameters.

Param Info
id int: A unique number which is used to indentify the specified component when an event fires.
component AndroidViewComponent: The component that needs to be animated. Specify the component by attaching this block.
technique String: The technique with which specified component should be animated. For example:
delay int: Amount of time after which animation should start (in milliseconds).
duration int: Amount of time it should take to complete one set of animation (in milliseconds). In simple language, it specifies how slow the animation should be.
repeatCount int: Number of times Phase should animate the given component. For example, 0 if you don’t want to repeat the animation at all or -1 if you want it to animate for an infinite amount of time.

In case you want to cancel the current animation, call the CancelAnimation method.


A huge thanks go to @Vishwas for the sources of his ExtraComponents extension and his help. A big shout out for all the beta testers too! :tada:


Here is a demo app showing all the available animation types:
APK: PhaseDemo.apk (4.8 MB)
AIA: PhaseDemo.aia (111.8 KB)
Thanks @Franck_G28 for making this for me. :relaxed:

Download [Version: 2.2.0] [Release date: 03/04/2020]

io.shreyash.phase.aix (109.3 KB)

Previous versions

[Version: 2.1.0] [Release date: 12/03/2020]

io.shreyash.phase.aix (109.9 KB)

Let me know if you find any bugs/errors. Also, I'm open to suggestions and feature requests. 😄

It’s a great extension. Just a word of advice to anyone who plan on use it. PLEASE don’t OVERUSE IT! When there’s a lot of this effects in an app is extremely annoying to the user. Just use common sense and keep functionality as a priority.
But like I said, It’s a very nice extension and I’m glad that you provide it free of charge too!


Glad that you liked it!

Every extension I’ll ever release will be free, forever.

I’m here to learn, not to earn! :sunglasses:


Really Awesome Extension Bro :heart_eyes::heart_eyes:

1 Like

Extension is great and…

You are awesome…:+1::+1::+1::+1:


Great to see that this is your first extension. It is really awesome. :heart_eyes:


Awesome job, Shreyash! I always waited you to release this extension! Also I know how much time you spent for it! :sweat_smile:

This is probably the best extension for making animations easily! You can be sure about I will add this extension in my every upcoming project!

Exactly! :sunglasses:


Great work, Shreyash! :smiley:

1 Like

To be accurate, ¾ of the total time was spent on a stupid error! Vishwas knows what I’m talking about. :sweat_smile:


Awesome job dude!


No you are here to earn likes :stuck_out_tongue_winking_eye:

Nice extension btw…keep it up!


This is one of the things that was missing most in Kodular to be able to make great interfaces.
Congratulations and thank you for this amazing extension ! :tada:


Pls check flipln x effect when click on that it close application

Very great for an extension.

Amazing for first extension!

Well done, Shreyash!

PS: Do you have 62 if then elif elif… else conditions after each other?

1 Like

Ottima estensione :+1: t3:

1 Like

great work, well done and congrats for doing an awesome job

1 Like

Just checked it on a device running Android 9 and it’s working fine. Which Android version you are having?

Awesome extension , Thank you for making it sir :heart_eyes:

1 Like

android version 7

1 Like

Can you test this app and see if it’s crashing?
Test (2).apk (4.8 MB)

1 Like