React components for ScrollMagic

⚠️ This library is not developed any further right now. Please consider to use GSAP ScrollTrigger instead. I have a helper component in my other library react-gsap: https://bitworking.github.io/react-gsap/src-components-scroll-trigger

react-scrollmagic lets you use the ScrollMagic library in React in a fully declarative way. It abstracts away the direct use of the ScrollMagic classes ScrollMagic.Controller and ScrollMagic.Scene.

From version 2 on the GSAP library in no more included. But react-scrollmagic plays nicely together with react-gsap.

npm install --save react-scrollmagic

import React from 'react';
import { Controller, Scene } from 'react-scrollmagic';

const App = () => (
  <div>
    <Controller>
      <Scene duration={600} pin>
        <div>Sticky Example</div>
      </Scene>
    </Controller>
  </div>
);

Examples live demo:

https://bitworking.github.io/react-scrollmagic/

Examples source:

https://github.com/bitworking/react-scrollmagic/tree/master/example/src/components/ScrollMagicExamples

These React components use https://scrollmagic.io/ internally. So for an in-depth documentation please visits following sites:

https://scrollmagic.io/docs/ScrollMagic.Controller.html
https://scrollmagic.io/docs/ScrollMagic.Scene.html

There are two components available:

Props:

The Scene component only consumes a single child. If you want to animate multiple children then you have to wrap them in a HTML element.

Scene sets the ref for the child component automatically. This only works for HTML tags, Styled Components or React.forwardRef components. If you use stateless or stateful components then you need to set the triggerElement or pin prop or wrap them in a HTML tag. See Components.js for an example.

The Scene component also works with a function as child. The function takes an animation progress (0-1) as first parameter and the event object as second parameter. See ClassToggle.js for an example.

From version 2 on it also works with a react-gsap Tween or Timeline component as direct child. See SectionWipes2.js for an example.

Props:

This project was bootstrapped with:

https://github.com/transitive-bullshit/create-react-library

MIT © bitworking