Preset Animations are a way to easily add animated elements to your designs. We provide 32 different animations that can be applied and triggered when you scroll the page.

NOTE: This feature is currently only available in the Design Studio.

Step 1: Select an element on the page

Step 2: Open the preset animations panel. It can be found on the right side underneath the Transform panel.

Step 3: Choose from one of the available animations. This will immediately preview the animation. If you want to remove an animation, simply select "none".

You have a few options to customize the animation further:

Duration: This will set how long it takes for the animation to execute.

Delay: This will determine how long to wait for the animation to trigger once the element comes into view.

The easing curves for preset animations is built in, so you cannot further change them by using the easing curve panel.

Step 4: You can preview the entire page by hitting the "P" or you can publish the site.

NOTE: If you want to do more advanced interactions or have them trigger on click you can do so with out Interactions Panel.