Built in Viewport based PRO
Trigger one or multiple effects when the element appears in the viewport
Overview
A Viewport trigger launches the effect transition (animation) when element appears in the viewport and gets .inview
class. To add an effect on the single element, use Triggers. If you need to animate multiple effects at once, when the parent element appears in the viewport, use the Parent triggers. You can even combine these both triggers.
Syntax
Trigger syntax is as follows {inview:|inview/T:}{effect}
where:
inview:
- trigger effect when element appears in viewport and gets.inview
classinview/T:
- trigger effect on child elements when parent element appears in the viewport and gets.inview
class
Triggers
To launch the effect on single element when it appears in viewport and gets {.inview}
class, use data-fx="{inview:}{effect}"
.
Click the elements to toggle active class:
<div data-fx="inview:bg-color--danger">Background color</div>
<div data-fx="inview:opacity--50">Opacity</div>
Parent triggers
Trigger multiple effects on child elements when parent element gets {.inview}
class use data-fx="{inview/T:}:{effect}"
.
Click the wrapper to toggle its active class:
<div data-fx-trigger="inview">
<div data-fx="inview/T:bg-color--danger">Background color</div>
<div data-fx="inview/T:opacity--50">Opacity</div>
</div>
Multiple triggers
You are free to combine multiple triggers between, or even with parent triggers in one data-fx
attribute.
Triggers
Use multiple {inview:}
in one data-fx
attribute.
Click the elements to toggle active class:
<div data-fx="inview:push--up inview:shadow--risen">Push & shadow</div>
<div data-fx="inview:shrink--small inview:bg-darken--5">Shrink & darken</div>
Parent triggers
Use multiple {inview/T:}
in one data-fx
attribute.
Click the wrapper to toggle its active class:
<div data-fx-trigger="inview">
<div data-fx="inview/T:push--up inview/T:shadow--risen">Push & shadow</div>
<div data-fx="inview/T:shrink--small inview/T:bg-darken--5">Shrink & darken</div>
</div>
Options
Inview reset
Add inview-reset[true]
into data-fx
to animate the element every time when it becomes visible within viewport.