guide / aos in react3 steps

AOS in React, without the useEffect.

The usual React setup for AOS is a useEffect that calls AOS.init() once. svg-scroll-draw/aos keeps the AOS API and every data-aos attribute, and its React entry gives you a hook that also stops AOS when the component goes away.

Try it on StackBlitz ↗AOS vs svg-scroll-draw

importaossvg-scroll-draw/aos

version2.3.4 · 20222.23.3 · maintained

licenceMIT=MIT

gzip6.7 KB3.2 KB

in ReactYour own effectuseAOS · <AOSInit />

Fig. 1 — what changes, measured

01The problem

What goes wrong with the usual setup

1AOS 2.3.4 cannot be stopped: there is no destroy(), and each init() adds listeners and a MutationObserver that are never removed.
2Under StrictMode, development runs every effect twice, so a plain init effect starts AOS twice.
3aos.css has to be imported separately, usually in main.jsx.

023 steps

The switch, step by step

1
Step 01 · terminal
Switch the package — one command
Rewrites the import, removes the aos.css import and swaps the dependency. --dry-run shows the changes first.
terminal3 lines
```
npx svg-scroll-draw migrate --dry-run
npx svg-scroll-draw migrate
npm install
```

Step 02 · App.jsx

Replace the effect with useAOS

Call it once, near the root. Options are the AOS options you already pass to init().

App.jsx11 lines

import { useAOS } from 'svg-scroll-draw/aos/react';

export default function App() {
  useAOS({ once: true, duration: 700 });
  return (
    <main>
      <h1 data-aos="fade-up">Hello</h1>
      <p data-aos="fade-up" data-aos-delay="150">Same markup as before.</p>
    </main>
  );
}

3
Step 03 · Layout.jsx
With a router
Pass something that changes on navigation as the second argument and trigger positions are re-measured when it does. Elements added by the new route are picked up either way.
Layout.jsx7 lines
```
import { useLocation } from 'react-router-dom';
import { useAOS } from 'svg-scroll-draw/aos/react';

function Layout({ children }) {
  useAOS({ once: true }, useLocation().pathname);
  return children;
}
```

03unchanged

What stays exactly the same

Your data-aos attributes, including offsets, delays, durations, easings and anchor placements.
AOS.init / refresh / refreshHard, if you still call them directly — import AOS from svg-scroll-draw/aos.
The look: the drop-in reproduces aos.css 2.3.4 rule for rule.

04questions

Questions

Can I keep calling AOS.init() myself?

Yes. import AOS from 'svg-scroll-draw/aos' behaves like AOS, plus AOS.destroy() for cleanup. The hook is just that lifecycle done for you.

How big is it?

The React entry is about 3.1 KB gzipped including the AOS drop-in and its styles. AOS 2.3.4 is 6.7 KB with aos.css.

Does it support TypeScript?

Yes — the options, the hook and AOSInit are typed.

05More guides

More migration guides

01AOS in Next.jsUse AOS animate-on-scroll in the Next.js App Router: one <AOSInit /> in your layout, StrictMode-safe, keeps every data-aos attribute. No aos.css.03ScrollReveal in ReactUse ScrollReveal in React and Next.js with useScrollReveal(): reveals components when they mount, cleans up on unmount, same options. MIT, not GPL.04vivus in ReactAnimate SVG strokes with vivus in React: useVivus() creates the instance on your <svg>, cleans up on unmount and returns it for play(). Same vivus API.05GSAP ScrollTrigger in ReactMap GSAP ScrollTrigger and DrawSVG code to svg-scroll-draw, option by option: scrub, pin, timelines, callbacks and React — and what has no equivalent.