Play animation on hover
This article covers the settings of playing animation On hover.
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.
If the blue 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 hovered over.
When you select the circle as the trigger, then the animation of the square starts after hovering over the circle.
You can select several elements, a section or a custom class as the trigger.
On mouse move
Here you can set up what happens to the animation after the user moves the cursor away from the element.
Play back
After playing, the animation remains in the state of the last step. On hovering over the element again, the animation plays backwards, from the final state to the initial one.
After playing, the animation remains in the state of the last step. On hovering over the element again, the animation plays backwards, from the final state to the initial one.
Replay
After playing, the animation remains in the state of the last step. On hovering over the animated element again, the element returns to its initial state and the whole animation replays.
After playing, the animation remains in the state of the last step. On hovering over the animated element again, the element returns to its initial state and the whole animation replays.
Pause
The animation plays only when the element is hovered over. Once the user takes off the cursor, the animation pauses and continues only hovering over the element again.
The animation plays only when the element is hovered over. Once the user takes off the cursor, the animation pauses and continues only hovering over the element again.
Reset to start
The animation replays once the user takes the cursor off the element.
The animation replays once the user takes the cursor off the element.
Do nothing
After playing, the animation remains in the state of the last step until the page is refreshed.
After playing, the animation 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.
Animation direction
The animation can be played in two directions:
Normal
The animation is played from the initial to the final state.
The animation is played from the initial to the final state.
Bounce
After playing the animation, the animated element returns to the initial state as the animation plays in reverse order.
After playing the animation, the animated element returns to the initial state as the animation plays in reverse order.