React Scrollama

React 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:

• 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)
• In Certain Science and Engineering Fields, Sex Diversity Among Graduate Students Is Stagnating. In Others, It’s Getting Worse. (Columbia Daily Spectator)

Demo

Take a look at the demo.

Install

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. -browser support. Check here to see if you need to include the polyfill.

Usage

An example with no frills:

import React, { Component } from 'react';
import { Scrollama, Step } from 'react-scrollama';

class Graphic extends Component {
  state = {
    data: 0,
  };

  onStepEnter = ({ element, data, direction }) => this.setState({ data });

  render() {
    const { data } = this.state;

    return (
      <div>
        <p>data: {data}</p>
        <Scrollama onStepEnter={this.onStepEnter}>
          <Step data={1}>
            <p>step 1</p>
          </Step>
          <Step data={2}>
            <p>step 2</p>
          </Step>
        </Scrollama>
      </div>
    );
  }
}

API

<Scrollama/>

The onStepEnter and onStepExit callbacks receive one argument, an object, with the following properties:

{
  element, // The DOM node of the step that was triggered
  data, // The data supplied to the step
  direction, // 'up' or 'down'
}

The onStepProgress callback receives one argument, an object, with the following properties:

{
  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)
}

<Step/>

Features roadmap

• Preserving order
• viewportAbove and viewportBelow intersection observers

Contributing

All contributions are welcome. To setup the project:

1. Fork and clone the repository.
2. npm install both in the library and the example/.
3. npm start both in the library and the example/.

The docs page will then be served on http://localhost:3000.

To push the example build up to gh-pages, run npm run predeploy and npm run deploy.

Contributors

• jsonkao
• NicholasLYang
• jonesbp
• kennethormandy
• cedricdelpoux

License

MIT