A lightweight scrollytelling interface for React using the IntersectionObserver.
npm install @theonesean/react-scrollamaReact Scrollama is a lightweight interface for scrollytelling that uses IntersectionObserver in favor of scroll events. It is adapted from Russel Goldenbeg's Scrollama.
As seen in:
- Sex Diversity Among Graduate Students Is Stagnating (Columbia Daily Spectator)
- The scramble to secure America’s voting machines (POLITICO)
- Lower-income undergraduate students are paying more and more to attend Columbia; wealthier students are paying less and less, federal data shows (Columbia Daily Spectator)
Take a look at the live demo, presented at ReactNYC.
| Basic step triggers | Sticky graphic on the side |
|---|---|
![]() | ![]() |
React Scrollama can be installed as an npm package:
```
$ npm install react-scrollama
Note: As of version 2.2.0, the IntersectionObserver polyfill has been removed from the build. You must include it yourself for cross-browser support. Check here to see if you need to include the polyfill.
A Scrollama component wraps a set of steps. Each Step component must wrap a DOM element.
`jsx`
...
...
provides an interface for listening in on scroll triggers like entering or exiting a step. (Here's a full list of available props.)
A no-frills example:
`jsx
import React, { useState } from 'react';
import { Scrollama, Step } from 'react-scrollama';
const ScrollamaDemo = () => {
const [currentStepIndex, setCurrentStepIndex] = useState(null);
// This callback fires when a Step hits the offset threshold. It receives the
// data prop of the step, which in this demo stores the index of the step.
const onStepEnter = ({ data }) => {
setCurrentStepIndex(data);
};
return (
export default ScrollamaDemo;
`
React Scrollama components do not render into the DOM. They are meant to set up Intersection Observers on the elements inside the These are the props you can set on the | Prop | Type | Default | Description | The The To create a fixed graphic with text scrolling beside/over it, use A These are the props you can set on the | Prop | Type | Default | Description | You will also probably want to set a * Being able to use pixels instead of percent for offset value so stuff on mobile doesn't jump around on scroll direction change * jsonkao MIT components. In the code above, only the elements would show up in the DOM.Scrollama$3
component itself:number
|----------------|---------------------------|---------|-----------------------------------------------------------------------------------------|
| offset | (from 0 to 1) | 0.3 | How far from the top of the viewport to trigger a step (as a proportion of view height) |boolean
| progress | | false | Whether to fire incremental step progress updates |number
| threshold | (greater than 1) | 4 | Granularity of the progress interval in pixels (smaller = more granular) |function
| onStepEnter | | | Callback that fires when the top or bottom edge of a step enters the offset threshold. |function
| onStepExit | | | Callback that fires when the top or bottom edge of a step exits the offset threshold. |function
| onStepProgress | | | Callback that fires the progress a step has made through the threshold. |boolean
| debug | | false | Whether to show visual debugging tools. |onStepEnter and onStepExit callbacks receive one argument, an object, with the following properties:`js`
{
element, // The DOM node of the step that was triggered
data, // The data supplied to the step
direction, // 'up' or 'down'
}onStepProgress callback receives one argument, an object, with the following properties:`js`
{
element, // The DOM node of the step that was triggered
data, // The data supplied to the step
progress, // The percent of completion of the step (0 to 1)
}position: sticky;. How to use position sticky.Step$3
element can contain one child, which must be a DOM element. To use a React component as the child node, it must be wrapped with a DOM element like .Step component:
|------|------|---------|------------------------------------------------------------------|
| data | any | | Data to be given to callbacks when step triggered. |key prop on each Step if you're transforming an array of data into a list of Step` elements (see Lists and Keys).Features roadmap
* Currently, there is no way to throttle/customize React Scrollama's resize listener 😢. We're working on this in #44.
* Fire previous step triggers if they were jumpedContributors
* NicholasLYang
* jonesbp
* kennethormandy
* cedricdelpoux
* davidnmora
* jefffriesen
* paolocorti
* elbertwang3
* michaelgrotton
* jjrchrds
* maerzhase
* goleary
* danieleguido
* LaneLicense