Installation.

Annnimate components are built on GSAP. Install GSAP, then copy any component. That's the whole setup.

GSAP is free, including every plugin.

As of 2026 the full GSAP toolset - ScrollTrigger, SplitText, MorphSVG, all of it - is free with a single install. You don't need a Club GreenSock membership, and there are no separate plugin packages.

React

React and Next.js

Install GSAP and the official React helper, then register the plugins a component uses.

Terminal

component.jsx

Plugins are sub-imports of gsap, not separate npm packages. Import them as gsap/ScrollTrigger and register before use.

Vue

Vue and Nuxt

Install GSAP, then drive it from the component lifecycle inside <script setup>. A gsap.context scopes selectors to the component root and reverts every tween on unmount.

Terminal

Component.vue

HTML

HTML and vanilla JS

Load GSAP and the plugins you need before the closing </body> tag, then your animation script last. Core must load before any plugin.

index.html

Don't hardcode a version you'll forget to bump.

The URLs above track the current GSAP release. If you need to pin a version for a production build, copy the exact tag from the GSAP install page rather than from a doc that can go stale.

NextQuick startCopy your first component end to end.NextCustomizing a componentTune timing, easing, and triggers with attributes.