Nefarious Pomegranate Magnate

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

    0.1.3 • Public • Published

    react-motion-waypoint

    Animating elements while scrolling with react-motion.

    Install

    > npm install --save react-motion-waypoint

    Quickstart

    The sample below will animate the background from the scroll position :

    • From 0 to 1000 : red background
    • From 1000 to 1300 : background transitioning from red to purple
    • From 1300 to 2300 : purple background
    • From 2300 to 2600 : background transitioning from purple to cyan
    class Basic extends React.Component<{}> {
     
        static waypoints = new Waypoints({ r: 255, g: 0, b: 0}) // red
            .pause(1000)
            .transition(300, { b: 255 }) // purple
            .pause(1000)
            .transition(300, { r: 0, g: 255 }); // cyan
     
        render() {
            return (
                <ScrollingProvider>
                        <WaypointMotion waypoints={Basic.waypoints}>
                            {(style:any) => (
                                <div style={{
                                    height: 4000,
                                    background: `rgb(${style.r},${style.g},${style.b})`
                                }}></div>
                            )}
                        </WaypointMotion>
                </ScrollingProvider>
            );
        }
    }

    Example

    For a more complete example, please look at index.tsx and try it online.

    Build

    > npm run-script build

    Contributions

    Contributions are welcome! If you find a bug please report it and if you want a feature please report it.

    If you want to contribute code please file an issue and create a branch off of the current dev branch and file a pull request.

    License

    MIT © Aloïs

    © Aloïs Deniel

    Keywords

    none

    Install

    npm i react-motion-waypoint

    DownloadsWeekly Downloads

    1

    Version

    0.1.3

    License

    none

    Unpacked Size

    43 kB

    Total Files

    22

    Last publish

    Collaborators

    • aloisdeniel