Pro

Variants

Choose from numerous loop variants

Overview

Torus Kit provides numerous animation loops that can be used in your design. Below examples shows the default version of each one together with example of using a custom value.

Create blink (flash) loop animation by adding data-loop="blink".

Defaults:

  • CSS parameter: opacity
  • Active value: 0

Example of the default blink loop and a custom one with a .5 value, that makes the element fade only to 50%.

Blink
Blink [.5]
<div data-loop="blink">Blink</div>
<div data-loop="blink [.5]">Blink [.5]</div>

Jump

Create jump-like loop animation by adding data-loop="jump".

Defaults:

  • CSS parameter: translateY
  • Active value: -0.5rem

Example of the default jump loop and a custom one with a .5 value, that makes the element jump to -1rem.

Jump
Jump
<div data-loop="jump">Jump</div>
<div data-loop="jump [-1rem]">Jump</div>

Circle

Create circular (element moves over circular path) loop animation by adding data-loop="circle".

Defaults:

  • CSS parameter: translateY and rotate
  • Active value: 1rem and 360deg

Example of the default circle loop and a custom one with a .2rem value, that makes the element move only in .2rem diameter.

Circle
Circle
<div data-loop="circle">Circle</div>
<div data-loop="circle [.2rem]">Circle</div>

Float

Create float (levitation) loop animation by adding data-loop="float".

Defaults:

  • CSS parameter: translateY
  • Active value: -0.5rem

Example of the default float loop and a custom one with a -1rem value, that makes the element move up by -1rem.

Float
Float
<div data-loop="float">Float</div>
<div data-loop="float [-1rem]">Float</div>

Pulse

Create pulsating (scale up and back) loop animation by adding data-loop="pulse".

Defaults:

  • CSS parameter: scale
  • Active value: 1.1

Example of the default pulse loop and a custom one with a 1.5 value, that makes the element scale up to 150% of its size.

Pulse
Pulse [1.5]
<div data-loop="pulse">Pulse</div>
<div data-loop="pulse [1.5]">Pulse [1.5]</div>

Radiate

Create radiation (fading color border) loop animation by adding data-loop="radiate" and radiate-{color} from theme colors.

Defaults:

  • CSS parameter: box-shadow
  • Active value: 0.8rem
Radiate
Radiate
Radiate
Radiate
Radiate
Radiate
Radiate
Radiate
Radiate
<div class="bg-primary" data-loop="radiate radiate-primary">Radiate</div>
<div class="bg-secondary" data-loop="radiate radiate-secondary">Radiate</div>
<div class="bg-success" data-loop="radiate radiate-success">Radiate</div>
<div class="bg-danger" data-loop="radiate radiate-danger">Radiate</div>
<div class="bg-warning" data-loop="radiate radiate-warning">Radiate</div>
<div class="bg-info" data-loop="radiate radiate-info">Radiate</div>
<div class="bg-light" data-loop="radiate radiate-light">Radiate</div>
<div class="bg-dark" data-loop="radiate radiate-dark">Radiate</div>
<div class="bg-grey" data-loop="radiate radiate-grey">Radiate</div>

Example of the default radiate loop and a custom one with a 2rem value, that makes the elements box shadow 2rem thick.

Radiate
Radiate [2rem]
<div class="bg-grey" data-loop="radiate radiate-grey">Radiate</div>
<div class="bg-grey" data-loop="radiate radiate-grey [2rem]">Radiate [2rem]</div>

Spin

Create rotating loop animation by adding data-loop="spin".

Defaults:

  • CSS parameter: rotate
  • Active value: 360deg

spin can only have a default 360deg value;

Spin
<div data-loop="spin">Spin</div>

Swing

Create swing loop animation by adding data-loop="swing".

Defaults:

  • CSS parameter: rotate
  • Active value: 20deg

Example of the default swing loop and a custom one with a 40deg value, that makes the element swing by 40deg.

Swing
Swing
<div data-loop="swing">Swing</div>
<div data-loop="swing [40deg]">Swing</div>

Wobble

Create vertical wobble (oscillate over y-axis) loop animation by adding data-loop="wobble-v".

Defaults:

  • CSS parameter: translateY
  • Active value: 1rem

Example of the default wobble-v loop and a custom one with a 2rem value, that makes the element oscillate by 2rem.

Wobble vertical
Wobble vertical
<div data-loop="wobble-v">Wobble vertical</div>
<div data-loop="wobble-v [2rem]">Wobble vertical</div>

Create horizontal wobble (oscillate over x-axis) loop animation by adding data-loop="wobble-h".

Defaults:

  • CSS parameter: translateX
  • Active value: 1rem

Example of the default wobble-h loop and a custom one with a 2rem value, that makes the element oscillate by 2rem.

Wobble horizontal
Wobble horizontal
<div data-loop="wobble-h">Wobble horizontal</div>
<div data-loop="wobble-h [2rem]">Wobble horizontal</div>