react-scrollmagic
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    react-scrollmagic

    React components for ScrollMagic

    NPM

    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
    progressEvents boolean yes true Ability to silence progress events reducing redraws

    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

    Keywords

    none

    Install

    npm i react-scrollmagic

    DownloadsWeekly Downloads

    4,829

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    722 kB

    Total Files

    7

    Last publish

    Collaborators

    • jan.fischer.bitworking