guides / 5 migrationsreact · next.js
Migration guides
Already on AOS, ScrollReveal or vivus? Each of those guides moves one onto its drop-in in React or Next.js — the same API and markup, maintained, MIT, with hooks that clean up after themselves. Coming from GSAP ScrollTrigger? That guide maps each call to its svg-scroll-draw equivalent, and says plainly what has none.
- GSAP stack
- 47.5 → 11.6 KB
- AOS
- 6.7 → 3.2 KB
- ScrollReveal.js
- 5.6 → 4.7 KB
- vivus
- 4.1 → 4.2 KB
01AOS in Next.js App Router: Setup That Cleans UpAOS · Next.js — Use 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.02AOS in React: A StrictMode-Safe useAOS HookAOS · React — Animate on scroll in React with your existing AOS markup: useAOS() starts AOS, cleans up on unmount and survives StrictMode. Drop-in, no aos.css.03ScrollReveal in React and Next.js (MIT, With Hooks)ScrollReveal · React — Use ScrollReveal in React and Next.js with useScrollReveal(): reveals components when they mount, cleans up on unmount, same options. MIT, not GPL.04vivus in React: SVG Line Drawing With useVivusvivus · React — Animate 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.05Migrating From GSAP ScrollTrigger and DrawSVG in ReactGSAP ScrollTrigger · React — Map GSAP ScrollTrigger and DrawSVG code to svg-scroll-draw, option by option: scrub, pin, timelines, callbacks and React — and what has no equivalent.