Easy to make scroll animation with ReactJS
npm install react-scroll-motion
> Easy to make scroll animation with ReactJS
``shUse npm
npm install react-scroll-motion
Preview
| PC | Mobile |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
|
|
|
Import components/functions
$3
`jsx
import { Animator, ScrollContainer, ScrollPage, batch, Fade, FadeIn, FadeOut, Move, MoveIn, MoveOut, Sticky, StickyIn, StickyOut, Zoom, ZoomIn, ZoomOut } from "react-scroll-motion";
`- React 18 and 19 are fully supported
$3
`jsx
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 with next/dynamic like upper code, when using NextJS$3
`jsx
"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)Example Code
`jsx
const ZoomInScrollOut = batch(StickyIn(), FadeIn(), ZoomIn());
const FadeUp = batch(Fade(), Move(), Sticky());
Let me show you scroll animation 😀
I'm FadeUpScrollOut ✨
I'm FadeUp ⛅️
Hello Guys 👋🏻
Nice to meet you 🙋🏻♀️
- I'm Dante Chun -
Good bye ✋🏻
See you 💛
Done
There's FadeAnimation, MoveAnimation, StickyAnimation, ZoomAnimation
`Make custom animation
Let's make spin animation 😉

$3
`jsx
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),
},
},
});
`
$3
`tsx
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);
``jsx
// Your custom animation also can be batched!
Hello!!!
...
``👤 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.