Effects modifiers Delay PRO
Add a delay to transition to create custom effects such as gradual reveal effect
Overview
Torus kit delay will add a CSS transition-delay
to triggered effect that will make the effect to start later. This comes very handy when creating gradual revealing effects on lists, image gallery that reveals during the scroll, revealing the elements when slider/carousel slides into viewport, etc.
Syntax
The syntax for delay is very simple. Just add delay[{amount}]
to data-fx
with your effect. The {amount}
can me in ms
or s
unit.
Examples
Delay
Simple example of gradual shrink
effect on parent trigger hover.
<div data-fx-trigger="hover">
<div data-fx="hover/T:shrink"></div>
<div data-fx="hover/T:shrink delay[50ms]"></div>
<div data-fx="hover/T:shrink delay[100ms]"></div>
</div>
Wait
The wait
modifier also make use of CSS transition-delay
, but the main purpose is to use it in combination with delay
. This is useful when you create a gradual effect on multiple same elements, where the delay
increases with every new one. You can use wait[{amount}]
in ms
or s
, and keep the notation of delay
, without counting every new one.
Look at the delay
markup in the first and second group of elements in the example below. It’s the same, but the second one has a wait[300ms]
modifier, which add a 300ms to each original delay
.
<div data-fx-trigger="hover">
<div data-fx="hover/T:shrink"></div>
<div data-fx="hover/T:shrink delay[50ms]"></div>
<div data-fx="hover/T:shrink delay[100ms]"></div>
<hr>
<div data-fx="hover/T:shrink wait[300ms]"></div>
<div data-fx="hover/T:shrink wait[300ms] delay[50ms]"></div>
<div data-fx="hover/T:shrink wait[300ms] delay[100ms]"></div>
</div>