react-motion-waypoint
Animating element while scrolling
Last updated 2 years ago by aloisdeniel .
Original npm · Tarball · package.json
$ cnpm install react-motion-waypoint 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.1.3                                ...           latest (2 years ago)

4 Versions

  • 0.1.3                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 3
Dependencies (3)
Dev Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |