Start & end animations

Start animations trigger on loading the page (Timeline) or when the user scrolls to a certain point on the page (Viewport, longread only). End animations trigger when the element is set to disappear from view. Turning on these animation types will make the following options appear:

Duration: length of the animation itself
Animation: type of animation
Easing: the flow of the animation
Direction: direction in which the animation moves

Start & end animation types

Move: this will move the object from one position to the set position in the animation settings.
Fade: this will fade the object in or out of view.
Fade step: similar to fade, but will also move the object several pixels while fading in or out.
Zoom: makes the object larger or smaller by a set amount during the animation.
Rotate: rotates the shape by a set amount of degrees.
Flip: flips the object horizontally or vertically. This can be left to right, right to left, top to bottom or bottom to top.
Masked: reveals or hides the object with a mask, when the mask is over the object it is hidden and when moving off of the shape it then reveals that shape from the desired direction.
Keyframe: this option lets you decide where an element should be at which point of time, allowing more creativity in the precise movement of elements.

Updated on: 08/02/2023