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 classactive: - when element gets .active classshow: - when element gets .show classhover: - 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 viewportactive/T: - when .active class is applied on parent Trigger elementshow/T: - when .show class is applied on parent Trigger elementhover/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>