Proto.io allows you to animate any UI item on your prototype's screen. There are five animation types that can be used: move, scale, resize, fade and rotate. Each animation type can be implemented with one or more animation methods.
For each animation, you can set:
- duration of the animation
- the easing effect
- the start animation delay
You can also set your animations to do loop iterations and repeat the animation step(s). Each animation can have a callback, that could be any time of action including animation. Additionally, callback actions can have their own callback action. This is very useful when you want to do a series of interactions that will follow each previous interaction on completion. Callback actions are called on the completion of the interaction that called them.
There are two actions for animations, ‘Animate item’ and ‘End loop sequence’ that can be used to set animations and stop animation loops respectively and another action called ‘Move whole screen’, which is mainly used when you need to show/hide a side menu.
Animation actions that are set on the same event run simultaneously. For example, on ‘tap’ you can set an item to move, rotate and scale at the same time.
Example interaction that animates item