> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.maglr.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Start & end animations

${youtube}[Essential Course Ep. 11 - Animations](PtfYzwAQBd0)

**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.