Certain modules support scroll-triggered animations. These allow you to animate an element or elements within the module when the module scrolls into view. You could use this to show a callout, draw attention to a button or link by wiggling it, start a video, trigger a “ping” animation, or many other effects.

Scroll-triggered animations can be added to elements in the CMS. There are two ways of adding animations: a simple mode for when you need to animate a single element, and an advanced mode that allows you to paste in animations in a JSON descriptor format to animate multiple elements, or trigger several animations in sequence.

Simple Mode

Scroll Effects are handled in the NHW/modules/scrollEffects TypeScript module. The library used to detect elements entering and exiting the viewport is Scrollama: https://github.com/russellgoldenberg/scrollama

Scrollama watches elements with a certain class (currently .step, but this is subject to change or be added to) and triggers events when they enter or leave the viewport. The step class should be baked into the template for modules that support scroll-triggered events (usually on the outermost container element).

The .step element should also specify several data-attributes that can be used to register events:

Field Name	Data Type	Notes
data-scroll-enter	String or JSON-encoded object Ex: data-scroll-enter="applyClass"	In simple mode, this is an action to trigger when the element enters the viewport. See below for possible values. In advanced mode, this is a block of JSON that describes a series of events to happen when the element enters. See Advanced Mode.
data-scroll-exit	String or JSON-encoded object Ex: data-scroll-exit="removeClass"	In simple mode, this is an action to trigger when the element exits the viewport. See below for possible values. In advanced mode, this is a block of JSON that describes a series of events to happen when the element exits. See Advanced Mode. In simple mode, the user can’t control this attribute directly. If the “Reverse Animation on Exit?” checkbox is checked, the reverse of the entrance action should be applied (see below for reverse actions).
data-target	String Ex: data-target=".my-button"	The element you want to animate is probably not the container element that has .step on it. This string allows you to specify the CSS selector of a child element to operate on.
data-scroll-class	String Ex: data-scroll-class="state-visible"	This value is used with the applyClass and removeClass actions. It specifies the CSS class to be added or removed.
data-delay	Number Ex: data-delay="1.5"	A number in seconds or fractional seconds that specifies how long this action should delay before applying. If not specified, defaults to 0.

Possible Actions

All of these actions are defined in NHW/modules/scrollEffects.ts.

Action	CMS Trigger	Reverse Action	Notes
applyClass	Add Class	removeClass
removeClass	Remove Class	applyClass
playVideo	Play Video	pauseVideo	Must target an HTML5 video
pauseVideo	(none)	playVideo	Must target an HTML5 video
(n/a)	Custom	(n/a)	Selecting this value in the CMS should hide these fields: Triggered Animation Target Triggered Animation Class Triggered Animation Delay Reverse Animation on Exit? And show these fields: Custom Entrance Animation Custom Exit Animation

Advanced Mode

A limitation of simple mode is that you can only trigger a single animation. If you want to trigger multiple animations, you can do so by selecting “Custom” as the value of the Trigger Entrance Animation dropdown and entering JSON data info the field.

Advanced animations take the form of an array of JavaScript/JSON objects. Each object in the array defines a single animation with its own action, target, and delay:

Example Advanced Animation

[{
	"action": "applyClass",
	"target": ".rating__star",
	"class": "slide-in-blurred-bottom",
	"delay": 0
}, {
	"action": "removeClass",
	"target": ".rating__stars",
	"class": "state-hidden",
	"delay": 0.1
}]

The actions are the same list of possible actions as shown above for Simple Mode. The parameters for target, class, and delay are the same as noted above as well.

Please note that if you’re using advanced mode, animations will not auto-reverse when the element scrolls out of view. If you want to reset an animation to its original state when it leaves the screen, you will need to manually add the reverse animation or action to the “Custom Exit Animation” field.