How to create timeline animations
Last updated
Composition scripting
Last updated
Timeline animations control the speed, duration, and style of how sub-compositions, groups, and widgets animate In and Out.
This guide shows you how to:
Timeline animations are represented by colored bars in the animation menu tab in the property panel. To change them
Navigate to the animation tab in the property panel.
Click, hold, and drag the bar left and right to change when the animation starts. Or click hold and drag either end of the bar to shorten or lengthen the duration of an animation.
To set up animations so they animate In differently than they animate Out
Navigate to the animation tab in the property panel.
Activate 2 timelines in the top of the animation tab.
Select Out1 to In to configure the In animation and In to Out2 to configure the Out animation.
If you want an overlay to animate In and Out in the same way, don't use this feature.
To fine-tune animation settings
Navigate to the animation tab in the property panel.
Click the three sliders icon on the timeline animation bar. You can change the type, direction, duration, and curve of animations.
Test your changes by clicking In and Out below the output window.
The Singular REST API and control applications can only control timeline animations that have been set to the root level of your composition tree structure. If you need timeline animations to play out in nested sub-compositions, use the link timelines feature.
You can force the Singular REST API and control apps to run the timeline animations of nested sub-compositions by linking timelines.
To play the animation timelines of a sub-composition nested beneath another sub-composition, right click the nested sub-composition in the composition tree and select Link Timeline.
When a timeline animation has been linked, it will turn green in the composition tree.
You can also show or hide sub-compositions with linked timelines by toggling the linked timelines button (chainlink icon) in the top left of the composition navigator.
