Start & end animations

A start animation brings an element into view, and an end animation takes it out of view. You set both for each element in the Animations tab of the right panel, under Start animation and End animation.

Adding a start or end animation

To add a start or end animation to an element:

1. Select the element on the canvas.
2. In the right panel, open the Animations tab.
3. Switch on the toggle next to Start animation or End animation.
4. If the Scene type of the layout you are editing is Longpage, choose the trigger: Timeline, Viewport or Scroll.
5. Set the Duration. With the Scroll trigger, set the Length instead.
6. Click the button next to Type and choose an animation type. Hover over a type to preview it.
7. Adjust the settings for that type, such as Easing and Direction.
8. Open the preview to check the result.

A new start or end animation uses the Fade type, Linear easing and the Timeline trigger. Switching it on adds the animation to the element's bar on the timeline, with a duration of up to 1 second. The shortest possible duration is 0.2 seconds.

Start and end animation triggers

The trigger decides when a start or end animation plays. You can choose a trigger only in a scene whose Scene type is Longpage. In a Fullscreen scene, start and end animations always use the Timeline trigger. The Scene type is set separately for the desktop and mobile layouts. On the mobile layout it is Longpage by default, so the trigger choice is available there unless the mobile Scene type is changed to Fullscreen.

• Timeline: the animation plays automatically when the page loads, at its position on the element's bar on the timeline. A start animation plays at the beginning of the element's time on the timeline, and an end animation at the end of it.
• Viewport: the animation plays when the element reaches a set position on the screen as the reader scrolls. This position is the Start setting, a percentage of the screen height. An end animation's Start must be a higher percentage than the start animation's, so it plays later.
• Scroll: the animation is linked to the reader's scroll position, so it moves forward and back as the reader scrolls. It uses a Length setting instead of Duration.

An end animation does not play automatically when the element scrolls out of view. It plays at the point its trigger sets: its place on the timeline, or its own start position on the screen.

For the Viewport settings, see Intro to animations. For the Scroll settings, see Scroll animations.

Start and end animation settings

These settings are available for start and end animations:

• Duration: how long the animation lasts, in seconds. Scroll-triggered animations use Length instead.
• Type: the kind of animation. Click the button next to Type to open the list of types; hovering over a type previews it.
• Easing: the curve of the motion, for example a steady speed or a slow start. Available for every type except Keyframe and Animate children.
• Direction: the side the animation comes from or moves towards, chosen on a grid of nine points. Available for Move, Move Step, Fade, Fade Step, Blur, Masked move and Masked zoom.

Other settings depend on the type you choose. They are listed with each type below.

Start and end animation types

The Type list for start and end animations has these types:

• Move: on a start animation, the element slides in from outside the edge of the page, on the side set by Direction, to its place. On an end animation, it slides out past that edge.
• Move Step: moves the element a set distance, in the chosen Direction. The Distance setting sets how far.
• Fade: fades the element in or out. With a Direction other than the center, the element also slides in from, or out to, the edge of the page.
• Fade Step: fades the element in or out while moving it a set distance, in the chosen Direction. The Distance setting sets how far.
• Zoom: makes the element grow or shrink. The Zoom setting sets the size, as a percentage, that the element zooms from or to.
• Rotate: rotates the element. The Degrees setting sets how far it turns (360 by default), and the Pivot point setting sets the point it turns around.
• Flip: flips the element horizontally or vertically. Its Direction setting has four arrows: left to right, right to left, top to bottom or bottom to top.
• Blur: blurs the element while moving it a set distance in the chosen Direction. The Blur setting sets how strong the blur is, and Distance sets how far it moves.
• Keyframe: lets you set where the element is at each point in time, for precise movement. Choose Keyframe, then click Edit animation to open the keyframe editor.
• Masked move: the element slides inside its own box, so it is revealed (start animation) or hidden (end animation) from the chosen Direction.
• Masked zoom: the element grows or shrinks inside its own box. The Zoom setting is 150% by default and can't be lower than 100%. Direction sets the point the zoom starts from.
• Animate children: hands the animation trigger to the elements inside a group, so each one plays its own start or end animation. It works only on a group with a Viewport or Scroll trigger. The elements inside the group then show "Animation trigger on parent group."

Zoom, Rotate, Flip and Blur also have a With fade option, which fades the element in or out at the same time.

Frequently asked questions

Why can't I choose the Viewport or Scroll trigger?

The Viewport and Scroll triggers are available only in scenes whose Scene type is Longpage. In a Fullscreen scene, start and end animations always use the Timeline trigger, and the trigger choice is not shown. The Scene type is set separately for the desktop and mobile layouts. On the mobile layout it is Longpage by default, so the trigger choice is available there unless the mobile Scene type is changed to Fullscreen.

Why can't I select Animate children?

Animate children works only on a group of elements, and only when the start or end animation uses the Viewport or Scroll trigger. On a single element, or with the Timeline trigger, the option can't be selected.

Why are the start and end animation settings greyed out?

In a Longpage scene, the start and end animation settings are switched off while the element has a scroll path animation. Switch off Scroll path animation in the Animations tab to use start and end animations again.

Updated on: 29/10/2026