The Animate and Delay helpers apply animation settings or delay to multiple actions at once. You can choreograph multi-action interactions without changing each action’s animation settings individually.
Animate
The Animation block has two parts, Animate and On Complete, that can each have their own set of actions. Any actions connected to the ‘Animate’ block will animate according to the Animate block's settings. Actions in the ‘On Complete’ section will fire immediately when the animation is finished (Delay time + Duration time).
In this example, the Rotation Z, Set Position Y, and Rotation Y actions will animate together, and we can easily test different animations by changing a single node's properties.
These three properties allow you to customize how an action occurs:
Delay: The number of seconds between the trigger firing and the action(s) beginning
Duration: The number of seconds the action will take to complete (Ex. action will occur over the course of X seconds)
Easing: Choose the action's easing curve; options are Default, Linear, Ease In, Ease Out, Ease In & Out, Spring, or Custom. Using Custom, you can write your own easing curve using the Expression Editor.
Delay
This helper node allows you to add a delay without animating the resulting action.
Time: The number of seconds between the trigger firing and the action(s) beginning
For example, let's say you're prototyping a notification. You would use a Delay block to "dismiss" the notification after a few seconds.
Overrides
You might notice that many actions have an Animate switch, allowing you to adjust the animation settings on the action node itself. Flipping the Animate switch on will override any animations defined in an Animate or Delay helper node.
You should use an Animate or Delay helper when you have several actions you’d like to animate at the same time. Action animation settings can be saved for specific overrides or single-action interactions.