A skill for Claude Code and Codex · Design and frontend
animation-expert makes your AI animate interfaces with real criteria: it defines the role of every movement, picks between CSS, WAAPI, GSAP, and ScrollTrigger based on the effect rather than habit, and delivers animation that works on mobile, respects people who prefer less motion, and never locks up scrolling. It comes with a gallery of 24 runnable studies to check out before you even ask for anything.
Solo skill: unlocks right away, no guarantee after download. Purchase terms.
Or get all 25 skills plus 9 bonuses in the Supreme Pack for R$ 497.
The problem
Asking an AI for animation usually ends in one of two places: everything fading in the same way, or an effect that looks great on desktop and breaks on mobile, then disappears the moment you scroll back up. Three symptoms, and what changes with the skill.
| Without the skill | With animation-expert |
|---|---|
| Every section fades in from the bottom, at the same duration, and the whole page turns into a generic template in slow motion. | Every movement has a role: headlines enter line by line, images reveal through a mask, lists stagger, each with a different intensity that guides the eye through the hierarchy. |
| The effect runs once and never again. You scroll back to the top and everything's frozen, or the last button on the page never reaches its final state. | It separates one-shot animations from scroll-linked ones, recalculates the state when you scroll back, and caps the end point so the last CTA always shows up. |
| On mobile the page stutters, the content disappears if the script fails, and anyone who's set their system to reduce motion gets everything anyway. | Content stays visible before JS even loads, transform and opacity replace expensive properties, loops pause off-screen, and the reduced-motion preference gets respected. |
What you get out of it
Animation implemented right on your page, with the reasoning behind every choice, and tested the way a real visitor actually uses it.
role, target, engine, trigger, repeat behavior, and mobile version for every effect
with the component's own prefix, and without importing the whole gallery into your project
two full scroll-throughs, a stop midway, a reversed direction, and a resized viewport
no custom scroll loop, no layout measured on every frame, and no duplicate engine
How it works
Before animating anything, it understands the page that already exists, the stack, and the visual direction, and never turns a requested tweak into a redesign.
Role, target, engine, trigger, repeat behavior, a legible end state, mobile version, and how to clean everything up on exit, logging only the decisions that actually matter.
CSS for hovers and simple loops, WAAPI for light sequences, GSAP with ScrollTrigger for coordination and scrubbing, and never a competing library in the same component.
The initial state only gets applied after the engine has loaded, so if the script fails, the content stays right there, legible.
Scrolls down, back to the top, and down again, stops midway, reverses direction, resizes the window, opens the FAQ, and scrolls all the way to the last button.
Before you buy
The libraries the gallery uses come bundled in, local and free to use commercially.
Its limits
The focus is web interface animation: entrances, scroll, hover, and microinteractions. Video, social media motion graphics, and character animation are outside its scope.
Rive, Canvas, and WebGL only come into play when DOM and SVG can't cut it, and it explains the visual payoff before committing to a heavier graphics surface.
An official demo teaches the technique, but it doesn't authorize copying anyone's photo, brand, or code, and the skill keeps inspiration and licensing separate.
What you receive
The price
Just animation-expert
R$57one time payment
Bought it solo and now want it all? Message me on WhatsApp and I will deduct what you already paid.
Supreme Pack
R$ 1.665R$497or 10x on a card
Buying all 25 solo adds up to R$ 1.665. The pack pays for itself by the ninth skill. See everything the Supreme Pack includes
02 · Design and frontend
Before you ask
Without the skill, the AI tends to apply the same effect everywhere and only test it on desktop. With it, every movement has a role and a contract, the engine gets picked to match the effect, content never depends on the script to show up, and testing includes scrolling back up, mobile, and reduced motion.
It does. If the project already uses Motion, it sticks with Motion; if not, it picks between CSS, WAAPI, and GSAP. What it avoids is installing two competing engines in the same component.
No. GSAP and ScrollTrigger are free to use, commercial use included, and the libraries already ship local inside the skill.
It does when it's done badly. The skill uses transform and opacity, pauses loops off-screen, never measures layout on every frame, and keeps the page usable before the script even loads. For overall site speed, page-speed-expert is also in the catalog.
Yes, the license covers your work for third parties. What's off limits is reselling or redistributing the skill.
One-time payment, 12 months of updates. No refunds after download; the Supreme Pack comes with a 7-day guarantee.
