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: - triggers the effect when element appears in viewport and gets .inview class
• inview-T: - triggers the 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-tor-fx="<inview>:<effect>".

<div data-tor-fx="inview:bg(danger)">Background color</div>
<div data-tor-fx="inview:opacity(50)">Opacity</div>

Parent triggers

Trigger multiple effects on child elements when parent element gets <.inview> class use data-tor-fx="<inview-T>:<effect>".

<div data-tor-fx-trigger="inview">
  <div data-tor-fx="inview-T:bg(danger)">Background color</div>
  <div data-tor-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-tor-fx attribute.

Triggers

Use multiple <inview>: in one data-tor-fx attribute.

<div data-tor-fx="inview:push.up(xs) inview:shadow(risen)">Push & shadow</div>
<div data-tor-fx="inview:scale.to(75) inview:bg-darken(md)">Shrink & darken</div>

Parent triggers

Use multiple <inview-T> in one data-tor-fx attribute.

<div data-tor-fx-trigger="inview">
  <div data-tor-fx="inview-T:push.up(xs) inview-T:shadow(risen)">Push & shadow</div>
  <div data-tor-fx="inview-T:scale.to(75) inview-T:bg-darken(md)">Shrink & darken</div>
</div>

Options

Inview revert

Add inview:revert into data-tor-fx to animate the element every time when it becomes visible within viewport, not just once.