Intro to animations

Elements in the Pro editor know multiple types of animations, which can be applied simultaniously to a single element and/or group. Animation types available in the Pro Editor are: start, repeating, end and scroll (longread only) animations. You will find these animations under the animation tab in the element panel. More information on general animations and how you can apply them can be found here.

Click here for more information on start & end animations.
Click here for more information on repeating animations.
Click here for more information on scroll animations.

Animating groups

In addition to elements, complete groups can receive an animation as well. This means that both the element itself and the group it's in can receive an animation. Groups will therefore receive their own timelines: when the group's animation is triggered, it will then start the timeline and trigger the animations of its elements. When closing a group, it will then play the end-animations of its elements before playing the end-animation of the group itself.

Timeline

The timeline lets you change the timing of all elements that are on the canvas. You can control when an element or group should become visible or when it should disappear. You can drag the dark blue handles at the start and end of the timeline to change the start- or end timing of an element. When the timeline is dragged to the end of the timeline, it wil always stay visible.

When a type of animation is applied, you will see a coloured bar inside the existing timeline. You can also drag the left or right side of this colored bar to change its duration, or drag the middle of the animation bar to move it inside the timeline. Combine the timing and animation options to create stunning interactive publications.

Viewport

While regular animations are based on a timeline, viewport animations trigger based on scroll interactions. This means that the animation will trigger when a user scrolls to a set point the page. This feature is then only available on longreads, where a user can scroll vertically through the page. Because viewers don't initially view the bottom of the page, it allows you prevent the animation from triggering before the viewer reaches that point.

When creating a viewport animation in the element animation tab, you can determine the position of the page a viewer has to reach before triggering the animation.

Updated on: 08/02/2023