| 
|
- [View on deployed example](https://1000ship.github.io/react-scroll-motion/)
## Import components/functions
### ReactJS
```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
### NextJS v12 or lower
```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
### NextJS v13 or higher
```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());
### Javascript
```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)`,
},
},
});
```
### Typescript
```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