Built in Opacity

Animate the element's opacity change

Overview

Change the element opacity using <trigger>:opacity(<value>). This is similar to Fade effect, but the opacity()* works together with the .opacity-* class. That means you can set the initial opacity using .opacity-* class and change it when the trigger has performed.

Triggers

To animate the opacity when <trigger> is performed on a single element, use data-tor-fx="<trigger>:opacity(<value>) 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 <value> is one of 0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

opacity(0)
opacity(5)
opacity(10)
opacity(20)
opacity(30)
opacity(40)
opacity(50)
opacity(60)
opacity(70)
opacity(80)
opacity(90)
opacity(100)
<div data-tor-fx="hover:opacity(0)">opacity(0)</div>
<div data-tor-fx="hover:opacity(5)">opacity(5)</div>
<div data-tor-fx="hover:opacity(10)">opacity(10)</div>
<div data-tor-fx="hover:opacity(20)">opacity(20)</div>
<div data-tor-fx="hover:opacity(30)">opacity(30)</div>
<div data-tor-fx="hover:opacity(40)">opacity(40)</div>
<div data-tor-fx="hover:opacity(50)">opacity(50)</div>
<div data-tor-fx="hover:opacity(60)">opacity(60)</div>
<div data-tor-fx="hover:opacity(70)">opacity(70)</div>
<div data-tor-fx="hover:opacity(80)">opacity(80)</div>
<div data-tor-fx="hover:opacity(90)">opacity(90)</div>
<div data-tor-fx="hover:opacity(100)">opacity(100)</div>
opacity(0)
opacity(5)
opacity(10)
opacity(20)
opacity(30)
opacity(40)
opacity(50)
opacity(60)
opacity(70)
opacity(80)
opacity(90)
opacity(100)
<div data-tor-fx="active:opacity(0)">opacity(0)</div>
<div data-tor-fx="active:opacity(5)">opacity(5)</div>
<div data-tor-fx="active:opacity(10)">opacity(10)</div>
<div data-tor-fx="active:opacity(20)">opacity(20)</div>
<div data-tor-fx="active:opacity(30)">opacity(30)</div>
<div data-tor-fx="active:opacity(40)">opacity(40)</div>
<div data-tor-fx="active:opacity(50)">opacity(50)</div>
<div data-tor-fx="active:opacity(60)">opacity(60)</div>
<div data-tor-fx="active:opacity(70)">opacity(70)</div>
<div data-tor-fx="active:opacity(80)">opacity(80)</div>
<div data-tor-fx="active:opacity(90)">opacity(90)</div>
<div data-tor-fx="active:opacity(100)">opacity(100)</div>
opacity(0)
opacity(5)
opacity(10)
opacity(20)
opacity(30)
opacity(40)
opacity(50)
opacity(60)
opacity(70)
opacity(80)
opacity(90)
opacity(100)
<div data-tor-fx="inview:opacity(0)">opacity(0)</div>
<div data-tor-fx="inview:opacity(5)">opacity(5)</div>
<div data-tor-fx="inview:opacity(10)">opacity(10)</div>
<div data-tor-fx="inview:opacity(20)">opacity(20)</div>
<div data-tor-fx="inview:opacity(30)">opacity(30)</div>
<div data-tor-fx="inview:opacity(40)">opacity(40)</div>
<div data-tor-fx="inview:opacity(50)">opacity(50)</div>
<div data-tor-fx="inview:opacity(60)">opacity(60)</div>
<div data-tor-fx="inview:opacity(70)">opacity(70)</div>
<div data-tor-fx="inview:opacity(80)">opacity(80)</div>
<div data-tor-fx="inview:opacity(90)">opacity(90)</div>
<div data-tor-fx="inview:opacity(100)">opacity(100)</div>

Parent triggers

To animate the opacity 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>:opacity(<value>) 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 <value> is one of 0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

opacity(0)
opacity(5)
opacity(10)
opacity(20)
opacity(30)
opacity(40)
opacity(50)
opacity(60)
opacity(70)
opacity(80)
opacity(90)
opacity(100)
<div data-tor-fx="hover-T:opacity(0)">opacity(0)</div>
<div data-tor-fx="hover-T:opacity(5)">opacity(5)</div>
<div data-tor-fx="hover-T:opacity(10)">opacity(10)</div>
<div data-tor-fx="hover-T:opacity(20)">opacity(20)</div>
<div data-tor-fx="hover-T:opacity(30)">opacity(30)</div>
<div data-tor-fx="hover-T:opacity(40)">opacity(40)</div>
<div data-tor-fx="hover-T:opacity(50)">opacity(50)</div>
<div data-tor-fx="hover-T:opacity(60)">opacity(60)</div>
<div data-tor-fx="hover-T:opacity(70)">opacity(70)</div>
<div data-tor-fx="hover-T:opacity(80)">opacity(80)</div>
<div data-tor-fx="hover-T:opacity(90)">opacity(90)</div>
<div data-tor-fx="hover-T:opacity(100)">opacity(100)</div>
opacity(0)
opacity(5)
opacity(10)
opacity(20)
opacity(30)
opacity(40)
opacity(50)
opacity(60)
opacity(70)
opacity(80)
opacity(90)
opacity(100)
<div data-tor-fx="active-T:opacity(0)">opacity(0)</div>
<div data-tor-fx="active-T:opacity(5)">opacity(5)</div>
<div data-tor-fx="active-T:opacity(10)">opacity(10)</div>
<div data-tor-fx="active-T:opacity(20)">opacity(20)</div>
<div data-tor-fx="active-T:opacity(30)">opacity(30)</div>
<div data-tor-fx="active-T:opacity(40)">opacity(40)</div>
<div data-tor-fx="active-T:opacity(50)">opacity(50)</div>
<div data-tor-fx="active-T:opacity(60)">opacity(60)</div>
<div data-tor-fx="active-T:opacity(70)">opacity(70)</div>
<div data-tor-fx="active-T:opacity(80)">opacity(80)</div>
<div data-tor-fx="active-T:opacity(90)">opacity(90)</div>
<div data-tor-fx="active-T:opacity(100)">opacity(100)</div>
opacity(0)
opacity(5)
opacity(10)
opacity(20)
opacity(30)
opacity(40)
opacity(50)
opacity(60)
opacity(70)
opacity(80)
opacity(90)
opacity(100)
<div data-tor-fx="inview-T:opacity(0)">opacity(0)</div>
<div data-tor-fx="inview-T:opacity(5)">opacity(5)</div>
<div data-tor-fx="inview-T:opacity(10)">opacity(10)</div>
<div data-tor-fx="inview-T:opacity(20)">opacity(20)</div>
<div data-tor-fx="inview-T:opacity(30)">opacity(30)</div>
<div data-tor-fx="inview-T:opacity(40)">opacity(40)</div>
<div data-tor-fx="inview-T:opacity(50)">opacity(50)</div>
<div data-tor-fx="inview-T:opacity(60)">opacity(60)</div>
<div data-tor-fx="inview-T:opacity(70)">opacity(70)</div>
<div data-tor-fx="inview-T:opacity(80)">opacity(80)</div>
<div data-tor-fx="inview-T:opacity(90)">opacity(90)</div>
<div data-tor-fx="inview-T:opacity(100)">opacity(100)</div>

Combinations

Initial opacity value

You can set the initial opacity value using opacity-* class.

Gentle fade in
<div class="btn btn-primary opacity-50" data-tor-fx="!hover:opacity(100)">Gentle fade in</div>