🎞 react-scroll-motion ✨

> Easy to make scroll animation with ReactJS

Install

``sh


Use npm

npm install react-scroll-motion

Use yarn

yarn add react-scroll-motion
`

Preview

| PC | Mobile |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| | |

- View on deployed example

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!!!





...


``

Notes & References

- Simple Docs
- Update Notes

Author

👤 Dante Chun

* Website: https://dante.company
* Github: @1000ship

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2021 Dante Chun.

This project is MIT licensed.