Built in Fade

Create fading animation to fade in or fade out any element. Use modifier to fade it only a little

Overview

Fading animation uses CSS opacity transition to fade in or fade out a desired element.

Example

Example of gradual fade in effect on heading title made with fade.in, pull.up(sm) and delay(<value>).

Hover me

Fade in effect made super easy with Torus Kit

CSS fade effect example
<div data-tor-parent="hover hover-fix" data-tor-group=".d-block span => hover(p):[fade.in pull.up(sm)] slow delay(/0+50ms/);">
  <h2>
    <span class="d-block">
      <span>Fade</span><span>in</span><span>effect</span>
    </span>
    <span class="d-block">
      <span>made</span><span>super</span><span>easy</span>
    </span>
    <span class="d-block">
      <span>with</span><span>Torus</span><span>Kit</span>
    </span>
  </h2>
</div>

Triggers

To fade an element when <trigger> is performed on a single element, use data-tor-fx="<trigger>:fade.(<direction>) where <trigger> is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets :hover state

And <direction> is one of the:

  • fade.in set element opacity from 0 to 1
  • fade.out set element opacity from 1 to 0
fade.in
fade.out
<div data-tor="hover:fade.in">fade.in</div>
<div data-tor="hover:fade.out">fade.out</div>
fade.in
fade.out
<div data-tor="active:fade.in">fade.in</div>
<div data-tor="active:fade.out">fade.out</div>
fade.in
fade.out
<div data-tor="inview:fade.in">fade.in</div>
<div data-tor="inview:fade.out">fade.out</div>

Parent triggers

To fade an element of a single or multiple child elements when <trigger> is performed on a parent element, add data-tor-fx-trigger="<inview|active|show|hover> to indicate that this is a parent element with the desired trigger - if this parent trigger is performed, child elements will be affected (will change)

Than add data-tor-fx="<trigger>:fade.(<direction>) attribute to child elements where <trigger> is:

  • inview(p): - when .inview class is applied on Parent trigger element, because it's visible in the viewport
  • active(p): - when .active class is applied on Parent trigger element
  • show(p): - when .show class is applied on Parent trigger element
  • hover(p): - when hover state is applied on Parent trigger element

And <direction> is one of the:

  • fade.in set element opacity from 0 to 1
  • fade.out set element opacity from 1 to 0
fade.in
fade.out
<div data-tor="hover(p):fade.in">fade.in</div>
<div data-tor="hover(p):fade.out">fade.out</div>
fade.in
fade.out
<div data-tor="active(p):fade.in">fade.in</div>
<div data-tor="active(p):fade.out">fade.out</div>
fade.in
fade.out
<div data-tor="inview(p):fade.in">fade.in</div>
<div data-tor="inview(p):fade.out">fade.out</div>