Intro to animations

Animations make an element or group appear, move or disappear on the page. You add them in the Animations tab of the right panel and time them on the timeline. One element can have a start, a repeating and an end animation at the same time.

Animation types

The Animations tab has up to four animation blocks. Each block has its own toggle:

• Start animation: plays when the element appears. See Start and end animations.
• Repeating animation: repeats while the element is visible, a set number of times or endlessly (∞), set with Repeat. See Repeating animations.
• End animation: plays when the element disappears. See Start and end animations.
• Scroll path animation: moves the element along a path you set with Edit animation, as the viewer scrolls. It is only available in scenes with the scene type Longpage. See Scroll animations.

Start, repeating and end animations can be combined on one element or group. A scroll path animation can't be combined with them: while a scroll path animation is on, the other three blocks are disabled, and while any of the other three is on, the scroll path animation is disabled.

Adding an animation to an element or group

To add an animation:

1. Select the element or group on the canvas.
2. In the right panel, open the Animations tab.
3. Switch on the block you want: Start animation, Repeating animation, End animation or, in a Longpage scene, Scroll path animation.
4. Choose a Type and adjust its settings.

Animating groups

A group can have its own animations, in addition to the animations of the elements inside it. The group has its own row on the timeline, and the timing of the elements inside it runs within the group's timing:

• When the group's start animation plays, the elements inside the group start their own animations.
• When the group disappears, the elements inside it play their end animations first, and then the group plays its own end animation.

If a group's start animation uses the Viewport or Scroll trigger, the elements inside that group follow it, and their Start animation block shows "Animation trigger on parent group." instead of their own trigger options. The same applies to end animations.

Timing animations on the timeline

The timeline controls when each element and group appears and disappears, and when its animations play. It starts running when the page loads. Animations that use the Viewport or Scroll trigger don't follow this page-load timing: they play based on the viewer's scrolling instead.

Each element and group has its own row on the timeline. Start and end animations show as coloured bars inside that row; a scroll path animation colours the whole row. The colour shows the kind of animation; click Map at the bottom of the timeline to see what each colour means.

To change the timing:

1. Click Timeline in the left panel.
2. Drag the handle at the start of an element's row to set when the element appears.
3. Drag the handle at the end of the row to set when the element disappears. To keep the element visible until the end, drag this handle to the end of the timeline.
4. Drag the inner edge of an animation bar to change that animation's duration: the right edge of a start animation, or the left edge of an end animation.
5. Drag the middle of an element's row to move the element's whole timing (when it appears, its animations and when it disappears) to a different moment. This doesn't work when the element appears at the very start of the timeline and stays visible until the end.

Playing an animation when an element scrolls into view (Viewport trigger)

The Viewport trigger makes a start or end animation play when the viewer scrolls the element to a set position on the screen, instead of when the page loads. Use it for content further down a long page, so the animation doesn't play before the viewer gets there.

The trigger options are only available in scenes with the scene type Longpage. The mobile layout is a Longpage by default, so the trigger options are available there even when the desktop scene uses another scene type.

To set a viewport trigger:

1. Make sure the scene uses the scene type Longpage. You set this in the scene's settings, under Scene type.
2. Select the element or group, and open the Animations tab in the right panel.
3. Switch on Start animation or End animation.
4. Under the trigger options, select Viewport.
5. Set Start to the point on the screen, measured up from the bottom, that the element must reach. Hover over a value to see that point as a line on the canvas.
6. In the selector next to Start, choose Top, Center or Bottom to set which part of the element must reach that point.
7. Optional: tick Restart in view to play the animation again each time the element comes back into view.

Without Restart in view, a viewport animation plays once. To link an animation to the scroll position itself, so it moves as the viewer scrolls, use the Scroll trigger instead. See Scroll-triggered animations.

Frequently asked questions

Why can't I choose Viewport or Scroll as the trigger for my animation?

The Timeline, Viewport and Scroll trigger options for start and end animations only appear in scenes with the scene type Longpage. If the scene uses another scene type, all start and end animations follow the timeline. The mobile layout is a Longpage by default, so there the trigger options are available. The trigger options are also hidden for an element inside a group whose animation for the same block (start or end) already uses the Viewport or Scroll trigger. That element shows "Animation trigger on parent group." and follows the group's trigger.

Why are the start, repeating and end animations disabled?

A Scroll path animation is switched on for the element. A scroll path animation can't be combined with start, repeating or end animations. Switch off Scroll path animation in the Animations tab to use the other three. It works the other way round too: while a start, repeating or end animation is on, Scroll path animation is disabled.

How do I keep an element visible without it disappearing?

Open the timeline with Timeline in the left panel, and drag the handle at the end of the element's row to the end of the timeline. The element then has no end time and stays visible.

Does a viewport animation play every time the element comes into view?

No. An animation with the Viewport trigger plays once by default. To replay it each time the element comes back into view, tick Restart in view in the animation's settings in the Animations tab.

Updated on: 19/10/2026