Play animation on click
This article covers the settings of playing animation On click.
Element for trigger
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, section or custom class to serve as the trigger.
For example, if you specify the square as the trigger, then the animation of the square starts playing when the square is clicked on.
When you select the circle as the trigger, then the animation of the square starts after clicking the circle.
You can select several elements, a section or a class of elements as the trigger.
On second click
Here you can set up what happens to the animation after it's clicked on again.
Play back
After playing, the animation remains in the state of the final step. On the second click, the animation plays backwards, from the final step to the initial state.
After playing, the animation remains in the state of the final step. On the second click, the animation plays backwards, from the final step to the initial state.
Replay
After playing, the animation remains in the state of the final step. On the second click, the animated element returns to its initial state and the whole animation replays.
After playing, the animation remains in the state of the final step. On the second click, the animated element returns to its initial state and the whole animation replays.
Pause
On every second click, the animation pauses playing and on every odd click it continues playing, till its final state.
On every second click, the animation pauses playing and on every odd click it continues playing, till its final state.
Reset to start
After playing, the animation remains in the state of the final step. On the second click, the animation plays backwards, from the final step to the initial state. To replay the animation, you need to click the element for the third time.
After playing, the animation remains in the state of the final step. On the second click, the animation plays backwards, from the final step to the initial state. To replay the animation, you need to click the element for the third time.
Do nothing
The animation triggers and the animated element remains in the state of the last step until the page is refreshed.
The animation triggers and the animated element remains in the state of the last step until the page is refreshed.
Number of replays
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. Note that it's not possible to loop animation if On second click → Play back option is selected.