Built in Fade PRO

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. Add a --small modifier to limit the fading opacity.

Example

Example of gradual fade in effect on heading title made with fade--in, pull--up and delay[{value}].

Hover me

Fade in effect made super easy with Torus Kit

<div data-fx-trigger="hover hover-fix" data-fx-group=".d-block span => hover/T:fade--in 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-fx="{trigger}:{fade-variant} 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 {fade-variant} is one of the:

• fade--in set element opacity from 0 to 1
• fade--out set element opacity from 1 to 0
• fade--in--small set element opacity from 0.8 to 1
• fade--out--small set element opacity from 1 to 0.8

          













<div data-fx="hover:fade--in">Fade in</div>
<div data-fx="hover:fade--out">Fade out</div>
<div data-fx="hover:fade--in--small">Fade in small</div>
<div data-fx="hover:fade--out--small">Fade out small</div>
          

          













<div data-fx="active:fade--in">Fade in</div>
<div data-fx="active:fade--out">Fade out</div>
<div data-fx="active:fade--in--small">Fade in small</div>
<div data-fx="active:fade--out--small">Fade out small</div>
          

          













<div data-fx="inview:fade--in">Fade in</div>
<div data-fx="inview:fade--out">Fade out</div>
<div data-fx="inview:fade--in--small">Fade in small</div>
<div data-fx="inview:fade--out--small">Fade out small</div>
          

Parent triggers

To animate fading of a single or multiple child elements when {trigger} is performed on a parent element,
add data-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 change.

Than add data-fx="{TRIGGER}:{fade-variant} attribute to child elements where {TRIGGER} is:

• inview/T: - when .inview class is applied on parent Trigger element, because it’s visible in the viewport
• active/T: - when .active class is applied on parent Trigger element
• show/T: - when .show class is applied on parent Trigger element
• hover/T: - when hover state is applied on parent Trigger element

And {fade-variant} is one of the:

• fade--in set element opacity from 0 to 1
• fade--out set element opacity from 1 to 0
• fade--in--small set element opacity from 0.8 to 1
• fade--out--small set element opacity from 1 to 0.8

          













<div data-fx-trigger="hover">
  <div data-fx="hover/T:fade--in">Fade in</div>
  <div data-fx="hover/T:fade--out">Fade out</div>
  <div data-fx="hover/T:fade--in--small">Fade in small</div>
  <div data-fx="hover/T:fade--out--small">Fade out small</div>
</div>
      
          

          













<div data-fx-trigger="active">
  <div data-fx="active/T:fade--in">Fade in</div>
  <div data-fx="active/T:fade--out">Fade out</div>
  <div data-fx="active/T:fade--in--small">Fade in small</div>
  <div data-fx="active/T:fade--out--small">Fade out small</div>
</div>
      
          

          













<div data-fx-trigger="inview">
  <div data-fx="inview/T:fade--in">Fade in</div>
  <div data-fx="inview/T:fade--out">Fade out</div>
  <div data-fx="inview/T:fade--in--small">Fade in small</div>
  <div data-fx="inview/T:fade--out--small">Fade out small</div>
</div>