GSAP is an animation engine, not a component library. That is the first thing Google tells you when you search "gsap animation component library", and it is true: GSAP gives you gsap.to(), ScrollTrigger and SplitText, and leaves the hero reveal, the pinned gallery and the page transition to you.
So a small ecosystem of libraries has grown up that sell or give away finished GSAP components. I run one of them (Made for Award), so read this with that in mind. I have tried to be fair, and I link to every site so you can check the current numbers yourself, because prices and counts change.
Here is how the six I know best compare, and who each one is for.
Quick comparison
| Library | What you get | Frameworks | Pricing model | Free tier |
|---|---|---|---|---|
| Annnimate | ~119 UI components: buttons, menus, scroll, sections, shaders | React, Vue, HTML | Subscription (quarterly / yearly) + one-time kits | 16-component starter pack |
| Made With GSAP | ~121 JS effects: scroll, mouse, drag, infinite | Webflow, vanilla JS | Subscription (quarterly / annual) | A few free effects |
| Osmo | Vault of GSAP/Webflow resources and snippets | Webflow, vanilla, some React | Subscription | Some free resources |
| React Bits | Animated React components, part GSAP, part Motion | React | Free, open source | Everything |
| Codrops | Hundreds of demo tutorials, many on GSAP | Vanilla | Free | Everything |
| Made for Award | 40 award-style components: scroll, hero, preloader, slider, page transition, WebGL | React, Next.js | One-time ($22, lifetime) | 8 free components |
Counts are what each site stated in October 2026. Check the links for today's numbers.
1. Annnimate
The most "design system" of the group. Components are organised like a UI kit (Buttons, Menus, Scroll, Sections, Shaders), every component ships in React, Vue and plain HTML, and there is an MCP server so Cursor or Claude Code can pull the real source while it writes code. The studio behind it has built for Coca-Cola and Powerade and the polish shows.
Best for: teams on a subscription budget who want a consistent kit across React and Vue, and who like the AI-editor integration.
Watch out for: it is a subscription, so the components stop coming when you stop paying. Check the licence for client work.
2. Made With GSAP
121 effects and counting, all lightweight JavaScript plus GSAP, with an explicit "no Canvas, no WebGL" rule. The sweet spot is Webflow: effects are packaged so you can paste them into a Webflow project, and the source download covers vanilla sites too.
Best for: Webflow designers and anyone who wants scroll and mouse effects without a build step.
Watch out for: no React or Next.js versions, and no 3D or shader work by design. Subscription pricing.
3. Osmo
Osmo is a resource vault from the people behind a well-known Webflow/GSAP studio: snippets, cloneables, utilities and full sections, with a strong Webflow bias and growing framework support. Less a component library than a toolbox you dip into.
Best for: Webflow-first builders who want the studio's own helpers and patterns.
Watch out for: subscription, and you will still assemble most things yourself.
4. React Bits
Free and open source. A big catalogue of animated React components (text effects, backgrounds, cursors, cards) with a CLI, where some components use GSAP and others use Motion. Quality varies piece to piece, as you would expect from a community project, but for a landing page you can get far at zero cost.
Best for: React developers who want something free today and are happy to adapt.
Watch out for: it is a mix of animation engines, so not everything is "GSAP". Expect to tune timings and clean up for production.
5. Codrops
Not a library, but the original source of most of the effects the libraries sell. Every Codrops demo comes with a tutorial and a GitHub repo, many built on GSAP. The catch is that demos are vanilla and written to teach, not to ship: you port them yourself and you handle cleanup, resize and reduced motion.
Best for: learning how an effect works, and developers who prefer to build their own component from a reference.
Watch out for: licences differ per demo; some assets (fonts, images) are demo-only.
6. Made for Award
This is mine. Made for Award is a GSAP animation component library: 40 production-ready React and Next.js components (scroll animations, hero sections, preloaders, sliders, page transitions and WebGL effects), 8 of them free and the rest unlocked by one $22 lifetime purchase. Every component has a live demo you can open full-screen before you sign in, and the source is TypeScript + Tailwind with props for the content, so a slider takes your slides and a hero takes your headline.
The focus is narrower than Annnimate's: not a UI kit, but the specific award-site pieces (pinned scroll scenes, preloaders, smoke and wave page transitions, three.js heroes) that are the hard part of a portfolio or agency site.
Best for: React and Next.js developers building a portfolio, agency or launch site who want award-style motion without a subscription.
Watch out for: React only, no Vue or Webflow versions, and a smaller catalogue than the subscription libraries.
How to choose
- Webflow: Made With GSAP or Osmo.
- React + Vue in one kit, subscription is fine: Annnimate.
- Zero budget: React Bits, plus Codrops to learn from, plus the free tier of any of the paid ones.
- React or Next.js, pay once: Made for Award.
Whichever you pick, the thing that matters more than the library is the setup underneath it: register ScrollTrigger once, create animations inside useGSAP with a scope, put Lenis on the GSAP ticker, and refresh after fonts and images load. Every library above assumes you have that right, and most "the component is broken" issues are one of those four.
If I missed a library you use, tell me in the comments and I will add it.
Top comments (0)