Play on animation trigger

Element for trigger
Number of replays
Animation direction

This article covers the settings of playing animation On animation trigger.

This is the only type of playing animation that needs two animated elements. Here you can connect one animation to the steps of the other animated element.

On animation trigger is the interaction type where one animation starts at a certain step of the second animation. One of the animation steps serves as the element for trigger.

The example below shows two elements. Let's configure the animation of the avatar (our animated element) to begin after the animation of the button (our element for trigger) stops.

First, we need to set up the animation of the button. In our case, the animation is made up of six steps, and starts playing on click.

Then we set up the animation of the avatar. Finally, we select the button as our element for trigger.

Now we select at what step to start animation of the avatar. In our example, we specified Trigger for all animation.

The next setting is Start animation after.

If you select Start, then the animation of the avatar starts playing after the first step of the button animation.

If you select End, then the animation of the avatar starts playing after the last step of the button animation.

In both variants animation of the element plays once by default but you can also set up the number of replays.

The Iteration starts / ends options come in handy if you want the trigger to launch at every iteration (that is, every repetition) of the looped step or animation. So if a step replays 5 times, then the trigger also goes off 5 times.

If you select Iteration starts, the trigger goes off only at the first iteration of the selected step. If you select Iteration ends, the trigger goes off only at the last iteration of the selected step.

By default, any animation you create plays only once. You can also set up several replays or loop the steps.

The example below shows some variants of setting up the replay.

The animation can be played in two directions:

Normal
The animation is played from the initial to the final state.

Bounce
After playing, the animation plays again, this time in reverse order.