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 object panel. More information on general animations and how you can apply them can be found here.
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.
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 colored 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.
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 initally 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 object animation tab, you can determine the position of the page a viewer has to reach before triggering the animation.