A Nuxt animation library, built on GSAP.
Annnimate is a library of 120 GSAP components you copy into a Nuxt app as plain Vue files. Each one starts its animation in onMounted, which Nuxt only runs in the browser, and cleans up when you leave the page.
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, once per project. No Nuxt module, no config change. - 02.
Copy the files
Pick Vue on a component's page and save its files in
components/. - 03.
Use it in a page
Import it into any page with its CSS. Nuxt renders the markup, the browser runs the animation.
- 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 Nuxt is already handled.
Each card is a bug you would otherwise fix by hand, and what every component already does about it.
Server rendering
Code that reaches for window or the DOM during setup breaks the server render.
Each component starts its animation in onMounted, which Nuxt only runs in the browser.
Page changes
Leave a page and its ScrollTriggers keep measuring a layout that's gone.
Each component reverts its animation when it unmounts.
Plugins
A ScrollTrigger or SplitText call does nothing until the plugin is registered.
Each component imports and registers the plugins it uses.
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 Vue.
Each one ships a Vue file that drops into any Nuxt page. Click one to take a closer look.
Questions, answered.
What Nuxt developers ask before they copy a component.
Motion for Nuxt, without the setup.
120 components in React, Vue and HTML, built the way we build for Coca-Cola and Powerade.
