react-scrollama

react-scrollama

React Scrollama is a simple interface for scrollytelling largely based off of Russel Goldernbeg's Scrollama library. It uses IntersectionObserver in favor of scroll events.

Installation

React Scrollama can be installed as an npm package:

$ npm install react-scrollama

Basic Usage

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

class Example extends PureComponent {
  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 datum={1}>
            <p>step 1</p>
          </Step>
          <Step datum={2}>
            <p>step 2</p>
          </Step>
        </Scrollama>
      </div>      
    );
  }
}