Presets
Each element inside a 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 make some subtle changes in how these animations look and feel, you can do that by customizing these transitions.
Custom animations
Most of our custom transitions have various options that can be tweaked to obtain your desired result. However, not all of them are available for all presets.
The first three options, Normal, Bounce, and Elastic, are effect options only available for the Slide and Scale presets. Normal is the usual way to display any animation. Still, many 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 the acceleration and speed of the element through the transition. Ease types control acceleration, and you have three options. In the gif above, a Normal animation is played with logarithmic acceleration, so it starts 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.
You are essentially controlling the start speed with Tween types 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 unnoticeable 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 indicates the direction from where the transition starts, and you also can set a custom point to start from any angle you like. By changing the Offset, you are tinkering with the starting distance in pixels relative to the placement of the element on the canvas. For 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. Some of our presets have visualizers on the offset function, which allows you to visualize the start and end point of the animation before applying it.
Alpha is used to control transparency at the start of the transition, so if you set it to 0, your element will start completely transparent and gradually become solid.
