Loops Variants

Choose from various predefined loops. Change their duration and responsive values

Overview

Torus Kit loops create CSS animation loop repeats itself according to defined @keyframes values. They are different to Effects as the effects uses CSS transition while loops uses CSS animation. Every loop can be modified by adding a custom value and speed (animation duration) - these modifiers are responsive, so you can fine-tune the loop on every device.

Syntax

Basic

Basic syntax is data-tor="loop:<variant>". Where <variant> is one of the variants listed below.

Custom value

You can customize the default behavior of the loop by adding a parentheses (<value>) to the animation <variant>. The syntax will be: data-tor="loop:variant(<value>)".

Combining animations

To prevent interfering between animations, it's better to nest individual elements with data-tor

Variants

Built-in animation loops with the default examples along with the custom one, and custom animation speed.

Add blink attribute to data-tor to create a blinking animation loop.

Default value: 0

Blink
Blink
Blink
Blink
Blink
<!-- Default -->
<div data-tor="loop:blink">Blink</div>

<!-- Custom value -->
<div data-tor="loop:blink(0.5)">Blink</div>

<!-- Responsive: custom value from MD an up -->
<div data-tor="loop:blink(md::0.5)">Blink</div>

<!-- Animation speed change -->
<div data-tor="loop:blink({duration: 3s})">Blink</div>

<!-- Animation speed change -->
<div data-tor="loop:blink({duration: 500ms})">Blink</div>

Circle

Add circle attribute to data-tor to create a circular move animation loop.

Default value: 1rem

Circle
Circle
Circle
Circle
Circle
<!-- Default -->
<div data-tor="loop:circle">Circle</div>

<!-- Custom value -->
<div data-tor="loop:circle(2rem)">Circle</div>

<!-- Responsive: custom value from MD an up -->
<div data-tor="loop:circle(md::0.5rem)">Circle</div>

<!-- Animation speed change -->
<div data-tor="loop:circle({duration: 3s})">Circle</div>

<!-- Animation speed change -->
<div data-tor="loop:circle({duration: 500ms})">Circle</div>

Jump

Add jump attribute to data-tor to create a jumping animation loop.

Default value: 0.5rem

Jump
Jump
Jump
Jump
Jump
<!-- Default -->
<div data-tor="loop:jump">Jump</div>

<!-- Custom value -->
<div data-tor="loop:jump(1rem)">Jump</div>

<!-- Responsive: custom value from MD an up -->
<div data-tor="loop:jump(md::2rem)">Jump</div>

<!-- Animation speed change -->
<div data-tor="loop:jump({duration: 3s})">Jump</div>

<!-- Animation speed change -->
<div data-tor="loop:jump({duration: 500ms})">Jump</div>

Float

Add float attribute to data-tor to create a floating animation loop.

Default value: -0.5rem

Float
Float
Float
Float
Float
<!-- Default -->
<div data-tor="loop:float">Float</div>

<!-- Custom value -->
<div data-tor="loop:float(-1rem)">Float</div>

<!-- Responsive: custom value from MD an up -->
<div data-tor="loop:float(md::-2rem)">Float</div>

<!-- Animation speed change -->
<div data-tor="loop:float({duration: 3s})">Float</div>

<!-- Animation speed change -->
<div data-tor="loop:float({duration: 500ms})">Float</div>

Pulse

Add pulse attribute to data-tor to create a pulsating animation loop.

Default value: 1.1

Pulse
Pulse
Pulse
Pulse
Pulse
<!-- Default -->
<div data-tor="loop:pulse">Pulse</div>

<!-- Custom value -->
<div data-tor="loop:pulse(1.5)">Pulse</div>

<!-- Responsive: custom value from MD an up -->
<div data-tor="loop:pulse(md::1.4)">Pulse</div>

<!-- Animation speed change -->
<div data-tor="loop:pulse({duration: 3s})">Pulse</div>

<!-- Animation speed change -->
<div data-tor="loop:pulse({duration: 500ms})">Pulse</div>

Radiate

Add radiate with appropriate radiate(<theme-color>) attribute to data-tor to create a radiating animation loop. Change the thickness by adding custom value with radiate(<value>)

Default value: 0.75rem

Radiate
Radiate
Radiate
Radiate
Radiate
<!-- Default -->
<div data-tor="loop:radiate.primary">Radiate</div>

<!-- Custom value -->
<div data-tor="loop:radiate.primary(2rem)">Radiate</div>

<!-- Responsive: custom value from MD an up -->
<div data-tor="loop:radiate.primary(md::0.5rem)">Radiate</div>

<!-- Animation speed change -->
<div data-tor="loop:radiate.primary({duration: 3s})">Radiate</div>

