Add animations and interactions to a page

Select an element and open the Interactions tab in the right panel.

Pick an animation, then a trigger

Choose an effect — fade, fade up or down, slide, scale, rotate or blur — then how it should fire:

• Scroll into view — plays once when the element reaches the viewport. The most common choice.
• Page load — plays as soon as the page renders.
• Hover — applies the effect while the pointer is over the element.
• Click — applies it briefly when clicked.

There are also two looping effects, Float and Pulse, that simply run continuously.

How much, not just how fast

Every effect that has a magnitude gives you a control for it, right under the trigger: Distance in pixels for the fades and slides, Rotation in degrees for Rotate in, Start at for Scale up (the size it grows from, as a percentage), Blur for Blur in, and travel or peak size for the two looping effects. Drag the slider or type an exact number. Turn a rotation up to 30° for something deliberately playful, or a fade-up distance down to 8px for a subtle lift.

Timing

Set duration, delay and easing per element — and duration applies to the looping effects too, as the length of one cycle. For scroll triggers you can untick Play once so the animation replays every time the element scrolls back into view.

Previewing

Animations are deliberately switched off while you edit — otherwise half your page would be invisible on the canvas. There are two ways to see them: Preview on canvas plays the selected element's animation in place, and the ▶ Preview button in the top bar runs the whole page exactly as a visitor gets it, scroll triggers and all. Press it again to go back to editing.