Loops Combinations

Combine multiple loops to create desired effect

Overview

Because the every loop uses its own CSS @keyframe animation, they cannot be combined in the one data-tor. Instead of that, you can nest each data-tor element inside another.

Examples

Combination of jump with a blink loop.

<div data-tor="loop:jump loop:blink">Example</div>

Combination of wobble.h with a swing loop, that has a slow loop-speed modifier.

<div data-tor="loop:wobble.h({duration: 2s})">
  <div data-tor="loop:swing">Example</div>
</div>

Nesting of three loops to create a pulsating effect.

<div class="d-inline-block" data-tor="loop:swing loop:radiate.primary">
  <div class="bg-primary p-3 text-white" data-tor="loop:pulse">Example</div>
</div>