58 matchingAllSearchK
Step 1
Find your favorite component
Browse the library by category or search by name. Every component runs live, so you see exactly how it behaves before you commit.
Ship award-grade motion
in minutes, not days.
58 components, each one built to the standard we ship for real brands. Copy it into React, Vue, or HTML, change a few values, and skip the days of GSAP work.
Built by the studio that ships motion for global brands.
- Coca-Cola
- BodyArmor
- WKNDHRS
- Powerade
- Good Fella
Animations
9 components
Studio Original
Updated
Gooey Hover Reveal
shader
Studio Original
New
Drift Gallery
section
Studio Original
Updated
Mesh Gradient
shader
Studio Original
Multi Flip
scroll
Studio Original
Updated
Circular Slider
ui-component
Studio Original
Mega Menu
menu
Studio Original
Dual Scramble
ui-component
Studio Original
New
Radial Gallery
ui-component
Studio Original
New
Testimonial Globe
section
Just shipped58 components
Award-winning animations, in minutes.
Find it, copy it, ship it.
import { useGSAP } from "@gsap/react"
import gsap from "gsap"
function Box() {
const box = useRef(null)
useGSAP(() => {
gsap.to(box.current, {
x: 200,
duration: 1,
ease: "expo.out",
})
})
return <div ref={box} className="box" />
}
Step 2
Copy it in your format
One click copies production-ready code, or pull it straight into your editor over MCP. React with useGSAP, Vue with the composable, or vanilla HTML. Typed, documented, reduced-motion aware.
yoursite.com
Step 3
Ship it your way
Paste it into Next.js, Webflow, wherever modern JS runs. Adjust with data attributes or props. No wrestling with the GSAP lifecycle.
Two ways to use it.
A library of signature components you reach for on every project, and Landmark Kits, deep motion systems you buy once and own.
The Library
58 components / ship weeklyEvery named signature component, each one production-grade and documented. Subscribe and use the whole catalog across every project you build. New components ship regularly.
Landmark Kits
First Kit / out nowA deep, stand-alone collection - not a single component, not part of the Library. The first Kit is Reveal: preloaders and hero sections as one system, WebGL and GSAP variants you mix. React, Vue, HTML / CSS / JS. Not for Webflow.
One component, told properly.
Circular Slider, a draggable carousel that rides a giant arc. The kind of thing you would spend a day getting right, built the same way every one of the 50+ ships.
Snap feel
0.9s
<div data-anm-circular-slider
data-anm-circular-slider-type="snap"
data-anm-duration="0.9"
data-anm-ease="back.out(1.4)">
<img class="circular_slider_image" src="card-1.jpg" alt="" />
<!-- ...more cards... -->
</div>Built for developers who care how it moves.
Animation that moves the way it should, with real code and real refs and no bloat, built the way you would if you had the time.
Annnimate is for you if:
- You build in React, Vue or in code.
- You already use GSAP, or you want a reason to.
- You care about motion that feels considered, not decorative.
- You ship client work or your own projects and want a head start that does not lower the bar.
Annnimate is probably not for you if:
- You build mainly in Webflow or Framer.
- You want a large catalog of generic UI components.
- You expect a free tier - Annnimate is paid only.
- You are new to animation and want to learn the basics first. Start with the GSAP docs, they are free and excellent.
In the process of creating a digital first studio, assets like Annnimate are essential for providing that interactive edge on our products. Julian has created a tool that really helps us in the creative iteration process and saves us quite a bit of time.
Lukas HaentjensCo-founder, Three Sixty One
Annnimate makes it easier to work with animations without overcomplicating the setup. The library is broad, the tool is well built, and the animations are smooth and well crafted. I especially like the React integration, it fits naturally into how I usually build things.
Edoardo LunardiAward-winning Senior Frontend Developer
I'm a lifetime user of Annnimate. It's really good - clean documentation, code is nice and light, and the animations it gives me are world class. Similar services are 2-3 times the cost and don't offer the level of polish that Annnimate does.
Matthew StoboLifetime Member
Try three components, free.
Three production components in React, Vue and HTML, built to the same standard we ship for real brands. In your inbox now. No card, no catch.
Simple pricing.
Solo starts at €29 a month, Studio adds five seats, Studio+ fifteen. Pay yearly to save. Landmark Kits are a one-time purchase. No lifetime tiers, no per-feature add-ons, no surprises.
Switch to Yearly Pricing
Solo
€/month
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
For one developer working solo or on freelance work.
- All 58 signature components
- React, Vue and HTML
- MCP server for Cursor and Claude Code
- New components as they ship
- Documentation and support
Studio
€/month
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
For a small studio or team shipping client work.
- 5 seats, one subscription
- Everything in Solo, for every seat
- MCP server for the whole team
- Priority support
Studio+
€/month
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
For a larger team shipping a lot of client work.
- 15 seats, one subscription
- Everything in Studio, for every seat
- Priority support
The Reveal Kit.
One-timeThirteen preloader and hero-reveal components, built as one system. Pair any cover with any hero, in WebGL or GSAP. React, Vue, plain JS. One purchase, yours forever.
Questions and answers.
Everything worth knowing before buying. Full list lives on the FAQ page.
Annnimate is a GSAP motion component library for React and Vue, built by Good Fella. Every component is built to the standard we ship for real brands. Some shipped on those brand sites, the rest are Good Fella originals held to the same bar. Either way you are not copying an experiment, you are copying motion built to ship.
Annnimate is built on GSAP, not Framer Motion. Aceternity and Magic UI are great for Framer Motion landing-page UI. Annnimate is production code you can ship to a client on Monday, on the engine that runs award-level work — the GSAP option for developers who notice.
Yes. Annnimate's React components are Server Component safe and work with the Next.js App Router. The Vue components are Nuxt ready. Each one uses useGSAP in React or a composable in Vue, so the GSAP context cleans up on unmount without extra plumbing from you.
Yes. Annnimate runs on GSAP, which is free for any project including every plugin. Install it with one npm install gsap. The docs walk you through the setup for React, Vue, and HTML.
Yes. Every Annnimate component respects prefers-reduced-motion and falls back to a calm, usable state. Interactive components handle keyboard focus and ARIA. The docs spell out what each one does when motion is reduced.
There is a free Starter Pack: three production components, delivered to your inbox, free to use in any project with no expiration. Every component's live preview is also free to explore, no account needed. The full code library is paid only.
Annnimate no longer offers a lifetime plan. The Library is a yearly subscription, so the catalog keeps growing and the components keep getting maintained. Developers who bought Lifetime before the 2026 relaunch keep their access. See the What's New page for the migration detail.
Annnimate ships new signature components regularly, included in any active Library subscription at no extra cost. The changelog lists every component as it lands, so you can see the cadence for yourself before you buy.
Yes. Every Annnimate tier covers unlimited commercial client projects. You and your seats can ship with the components on any work you produce. The only limit is repackaging or reselling the components as a competing library.
Annnimate Library members get 20% off every Landmark Kit purchase for as long as the subscription is active. Past Kit buyers get 20% off their first year of any Library plan. The two products are separate, but they reward each other.
Annnimate has a 30-day, no-questions-asked refund on both Library subscriptions and Landmark Kits. If it does not fit how you work, email us within 30 days of purchase and we refund you in full.
Ready to ship motion that holds up?
Browse the library, take a component, drop it into your build. The first one is free.