Phase • Animations made easy!

Adding animations to apps made with App Inventor had never been an easy task. Also, there's nothing out there, like an extension, which would make it possible. That's why I thought of creating Phase, my first extension. :sunglasses:

Introducing Phase

Phase is a powerful yet 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 lot of 15 primary blocks. Most of these blocks are self-explanatory, but in case you need to learn more, you can hover over them in the blocks editor to see their documentation.

  1. Events

    • AnimationStarts
    • AnimationEnds
    • AnimationCancelled
    • AnimationPaused
    • AnimationResumed
  2. Methods

    • AnimateComponent
    • AnimationCancelled2
    • Cancel and CancelAll
    • Pause and PauseAll
    • Resume and ResumeAll
    • IsRunning and IsPaused
  3. And 68 animation techniques with which Phase should animate the given component. As of now, there are 63 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
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: Used to uniquely identify the animations.
component AndroidViewComponent: The component that needs to be animated. Specify the component by attaching this block.
technique String: The technique with which the specified component should be animated. For example: tech-tada
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. 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 Cancel method.


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


Here is a demo app showing all the available animation types:
APK: Google Drive
AIA: PhaseDemo (1).aia (104.9 KB)

Download (v3.1)

AIX: Google Drive

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

Stunning :+1:


Fantastic, thank you!


Time for a small (verrrrryyyyy small :joy:) update!

  • Added new animation type: FlipIn Y

  • Increased the extension’s size by 0.1 KB.


AIX: Google Drive
APK: Google Drive
AIA: PhaseDemo (1).aia (104.9 KB)

BTW, may I please know why I'm I unable to edit my first post? In other communities it is possible to edit your post whenever you want.

This is a SUPER nice extension! Thanks!!!

1 Like

latest aix needs permission to access/download

1 Like

You are at trust level 1, so you should be able to edit your existing posts. In fact, the edit history for the original shows that you edited it about 17 hours ago.

Yes, I did edited it earlier but now I’m unable to do so. In fact, there’s no edit button.

1 Like

Edited. Thanks for pointing out. :smile:

Time for a fresh update!

  • Added AnimationPaused event.

  • Added AnimationResumes event.

  • Added PauseAnimation method.

  • Added ResumeAnimation method.

  • Fixed ZoomIn/Out animation types. They were not working as expected earlier.
    Thanks @Anke for reporting.

  • Renamed the following event blocks. Now their names are a bit more meaningful.

    • OnAnimationStart -> AnimationStarts

    • OnAnimationEnd -> AnimationEnds

    • OnAnimationCancel -> AnimationCancelled

  • Increased extension’s size by 3.9 KB. :upside_down_face:


AIX: Google Drive
:warning: Caution : This version of Phase might break the renamed event blocks if you have used them in your existing projects. To get this resolved, just replace the old blocks with new ones and you are good to go. :slightly_smiling_face:


Thank you very much!

This great extension opens up so many possibilities which many are not yet realizing (probably not even Shreyash himself :wink:).
For example, I could now easily solve an old (complex) problem (regarding Timers, Canvas & the known issues with synchronicity) for a meditation app. The extension works in my case throughout the use of the app, not just during a first initial animation.

This is by far more than just a simple fade-in / out animation effect extension (comparable to the effects that PowerPoint offers, as some claim and with which one should rather be sparing).


That’s one heck of a first extension! :slight_smile:

I have an app I’m working on with ~6000+ blocks. This just might replace a few in those areas where animation takes place. Always appreciative of extensions that save time and code involved in from-scratch solutions.


2 posts were split to a new topic: How to deal with thousands of blocks?

Why is it not working? Does not show previously hidden buttons.
test_phase.aia (108.8 KB)

you initialize last_button as Button1, so if you click Button1 and the Animation ends, last_button is Button1, which not might be what you want…


Trying to push the limits! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun.


Button1 is not visible at first. In the AnimationEnd event, assigns the current button to last_button. The buttons appear but not quite. You can’t see them but you can click on them. To see what the problem is better to run the .aia file. It’s hard to describe.

Try this (to avoid the buttons disappear):


It works! Super extension. Thank you Anke for another good help;). So this is not just ordinary animation. “Out” methods cause elements to disappear or decrease :). We can do as you suggested or that:

It would be possible to make the “AnimationEnd” event return what element was animated?
It would be a good idea to delay between animations in continuous mode. Now the delay works like this:
Delay -> Animation, Animation, Animation …
It could be like this:
Delay -> Animation, Delay -> Animation, Delay -> Animation.

1 Like

I just LOVE this extension and it’s soo useful. I used it in my App which will be published soon, and it is just amazing.

The fact that shocked me is, that this extension is 100% free and @shreyash made this completely without gaining money.

I just can thank you very very much and hope to see other good work like this in the future.



AppInventor: learning not earning