Loops Triggers

Launch the animation loop on hover or when it gets an active class

Overview

Similar to Torus Kit Effects, the loops can also be launched on particular trigger. However, unlike the effects, loop has only two trigger types: hover and active class.

Because the CSS animation works on different principle than CSS transition, there is no smooth transition between active and idle state. This means, when you hover over the element with the data-tor-loop, the animation will start immediately from the first frame that is defined in the @keyframes. This applies to hovering-out, also.

Syntax

Use data-tor-loop="<trigger>:<variant>" to apply a trigger that launches the animation. The <trigger> is one of:

TriggerDescription
active:Launch the animation loop when the element gets .active class
show:Launch the animation loop when the element gets .show class
hover:Launch the animation loop when the element gets :hover state

Examples

Hover

Spin
Jump
Pulse
<div data-tor-loop="hover:spin">Spin</div>
<div data-tor-loop="hover:jump">Jump</div>
<div data-tor-loop="hover:pulse">Pulse</div>

Active class

Spin
Jump
Pulse
<div data-tor-loop="active:spin">Spin</div>
<div data-tor-loop="active:jump">Jump</div>
<div data-tor-loop="active:pulse">Pulse</div>