Built in Opacity
PRO
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-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
<div data-fx="hover:opacity--0">Opacity 0</div>
<div data-fx="hover:opacity--5">Opacity 5</div>
<div data-fx="hover:opacity--10">Opacity 10</div>
<div data-fx="hover:opacity--20">Opacity 20</div>
<div data-fx="hover:opacity--30">Opacity 30</div>
<div data-fx="hover:opacity--40">Opacity 40</div>
<div data-fx="hover:opacity--50">Opacity 50</div>
<div data-fx="hover:opacity--60">Opacity 60</div>
<div data-fx="hover:opacity--70">Opacity 70</div>
<div data-fx="hover:opacity--80">Opacity 80</div>
<div data-fx="hover:opacity--90">Opacity 90</div>
<div data-fx="hover:opacity--100">Opacity 100</div>
Click the elements to toggle .active
class
<div data-fx="active:opacity--0">Opacity 0</div>
<div data-fx="active:opacity--5">Opacity 5</div>
<div data-fx="active:opacity--10">Opacity 10</div>
<div data-fx="active:opacity--20">Opacity 20</div>
<div data-fx="active:opacity--30">Opacity 30</div>
<div data-fx="active:opacity--40">Opacity 40</div>
<div data-fx="active:opacity--50">Opacity 50</div>
<div data-fx="active:opacity--60">Opacity 60</div>
<div data-fx="active:opacity--70">Opacity 70</div>
<div data-fx="active:opacity--80">Opacity 80</div>
<div data-fx="active:opacity--90">Opacity 90</div>
<div data-fx="active:opacity--100">Opacity 100</div>
Scroll into view to toggle .inview
class
<div data-fx="inview:opacity--0">Opacity 0</div>
<div data-fx="inview:opacity--5">Opacity 5</div>
<div data-fx="inview:opacity--10">Opacity 10</div>
<div data-fx="inview:opacity--20">Opacity 20</div>
<div data-fx="inview:opacity--30">Opacity 30</div>
<div data-fx="inview:opacity--40">Opacity 40</div>
<div data-fx="inview:opacity--50">Opacity 50</div>
<div data-fx="inview:opacity--60">Opacity 60</div>
<div data-fx="inview:opacity--70">Opacity 70</div>
<div data-fx="inview:opacity--80">Opacity 80</div>
<div data-fx="inview:opacity--90">Opacity 90</div>
<div data-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-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}: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
<div data-fx-trigger="hover">
<div data-fx="hover/T:opacity--0">Opacity 0</div>
<div data-fx="hover/T:opacity--5">Opacity 5</div>
<div data-fx="hover/T:opacity--10">Opacity 10</div>
<div data-fx="hover/T:opacity--20">Opacity 20</div>
<div data-fx="hover/T:opacity--30">Opacity 30</div>
<div data-fx="hover/T:opacity--40">Opacity 40</div>
<div data-fx="hover/T:opacity--50">Opacity 50</div>
<div data-fx="hover/T:opacity--60">Opacity 60</div>
<div data-fx="hover/T:opacity--70">Opacity 70</div>
<div data-fx="hover/T:opacity--80">Opacity 80</div>
<div data-fx="hover/T:opacity--90">Opacity 90</div>
<div data-fx="hover/T:opacity--100">Opacity 100</div>
</div>
Click the wrapper to toggle .active
class:
<div data-fx-trigger="active">
<div data-fx="active/T:opacity--0">Opacity 0</div>
<div data-fx="active/T:opacity--5">Opacity 5</div>
<div data-fx="active/T:opacity--10">Opacity 10</div>
<div data-fx="active/T:opacity--20">Opacity 20</div>
<div data-fx="active/T:opacity--30">Opacity 30</div>
<div data-fx="active/T:opacity--40">Opacity 40</div>
<div data-fx="active/T:opacity--50">Opacity 50</div>
<div data-fx="active/T:opacity--60">Opacity 60</div>
<div data-fx="active/T:opacity--70">Opacity 70</div>
<div data-fx="active/T:opacity--80">Opacity 80</div>
<div data-fx="active/T:opacity--90">Opacity 90</div>
<div data-fx="active/T:opacity--100">Opacity 100</div>
</div>
Scroll into view to toggle .inview
class on parent
<div data-fx-trigger="inview">
<div data-fx="inview/T:opacity--0">Opacity 0</div>
<div data-fx="inview/T:opacity--5">Opacity 5</div>
<div data-fx="inview/T:opacity--10">Opacity 10</div>
<div data-fx="inview/T:opacity--20">Opacity 20</div>
<div data-fx="inview/T:opacity--30">Opacity 30</div>
<div data-fx="inview/T:opacity--40">Opacity 40</div>
<div data-fx="inview/T:opacity--50">Opacity 50</div>
<div data-fx="inview/T:opacity--60">Opacity 60</div>
<div data-fx="inview/T:opacity--70">Opacity 70</div>
<div data-fx="inview/T:opacity--80">Opacity 80</div>
<div data-fx="inview/T:opacity--90">Opacity 90</div>
<div data-fx="inview/T:opacity--100">Opacity 100</div>
</div>