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>