Animaxxing is a set of agent skills for building animated websites with GSAP, introduced in a Codrops tutorial. Here is a tour of the demos on its official sites.
If you want to animate a site with GSAP, the web animation library, what should you ask a coding agent to do, and how? The developer John Polacek answered with the Animaxxing skills, and on October 26 he walked through the build in a Codrops tutorial.
It is not only skills. The official sites, animaxxing.com and the Museum of Motion, carry plenty of demos you can click through. This post leans on those demos more than on explanation.
Picture: museum.animaxxing.com
Installing takes one line. The Animaxxing skills sit on top of the official GSAP skills, so the command has two parts.
Below is the makeup of the Animaxxing skills. There are ten, under the MIT license. The official gsap-skills are separate and split into eight modules (core, timeline, ScrollTrigger, plugins, utils, React, performance, frameworks).
The ten Animaxxing skills
| Motion | 2 | animaxxing, animaxxing-webgl |
| Framework | 7 | gsap-vanilla, gsap-astro, gsap-sveltekit, gsap-nuxt, gsap-react-router, gsap-tanstack-router, gsap-nextjs |
| Style | 1 | style-animaxxing |
Every framework skill follows the same life cycle. The Codrops article says this order is what makes page transitions possible.
- Mount → Start pose
- Start pose → Intro
- Intro → Settled
- Settled → Outro
- Outro → End pose
- End pose → Leave
The key is the last rule: finish leaving before you start to arrive.
The Museum of Motion is the demo site the tutorial builds. It shows 57 effects one at a time, each with what it does and how it behaves with touch, keyboard and reduced motion.
The 57 effects of the Museum of Motion, by group
| Item | The 57 effects of the Museum of Motion, by group |
|---|---|
| Type | 9 effects |
| Play | 14 effects |
| Scroll | 11 effects |
| Pointer | 11 effects |
| Drag | 4 effects |
| Vibes | 8 effects |
Opening them turns out to be a lot more fun than reading about them. These are the three I opened first.
- Wave lets letters gain weight and let it go, so a ripple runs through the line. You can change the duration, stagger and ease yourself
- Physics drops shapes that fall under gravity, pile up, bounce and fly from a slingshot. Click to drop more
- Liquid belongs to the Vibes group: effects combined into one feeling, as a small site
Picture: museum.animaxxing.com/exhibits/wave
The most useful part of the tutorial was the order of work, more than the prompts.
- First you write a short motion brief called
MOTION.md. The agent offered three personalities (the precise and decisive "Press", the slightly bouncy "Kinetic poster", the calm "Gallery"), and the author passed on the agent's pick to choose the kinetic poster. After that no prompt has to repeat timing and easing - A planning prompt starts a round of questions, then a fresh session gets the build prompt
- Nothing is done all at once. Get one exhibit right, then ask for the same on the others
The bug story is pretty good. Hovering over a name shifted the layout, so the agent wrote a test that hovers every name, and for 31 of the 76 names something moved. The cause was a width of 276.6 pixels rounded up to 277. After the fix the same test found zero moves at seven screen widths.
Then the author takes one more step. He told the agent to update the skills, and now they include a hover effect that does not shift the layout, plus a check for it. A bug in one project becomes a fix to the skill.
Both the Animaxxing and the official GSAP skills treat accessibility as a default. The tutorial lists these points.
- Visitors who ask for reduced motion skip the animations and go straight to each element's resting state
- Without JavaScript the server still sends the finished page. If the script arrives late, the page shows after a short delay
- Every hover effect has a matching focus effect, so the tab key reacts the same way
- Anything that loops has a pause button, and the choice is remembered
- WebGL effects show the real image when they fail or when reduced motion is on
The Showcase holds eight sites you already know, redrawn the Animaxxing way: the same structure, moved into monochrome and motion. Swipe sideways, and tap to see one larger.
I would open the demos before installing the skills. You need to know which motion you like before you can write a motion brief. The tutorial says the same: one brief shortens every prompt after it.
One thing stuck with me. The author himself says static sites are fine, and that nobody wants scroll animation on a banking site. I read these skills less as a tool for moving everything and more as a safe way to move the places you decided to move.
One thing I don't know yet: whether the motion in these demos is light enough for a real service's performance budget. This record can't tell me. I plan to judge that after trying it.
The Codrops article also names resources to use when animating with agents.
- Emil Kowalski's skills for designers and engineers
- Motion AI Kit, animation best practices for coding agents
- Vercel Web Interface Guidelines, which include animation performance and accessibility