A Next.js animation library, built on GSAP.
Annnimate is a library of 120 GSAP components you copy into a Next.js app. Each file starts with "use client" and cleans up when it unmounts, so your pages stay Server Components and nothing leaks between routes.
Try it before you copy it.
Circular Slider, exactly as it runs in the library. Drag it, then change how it moves.
Open the componentCustomize
- Movement
- Duration
- Ease
- Curve
- Autoplay
- Curve on mobile
Available in
Four steps from npm install to a working page.
- 01.
Install GSAP
npm install gsap @gsap/react, once per project. - 02.
Copy the files
Pick React on a component's page and save its two files side by side.
- 03.
Use it in a page
Import it into any page, App Router or Pages Router. The page stays a Server Component.
- 04.
Change a value
Every setting is a prop. Tune it live on the component's page, then copy the values.
What breaks GSAP in Next.js is already handled.
Each card is a bug you would otherwise fix by hand, and what every component already does about it.
Route changes
A ScrollTrigger from the last page keeps firing after you navigate.
Every component kills its timelines and ScrollTriggers when it unmounts.
StrictMode
In development React mounts each component twice, so a hand-written animation runs twice.
Cleanup runs between the two mounts, so you see one animation.
Server Components
A component with hooks can't render inside a Server Component page.
Each file starts with "use client". Import it into any page and the page stays on the server.
Reduced motion
Visitors who turned motion off in their system settings still get the full animation.
Every component checks prefers-reduced-motion and respects it.
120 components, every one in React.
Each one ships a React file that starts with "use client". Click one to take a closer look.
Questions, answered.
What Next.js developers ask before they copy a component.
Motion for Next.js, without the setup.
120 components in React, Vue and HTML, built the way we build for Coca-Cola and Powerade.
