Loops Options

Syntax

Adding options into loops is the same as for the Effects. Options are defined between curly brackets {} and separated with the comma:

loop:<variant>({<options>})

List of options

Duration

Change the default animation duration by adding {duration: <time>}. The <time> value should be in s or ms.

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

Speed

Similar to Duration, you can change the speed of the animation. The speed value has to be number.

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

Pause

Add pause between iterations by adding {pause: <time>}.

<div data-tor="loop:swing({pause: 2s})">Swing</div>