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 .inviewclass. 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 class
• inview/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}".

<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}".

<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.

<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.

<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.