Scrollreveal

About

Each element moves through data-reveal-state and the stylesheet draws the fade and slide, so nothing is written to its inline styles. Elements that come into view together are revealed in order, the stagger apart. data-reveal-class animates with a class instead. Under reduced motion elements are shown at once. While scripts run, the stylesheet hides elements until Scrollreveal mounts, and shows them again if it fails to load; with scripting off it never hides them. Register Scrollreveal on every page that uses the stylesheet, because an element whose component is never registered stays hidden.

Usage

Register the component and the framework loads it the first time a page contains [data-reveal].

import { Parallelogram } from '@parallelogram-js/core';

const app = Parallelogram.create();
app.components.add('[data-reveal]', () => import('@parallelogram-js/core/components/Scrollreveal'));
app.run();

The framework is optional. Scrollreveal.enhanceAll() mounts the component on every matching element by itself, for a page that wants one enhancement rather than a framework:

import Scrollreveal from '@parallelogram-js/core/components/Scrollreveal';

Scrollreveal.enhanceAll();

It takes a selector and the component's options, and returns the instance it mounted them with. What it leaves out is what the framework adds: loading a component only on the pages that use it, mounting again after a page swap, and ordering with dependsOn.

Its styles come from the package stylesheet:

@import '@parallelogram-js/core/styles/reveal.css';