Easy to make scroll animation with ReactJS
# Use npm
npm install react-scroll-motion
# Use yarn
yarn add react-scroll-motion
PC | Mobile |
---|---|
![]() |
![]() |
import { Animator, ScrollContainer, ScrollPage, batch, Fade, FadeIn, FadeOut, Move, MoveIn, MoveOut, Sticky, StickyIn, StickyOut, Zoom, ZoomIn, ZoomOut } from "react-scroll-motion";
- Support up to 18 version
import dynamic from "next/dynamic";
const Animator = dynamic(
import("react-scroll-motion").then((it) => it.Animator),
{ ssr: false }
);
import { ScrollContainer, ScrollPage, batch, Fade, FadeIn, FadeOut, Move, MoveIn, MoveOut, Sticky, StickyIn, StickyOut, Zoom, ZoomIn, ZoomOut } from "react-scroll-motion";
- Check this out especially if you use NextJS
- Please import
Animator
component withnext/dynamic
like upper code, when using NextJS
"use client";
import { Animator, ScrollContainer, ScrollPage, batch, Fade, FadeIn, FadeOut, Move, MoveIn, MoveOut, Sticky, StickyIn, StickyOut, Zoom, ZoomIn, ZoomOut } from "react-scroll-motion";
- Please add
"use client";
at the top of your file, when using NextJS v13 or higher. - You don't need to use
next/dynamic
anymore - Here's NextJS v14 example code (https://github.com/1000ship/nextjs-14-react-scroll-motion)
const ZoomInScrollOut = batch(StickyIn(), FadeIn(), ZoomIn());
const FadeUp = batch(Fade(), Move(), Sticky());
<ScrollContainer>
<ScrollPage>
<Animator animation={batch(Fade(), Sticky(), MoveOut(0, -200))}>
<span style={{ fontSize: "30px" }}>Let me show you scroll animation π</span>
</Animator>
</ScrollPage>
<ScrollPage>
<Animator animation={ZoomInScrollOut}>
<span style={{ fontSize: "40px" }}>I'm FadeUpScrollOut β¨</span>
</Animator>
</ScrollPage>
<ScrollPage>
<Animator animation={FadeUp}>
<span style={{ fontSize: "40px" }}>I'm FadeUp β
οΈ</span>
</Animator>
</ScrollPage>
<ScrollPage>
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }} >
<span style={{ fontSize: "40px" }}>
<Animator animation={MoveIn(-1000, 0)}>Hello Guys ππ»</Animator>
<Animator animation={MoveIn(1000, 0)}>Nice to meet you ππ»ββοΈ</Animator>
- I'm Dante Chun -
<Animator animation={MoveOut(1000, 0)}>Good bye βπ»</Animator>
<Animator animation={MoveOut(-1000, 0)}>See you π</Animator>
</span>
</div>
</ScrollPage>
<ScrollPage>
<Animator animation={batch(Fade(), Sticky())}>
<span style={{ fontSize: "40px" }}>Done</span>
<br/>
<span style={{ fontSize: "30px" }}>
There's FadeAnimation, MoveAnimation, StickyAnimation, ZoomAnimation
</span>
</Animator>
</ScrollPage>
</ScrollContainer>
Let's make spin animation π
const Spin = (cycle) =>
({
in: {
style: {
// `p` is number (0~1)
// When just before this page appear, `p` will be 0
// When this page filled your screen, `p` will be 1
transform: (p) => `rotate(${p * 360 * cycle}deg)`,
},
},
out: {
style: {
// `p` is number (0~1)
// When this page filled your screen, `p` will be 0
// When just after this page disappear, `p` will be 1
transform: (p) => `rotate(${p * 360 * cycle}deg)`,
},
},
});
import { Animation } from "react-scroll-motion";
const Spin = (cycle: number) =>
({
in: {
style: {
// `p` is number (0~1)
// When just before this page appear, `p` will be 0
// When this page filled your screen, `p` will be 1
transform: (p) => `rotate(${p * 360 * cycle}deg)`,
},
},
out: {
style: {
// `p` is number (0~1)
// When this page filled your screen, `p` will be 0
// When just after this page disappear, `p` will be 1
transform: (p) => `rotate(${p * 360 * cycle}deg)`,
},
},
} as Animation);
<ScrollContainer>
<ScrollPage>
// Your custom animation also can be batched!
<Animator animation={batch(Sticky(), Fade(), Spin(3))}>
<h1 style={{ fontSize: 50 }}>Hello!!!</h1>
</Animator>
</ScrollPage>
<ScrollPage>
...
</ScrollPage>
</ScrollContainer>
π€ Dante Chun
- Website: https://dante.company
- Github: @1000ship
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a βοΈ if this project helped you!
Copyright Β© 2021 Dante Chun.
This project is MIT licensed.