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(p)>:<effect> where:

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

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

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

On parent element

Trigger multiple effects on child elements when parent element gets .inview class use data-tor="inview(p|<selector>):<effect>".

All elements must be children of the parent element.

Using data-tor-parent

Add data-tor-parent="inview" to the parent wrapper element, then use inview(p):<effect> to trigger multiple effect when the parent element becomes visible in the viewport and gets .inview class.

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

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

Custom parent selector

It’s also possible to trigger multiple effects without data-tor-parent element. Just use inview(<selector>):<effect> and target your desired element.

This example shows how to create multiple effects when the parent #wrapper selector is in viewport.

Scale
Opacity
Push up
<div id="wrapper">
  <div data-tor="inview(#wrapper):scale.to(75%)">Scale</div>
  <div data-tor="inview(#wrapper):opacity(50%)">Opacity</div>
  <div data-tor="inview(#wrapper):push.up(xs)">Push up</div>
</div>

Multiple triggers

You are free to combine multiple triggers between, or even with parent triggers in one data-tor attribute.

Triggers

Use multiple inview: in one data-tor attribute.

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

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

Parent triggers

Use multiple <inview(p)> in one data-tor attribute.

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

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

Options

Inview revert

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