Play animation on hold

Element for trigger
On release
Number of replays
Animation direction

This article covers the settings of playing animation On hold.

A trigger is an element that starts playing animation when a certain event happens to it (for example, it is clicked on or hovered over, it enters the viewport on scrolling, etc.).

By default, the animated element is configured as the trigger but you can also set up any other element(s), section or custom class to serve as the trigger.

If the square is animated and by default set up as the element for trigger, then the animation of the square starts playing when the square is held down.

When you select the circle as the trigger, then the animation of the square starts after holding down the circle. 

Here you can set up what happens to the animation after the user releases the element.

Play back
After releasing the element, the animation plays backwards, from the final state to the initial one.

Replay
After reclicking, the element returns to its initial state and the whole animation replays.

Pause
On releasing the element, the animation pauses and continues playing after reclicking the element.

Reset to start
The animation replays once the user releases the element.

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

The animation can be played in two directions:

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