Modifiers Duration

Change the speed of the effect by changing its duration


Torus kit duration will change the default effect’s speed by changing its transition-duration. This makes the effect to run faster or slower. There are couple of predefined durations, or you can create your custom one.

Please note, that different Transition types has different duration, so the changed speed could behave differently.


There are six predefined effect durations: slowest, slower, slow for decreasing the speed and fast, faster, fastest for increasing the speed. Pick one and add it into data-tor.



These are predefined durations. Hover over the wrapper to see them in action.

<div data-tor-parent="hover">
  <div data-tor="hover(p) slowest"></div>
  <div data-tor="hover(p) slower"></div>
  <div data-tor="hover(p) slow"></div>
  <div data-tor="hover(p)"></div>
  <div data-tor="hover(p) fast"></div>
  <div data-tor="hover(p) faster"></div>
  <div data-tor="hover(p) fastest"></div>


To set custom duration, add duration(<amount>) to data-tor, where {amount} is a time in ms or s.

<div data-tor-parent="hover">
  <div data-tor="hover(p) duration(100ms)"></div>
  <div data-tor="hover(p) duration(5s)"></div>