Pro

Delay

Start the transition with some timeout

Overview

Use delay-{milliseconds} value in data-fx data attribute to add a transition-delay and make a start of a transition delayed. The best use of delay is in combination with data-trigger where you can achieve good looking results like waterfall animation.

There are predefined CSS delay values up to 1000ms from delay-50 to delay-1000 with increment of 50. Higher values are processed by JavaScript.

Examples

Couple of example how you can use delay in data-fx attributes.

Basic usage

This example shows of using delay with ta:fade-in animation that will fire up when the parent data-trigger gets .active clas.

Click this trigger
th:push-up
th:push-up
th:push-up
<div data-trigger="active">
  <div data-fx="ta:push-up">th:push-up</div>
  <div data-fx="ta:push-up delay-100">th:push-up</div>
  <div data-fx="ta:push-up delay-200">th:push-up</div>
</div>

To create a nice Mask reveal effect, you can also use a delay parameter.

Click this trigger
<div class="row" data-trigger="active">

  <div class="col-md-4">
    <div data-fx="ta:mask-right skew">
      <div class="wrap">
        <img class="full" src="/assets/img/img-card-01.jpg">
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div data-fx="ta:mask-right skew delay-100">
      <div class="wrap">
        <img class="full" src="/assets/img/img-card-02.jpg">
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div data-fx="ta:mask-right skew delay-200">
      <div class="wrap">
        <img class="full" src="/assets/img/img-card-03.jpg">
      </div>
    </div>
  </div>

</div>

delay works even with more complicated data-fxs like block reveal.

Click this trigger
<div class="row" data-trigger="active">

  <div class="col-md-4">
    <div class="d-block h-15rem" data-fx="ta:block-right slide-right">
      <div class="wrap">
        <img class="img-fit" src="/assets/img/img-card-01.jpg">
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="d-block h-15rem" data-fx="ta:block-right slide-right delay-100">
      <div class="wrap">
        <img class="img-fit" src="/assets/img/img-card-02.jpg">
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="d-block h-15rem" data-fx="ta:block-right slide-right delay-200">
      <div class="wrap">
        <img class="img-fit" src="/assets/img/img-card-03.jpg">
      </div>
    </div>
  </div>

</div>

Transition timing function

Using Timing function in combination with delay you can achieve interesting results. Here is an example of using th:reveal-from-bottom with bounce transition timing function.

Click this trigger

Hi there!

Welcome to my

Awesome portfolio

<div data-trigger="active">
  <h2 data-fx="ta:reveal-up bounce">
    <div class="wrap">Hi there!</div>
  </h2>
  <h2 data-fx="ta:reveal-up bounce delay-50">
    <div class="wrap">Welcome to my</div>
  </h2>
  <h2 data-fx="ta:reveal-up bounce delay-100">
    <div class="wrap">Awesome portfolio</div>
  </h2>
</div>

Animation combinations

It is also possible to combine multiple transform animations with delay.

Click this trigger
th:fade-in
th:fade-in
th:fade-in
<div data-trigger="active">
  <div data-fx="ta:fade-in ta:grow">th:fade-in</div>
  <div data-fx="ta:fade-in ta:grow delay-50">th:fade-in</div>
  <div data-fx="ta:fade-in ta:grow delay-100">th:fade-in</div>
</div>

Custom delay time

Add any delay time by adding delay[{time}] value into data-fx. This will be processed by JavaScript.

Click this trigger
th:fade-in
th:fade-in
th:fade-in
<div data-trigger="active">
  <div data-fx="ta:fade-in ta:grow">th:fade-in</div>
  <div data-fx="ta:fade-in ta:grow delay[120ms]">th:fade-in</div>
  <div data-fx="ta:fade-in ta:grow delay[1s]">th:fade-in</div>
</div>

Cascade effect

Click this trigger
.fx
.fx
.fx
<div data-trigger="active" data-group-fx="ta:fade-in ta:grow cascade[100ms]">
  <div class="fx">.fx</div>
  <div class="fx">.fx</div>
  <div class="fx">.fx</div>
</div>