<!-- Animation speed change -->
<div data-tor="loop:radiate.primary({duration: 500ms})">Radiate</div>

Colors

All theme colors are available

primary
secondary
success
info
warning
danger
light
dark
gray
<div class="bg-primary" data-tor="loop:radiate.primary">primary</div>
<div class="bg-secondary" data-tor="loop:radiate.secondary">secondary</div>
<div class="bg-success" data-tor="loop:radiate.success">success</div>
<div class="bg-info" data-tor="loop:radiate.info">info</div>
<div class="bg-warning" data-tor="loop:radiate.warning">warning</div>
<div class="bg-danger" data-tor="loop:radiate.danger">danger</div>
<div class="bg-light" data-tor="loop:radiate.light">light</div>
<div class="bg-dark" data-tor="loop:radiate.dark">dark</div>
<div class="bg-gray" data-tor="loop:radiate.gray">gray</div>

Spin

Add spin attribute to data-tor to create a spinning animation loop.

Default value: 360deg

Spin
Spin
Spin
<!-- Default -->
<div data-tor="loop:spin">Spin</div>

<!-- Custom value -->
<!-- Not allowed -->

<!-- Animation speed change -->
<div data-tor="loop:spin({duration: 3s})">Spin</div>

<!-- Animation speed change -->
<div data-tor="loop:spin({duration: 500ms})">Spin</div>

Swing

Add swing attribute to data-tor to create a swinging animation loop.

Default value: 20deg

Swing
Swing
Swing
Swing
Swing
<!-- Default -->
<div data-tor="loop:swing">Swing</div>

<!-- Custom value -->
<div data-tor="loop:swing(30deg)">Swing</div>

<!-- Responsive: custom value from MD an up -->
<div data-tor="loop:swing(md::10deg)">Swing</div>

<!-- Animation speed change -->
<div data-tor="loop:swing({duration: 3s})">Swing</div>

<!-- Animation speed change -->
<div data-tor="loop:swing({duration: 500ms})">Swing</div>

Wobble

Horizontal

Add wobble.h attribute to data-tor to create a horizontal wobble animation loop.

Default value: 1rem

Wobble
Wobble
Wobble
Wobble
Wobble
<!-- Default -->
<div data-tor="loop:wobble.h">Wobble</div>

<!-- Custom value -->
<div data-tor="loop:wobble.h(2rem)">Wobble</div>

<!-- Responsive: custom value from MD an up -->
<div data-tor="loop:wobble.h(md::0.5rem)">Wobble</div>

<!-- Animation speed change -->
<div data-tor="loop:wobble.h({duration: 3s})">Wobble</div>

<!-- Animation speed change -->
<div data-tor="loop:wobble.h({duration: 500ms})">Wobble</div>

Vertical

Add wobble.v attribute to data-tor to create a horizontal wobble animation loop.

Default value: 1rem

Wobble
Wobble
Wobble
Wobble
Wobble
<!-- Default -->
<div data-tor="loop:wobble.v">Wobble</div>

<!-- Custom value -->
<div data-tor="loop:wobble.v(2rem)">Wobble</div>

<!-- Responsive: custom value from MD an up -->
<div data-tor="loop:wobble.v(md::0.5rem)">Wobble</div>

<!-- Animation speed change -->
<div data-tor="loop:wobble.v({duration: 3s})">Wobble</div>

<!-- Animation speed change -->
<div data-tor="loop:wobble.v({duration: 500ms})">Wobble</div>

Move

Move the element in one direction in infinite loop using data-tor="loop:move.<direction>" where <direction> is up, down, right or left. The best use is to wrap it into the parent element with overflow: hidden and size (height/width) set.

The data-tor="loop:move.*" attribute gets position: absolute automatically, so make sure to set the position of the parent element.

Triggers

The hover hover: trigger is not available for move loop

These examples uses .position-relative and .overflow-hidden utility classes on the parent wrapper. To set size on the parent, we’ve used .h-5rem class that sets height: 5rem, and .w-20 that sets width: 20%.

Right
Left
Up
Down
<div class="h-5rem w-20 overflow-hidden position-relative center-v">
  <div data-tor="loop:move.right">Right</div>
</div>
<div class="h-5rem w-20 overflow-hidden position-relative center-v">
  <div data-tor="loop:move.left">Left</div>
</div>
<div class="h-5rem w-20 overflow-hidden position-relative center-h">
  <div data-tor="loop:move.up">Up</div>
</div>
<div class="h-5rem w-20 overflow-hidden position-relative center-h">
  <div data-tor="loop:move.down">Down</div>
</div>