Scrollama

Loads scrollama.js library and provides a simple data-attributes-based API for triggering changes on scroll (animations, etc) via css classes.

Scrollama is normally used for Scrollytelling and animation triggering, but it is no limited to this. It makes use of the IntersectionObserver API in order to avoid scrolljaking and performance issues.

Installation

• Install and enable the module.
• Activate the module by one of these two ways:
  1. Go to the module configuration page and enable it globally. This will load scrollama on all pages, so it could come with a performance penalty if the library is not in use across your site. It is useful for testing, but for production we recommend switching to the second option.
  2. Attach the `"scrollama/scrollama"` library on your code when needed, using one of the many ways available in Drupal

Please note that, for performance reasons, scrollama is disabled by default. It's up to you to choose one of the previous two ways of activation.

How to use

On its core, Scrollama is a library that will only set a scroll point on the viewport and react whenever a given HTML element enters and exits this point. See a working example.

This means is up to you to decide what to do. Scrollama won't animate, enable, disable, reposition or change your HTML. You will.

This module adds a simple data-attributes-based API as a helper to improve and fasten development.

- Add data-scroll-init="my-class" to any HTML element to add .my-class when entering the screen. You can add multiple classes by separating them by at least a space, e.g. data-scroll-init="my-class another-class".
- Optionally, add data-scroll-exit="my-exit-class" to trigger a class on exit and data-scroll-delay="1" to add a delay (expressed in seconds).

Example:

<div data-scroll-init="fade-in" data-scroll-exit="fade-out" data-scroll-delay="2">
  My code...
</div>

This element will fade in when entering scroll point, fade out when exiting and the animation will have a delay of 2 seconds.

CSS animations:

This module ships with a very simple CSS implementation of several common animations. You can use the CSS as it is or as a reference for your implementation.

- `.fade-in` will fade the element from opacity 0 to 1.
- `.fade-out` will do the opposite
- `.slide-in` will move the element on the Y-axis from -200px to 0.
- `.slide-out` will move the element on the Y-axis from 200px to 0.

To enable it, use the module settings or attach manually the library "scrollama/scrollama-css" on your code.

TODOs and upcoming features

• Better library loading, not only CDN
• Extended animation library
• Basic integration with blocks, paragraphs and layouts
• Load scrollama from libraries and allow to choose library/CDN
• (long term) allow the user to define several scroll points via a plugin-like system