# Animaxxing teaches coding agents GSAP motion

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.

- Language: en
- Published: 2026-10-28
- Tags: web, gsap, animation
- URL: https://devs7ud.io/en/blog/animaxxing-gsap-agent-skills-en
- Translation (ko): https://devs7ud.io/blog/animaxxing-gsap-agent-skills.md

## Animaxxing teaches coding agents how to move a page

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](https://tympanus.net/codrops/2026/10/26/animating-agents-gsap-animaxxing/).

It is not only skills. The official sites, [animaxxing.com](https://animaxxing.com) and the [Museum of Motion](https://museum.animaxxing.com), carry plenty of demos you can click through. This post leans on those demos more than on explanation.

![The first screen of the Museum of Motion](/blog-img/animaxxing-gsap-agent-skills-en/1.png "zoom")

_Picture: [museum.animaxxing.com](https://museum.animaxxing.com)_

## The skills install in two layers

Installing takes one line. The Animaxxing skills sit on top of the official GSAP skills, so the command has two parts.

```
npx skills add https://github.com/greensock/gsap-skills && npx skills add https://github.com/johnpolacek/animaxxing-skills
```

Below is the makeup of the [Animaxxing skills](https://github.com/johnpolacek/animaxxing-skills). There are ten, under the MIT license. The official [gsap-skills](https://github.com/greensock/gsap-skills) are separate and split into eight modules (core, timeline, ScrollTrigger, plugins, utils, React, performance, frameworks).

**The ten Animaxxing skills**

| Group | Count | 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 |

_Source: johnpolacek/animaxxing-skills_

Every framework skill follows the same life cycle. The Codrops article says this order is what makes page transitions possible.

**The life of one page**

- Mount
- → Start pose
- → Intro
- → Settled
- → Outro
- → End pose
- → Leave

_Source: Codrops tutorial, animaxxing-skills_

The key is the last rule: finish leaving before you start to arrive.

## 57 motions you can click through in one place

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**

| 항목 | 값 |
| --- | --- |
| Type | 9 effects |
| Play | 14 effects |
| Scroll | 11 effects |
| Pointer | 11 effects |
| Drag | 4 effects |
| Vibes | 8 effects |

_Source: museum.animaxxing.com_

Opening them turns out to be a lot more fun than reading about them. These are the three I opened first.

- [Wave](https://museum.animaxxing.com/exhibits/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](https://museum.animaxxing.com/exhibits/physics) drops shapes that fall under gravity, pile up, bounce and fly from a slingshot. Click to drop more
- [Liquid](https://museum.animaxxing.com/exhibits/liquid) belongs to the Vibes group: effects combined into one feeling, as a small site

![The Wave exhibit with its controls for how the letters ripple](/blog-img/animaxxing-gsap-agent-skills-en/2.png "zoom")

_Picture: [museum.animaxxing.com/exhibits/wave](https://museum.animaxxing.com/exhibits/wave)_

![The Physics exhibit: shapes that fall and pile up under gravity](/blog-img/animaxxing-gsap-agent-skills-en/4.png "zoom")

_Picture: [museum.animaxxing.com/exhibits/physics](https://museum.animaxxing.com/exhibits/physics)_

![Liquid in Vibes: a small site built from combined effects](/blog-img/animaxxing-gsap-agent-skills-en/3.png "zoom")

_Picture: [museum.animaxxing.com/exhibits/liquid](https://museum.animaxxing.com/exhibits/liquid)_

## How did they build it with an agent

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.

## Flashy, but never blocked

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

## Sites you know, redrawn

The [Showcase](https://animaxxing.com/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.

![The first screen of the Animaxxing site](/blog-img/animaxxing-gsap-agent-skills-en/5.png "The first screen and its themes button")
_Picture: [animaxxing.com](https://animaxxing.com)_

![The Showcase: well-known sites redrawn with Animaxxing](/blog-img/animaxxing-gsap-agent-skills-en/6.png "The list for picking a redrawn site")
_Picture: [animaxxing.com/showcase](https://animaxxing.com/showcase)_

![Animaxxipedia: the Wikipedia octopus article in monochrome and in motion](/blog-img/animaxxing-gsap-agent-skills-en/7.png "The Wikipedia octopus article, same structure, in monochrome and motion")
_Picture: [animaxxing.com/showcase/animaxxipedia](https://animaxxing.com/showcase/animaxxipedia)_

![Sky: the weather drawn in hairlines](/blog-img/animaxxing-gsap-agent-skills-en/8.png "Current conditions, the hours, the week and radar in hairlines")
_Picture: [animaxxing.com/showcase/weather](https://animaxxing.com/showcase/weather)_

![Tube: a YouTube feed in strict 16:9 frames](/blog-img/animaxxing-gsap-agent-skills-en/9.png "The feed, player, channel and search in 16:9 frames")
_Picture: [animaxxing.com/showcase/youtube](https://animaxxing.com/showcase/youtube)_

![Made: a shop with the photograph as the hero](/blog-img/animaxxing-gsap-agent-skills-en/10.png "Browse, item, shop and cart, with the photograph as the hero")
_Picture: [animaxxing.com/showcase/etsy](https://animaxxing.com/showcase/etsy)_

![The Front Page: a Reddit feed redrawn](/blog-img/animaxxing-gsap-agent-skills-en/11.png "The feed, a post and its thread, a subreddit, the submit form")
_Picture: [animaxxing.com/showcase/reddit](https://animaxxing.com/showcase/reddit)_

![The Feed: Hacker News in type and numbers only](/blog-img/animaxxing-gsap-agent-skills-en/12.png "The ranked list and a nested thread in type and numbers only")
_Picture: [animaxxing.com/showcase/hackernews](https://animaxxing.com/showcase/hackernews)_

## View

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.

## Some news this week did not make it in

The Codrops article also names resources to use when animating with agents.

- [Emil Kowalski's skills for designers and engineers](https://github.com/emilkowalski/skills)
- [Motion AI Kit](https://github.com/motiondivision/ai-kit), animation best practices for coding agents
- [Vercel Web Interface Guidelines](https://github.com/vercel-labs/web-interface-guidelines), which include animation performance and accessibility

### Sources

- [Animating with Agents: Building a Kinetic Type Site with GSAP and the Animaxxing Skills](https://tympanus.net/codrops/2026/10/26/animating-agents-gsap-animaxxing/), Codrops
- [Museum of Motion](https://museum.animaxxing.com), [animaxxing.com](https://animaxxing.com), [Showcase](https://animaxxing.com/showcase)
- [johnpolacek/animaxxing-skills](https://github.com/johnpolacek/animaxxing-skills), [greensock/gsap-skills](https://github.com/greensock/gsap-skills)