Modifiers Duration

Change the speed of the effect by changing its duration

Overview

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.

Syntax

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.

Examples

Predefined

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

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

Custom

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):scaleX.to(2) duration(100ms)"></div>
  <div data-tor="hover(p):scaleX.to(2) duration(5s)"></div>
</div>