Pro

Duration

Change speed of the loop by controlling its duration

Overview

You can change the default speed (duration) of the loop to be faster (duration is shorter), slower (duration is longer) or any custom value which is handled by JavaScript.

Faster

To set a faster duration, which makes loop run faster against the default 1000ms add fast, faster, fastest.

  • default: 1000ms
  • fast: 850ms
  • faster: 600ms
  • fastest: 450ms
default
fast
faster
fastest
<div data-loop="circle">
  <div data-loop="wobble-v">default</div>
  <div data-loop="wobble-v fast">fast</div>
  <div data-loop="wobble-v faster">faster</div>
  <div data-loop="wobble-v fastest">fastest</div>
</div>

Slower

To set a slower duration, which makes loop run slower against the default 1000ms add slow, slower, slowest.

  • default: 1000ms
  • slow: 1250ms
  • slower: 1500ms
  • slowest: 1750ms
default
slow
slower
slowest
<div data-loop="circle">
  <div data-loop="wobble-v">default</div>
  <div data-loop="wobble-v slow">slow</div>
  <div data-loop="wobble-v slower">slower</div>
  <div data-loop="wobble-v slowest">slowest</div>
</div>

Custom value

It’s also possible to add a custom duration value if the predefined ones are not enough. Add duration[{duration}] into data-loop. The {duration} parameter is time in ms or s.

duration[500ms]
default
duration[4s]
<div data-loop="circle">
  <div data-loop="wobble-v duration[500ms]">duration[500ms]</div>
  <div data-loop="wobble-v">default</div>
  <div data-loop="wobble-v duration[4s]">duration[4s]</div>
</div>