Built in Viewport based triggers

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

These elements gets inview class when they become visible in the viewport:

Background color
Opacity
<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>".

Elements in the wrapper gets inview class when the wrapper become visible in the viewport:

Background color
Opacity
<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.

These elements gets inview class when they become visible in the viewport:

Push & shadow
Shrink & darken
<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.

Elements in the wrapper gets inview class when the wrapper become visible in the viewport:

Push & shadow
Shrink & darken
<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.