Loops Duration

Change the duration (speed) of the animation with predefined values or your own one

Overview

Each loop has their own duration, but can be changed easily. Use predefined values or set your custom one.

Syntax

You can change the duration/speed of the animation by using duration or speed option. Each one uses different units.

Duration

Use data-tor="<variant>({duration: <value>})" to change the default duration in s or ms.

Speed

Use data-tor="<variant>({speed: <value>})" to change the default speed, where speed can be any number or one of these predefined values:

SpeedDefault duration multiplier
slowest0.45
slower0.6
slow0.85
default1
fast1.5
faster2
fastest2.5

Examples

Predefined

List of predefined duration in action.

Swing
Swing
Swing
Swing
Swing
Swing
Swing
<div data-tor="loop:swing({speed: slowest})">Swing</div>
<div data-tor="loop:swing({speed: slower})">Swing</div>
<div data-tor="loop:swing({speed: slow})">Swing</div>
<div data-tor="loop:swing">Swing</div>
<div data-tor="loop:swing({speed: fast})">Swing</div>
<div data-tor="loop:swing({speed: faster})">Swing</div>
<div data-tor="loop:swing({speed: fastest})">Swing</div>

Custom duration

To set custom duration, use duration(<value>). You can even set the responsive custom durations.

Swing
Swing
Swing
<div data-tor="loop:swing({duration: 5s})">Swing</div>
<div data-tor="loop:swing({speed: 0.5})">Swing</div>
<div data-tor="loop:swing({speed: 2})">Swing</div>