How to set up a scroll trigger interaction

Overview

A Scroll Triggered interaction is one that occurs as you scroll up and down your site. The interaction allows you to customize both the Into View and Out of View states, adding customized effects to each. The ability to choose an Offset also allows you the ability to choose where on the screen the scroll will trigger the animation to occur.

Into View and Out of View

When working with scroll triggers, you are given the ability to add effects both when your object comes Into View, and when the object goes Out of View. In order to correlate where the trigger takes place, you need to add an Offsets for the top and/or bottom.

Into View

The Into View property allows you to add an effect (or list of effects) when the object comes into view as your are scrolling down the page. Think of it as the initial effect for the element you are adding a scroll interaction to.

Out of View

The Out of View property is where you will add effects to the element as they scroll out of view (i.e. when the user has passed them as they scroll down the page). For this reason it is beneificial to work from an offset off the top. 

Offsets

Bottom Offset

For Into View, you select a Bottom Offset, meaning the percentage value off the bottom of the page you want your object to perform its scroll interaction.

Top Offset

For Out of View, you select a Top Offset, which is the percentage value off the top you want the object to perform its effect. Once the user has scrolled past the object entirely, the offset percentage used here will also be the defaulted Out of View offset value for when the user scrolls back up the page.

Disabled on Mobile (iOS only)

You may have noticed that our scroll triggers do not work on certain mobile devices. This is a limitation specific to iOS (iPhone, iPad, iPod). Even on the latest devices, Apple does not give developers the power to run scripts while the browser is being scrolled.

Once Apple opens this up to developers, we will be happy to enable scroll triggers again!

For more information on this, please refer to the Apple developer library.