A React component that makes it easy to create scroll animation in your app.
Available built-in animations: Fade, Move, Sticky, Zoom, etc.
How to use it:
1. Install & import.
# Yarn $ yarn add react-scroll-motion # NPM $ npm i react-scroll-motion
import { Animator, ScrollContainer, ScrollPage, batch, Fade, FadeIn, Move, MoveIn, MoveOut, Sticky, StickyIn, ZoomIn } from "react-scroll-motion";
2. Example app.
const Presenter = () => { const ZoomInScrollOut = batch(StickyIn(), FadeIn(), ZoomIn()); const FadeUp = batch(Fade(), Move(), Sticky()); return ( <ScrollContainer> <ScrollPage page={0}> <Animator animation={batch(Fade(), Sticky(), MoveOut(0, -200))}> <span style={{ fontSize: "3em" }}>Let't me show you scroll animation 😀</span> </Animator> </ScrollPage> <ScrollPage page={1}> <Animator animation={ZoomInScrollOut}> <span style={{ fontSize: "3em" }}>I'm FadeUpScrollOut ✨</span> </Animator> </ScrollPage> <ScrollPage page={2}> <Animator animation={FadeUp}> <span style={{ fontSize: "3em" }}>I'm FadeUp ⛅️</span> </Animator> </ScrollPage> <ScrollPage page={3}> <div style={FlexCenterStyle}> <span style={{ fontSize: "3em" }}> <Animator animation={MoveIn(-1000, 0)}>Hello Guys 👋🏻</Animator> <Animator animation={MoveIn(1000, 0)}>Nice to meet you 🙋🏻♀️</Animator>- I'm Seonghyeok - <Animator animation={MoveOut(1000, 0)}>Good bye ✋🏻</Animator> <Animator animation={MoveOut(-1000, 0)}>See you 💛</Animator> </span> </div> </ScrollPage> <ScrollPage page={4}> <Animator animation={batch(Fade(), Sticky())}> <span style={{ fontSize: "3em" }}>Done</span> <span style={{ fontSize: "3em" }}> There's FadeAnimation, MoveAnimation, StickyAnimation, ZoomAnimation </span> </Animator> </ScrollPage> </ScrollContainer> ); };
Preview:
Download Details:
Author: 1000ship
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/1000ship/react-scroll-motion
License: MIT