Presets

Each element inside the design can be animated using transitions like Alpha, Blur, Slide, Scale, Roll, Zoom, Flip and Rotate. To get you started we prepared more than 25 ready to use presets to apply to your elements. However if you want more control and you would like to do some subtle changes in how these animations look and feel you can do that by customising these transitions.

Custom animations

A good animation type to demonstrate the role of the available functions is Slide. 

The first three options Normal, Bounce and Elastic are effect options only available in Slide and Scale. Normal is the usual way to display any animation but a lot of cool transitions can be achieved using Bounce and Elastic with different entry directions, even custom ones, as you can see in the video below. 

Ease types and Tween types

Further down you can set Ease type and Tween type to control acceleration and speed of the element through the transition. Ease types control acceleration and you have three options. In the demo, Normal animation is played with logarithmic acceleration s

o it starts off really slow and then accelerates towards the end. The other two options are exponential with fast acceleration and the third with a more gradual, almost linear increase in speed.

With Tween types you are essentially controlling the start speed that can be Sine, Linear , Quadratic, Cubic, Quartic, Quintic, Exponential, Circular and Strong. You can think of these as powers like Sine=1, Linear=2, Quad=3 and so on. The differences can be subtle or not even noticeable in some cases depending on the used transition type. There is also Back that will create a rebound effect at the end.

Direction and Alpha

Direction is indicating the direction from where the transition starts and you also have the option to set a custom point to start from any angle you like. With changing the Offset you specify the starting distance in pixels with regard to the placement of the element on the canvas. As an example you can position the element in the lower right corner of the canvas and then set a 300 offset to slide across the whole 300 pixel width of your design.

Alpha is used to control transparency at the start of the transition so if you set it to 0 your element will start off completely transparent and then gradually become solid.