react-scrollmagic

React components for ScrollMagic

Introduction

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.

Install

npm install --save react-scrollmagic

Usage

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

Documentation

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

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

There are two components available:

Controller

Props:

name	type	optional	default	more info
container	string or object	yes	window
vertical	boolean	yes	true
globalSceneOptions	object	yes	{}	link
loglevel	number	yes	2
refreshInterval	number	yes	100

Scene

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:

name	type	optional	default	more info
duration	number or string	yes	0	Can be changed on-the-fly
offset	number or string	yes	0	Can be changed on-the-fly
triggerElement	string, object or null	yes	child element
triggerHook	number or string	yes	"onCenter"	link (Can be changed on-the-fly)
reverse	boolean	yes	true	Can be changed on-the-fly
loglevel	number	yes	2
indicators	boolean	yes	false	only boolean in contrast to plugin options: link
classToggle	string or string[2]	yes	undefined	link
pin	boolean or string	yes	undefined	link
pinSettings	PinSettings	yes	undefined	See Types and link
enabled	boolean	yes	true	Can be changed on-the-fly

Types

PinSettings

name	type	optional	default
pushFollowers	boolean	yes	true
spacerClass	string	yes	"scrollmagic-pin-spacer"

This project was bootstrapped with:

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

License

MIT © bitworking