animaxxing

Original：🇺🇸 English

Translated

Build GSAP motion without restyling, as single effects or the full treatment: for "we're animaxxing", every element enters from a blank page, rests, and leaves. Text: split, scramble, glitch, typewriter, and speak-in entrances, scattering headlines, letter waves, text on a path, count-ups, odometers. Scroll: reveals, scrubbing, parallax, pinned scenes, stacking cards, zoom-through, horizontal runs, waypoints, smooth scroll, paging. Pointer: magnetic, tilt, spotlights, directional fills, press ripples, shakes, cursor followers, image trails, proximity, label rolls, underlines. Drag: throw tracks, endless loops, card stacks, sortable lists, swipe to dismiss. Also page covers, Flip and shared-element morphs, menus, dialogs, tabs, state buttons, media and SVG effects, marquees, CustomEase, sound, confetti, particles, and hover stuck on touch. Pair with the matching GSAP framework skill. Not for branding, redesign, routing, or GSAP API questions.

2installs

Sourcejohnpolacek/animaxxing-skills

Added on2026-10-05

NPX Install

npx skill4agent add johnpolacek/animaxxing-skills animaxxing

SKILL.md Content

View Translation Comparison →

Animaxxing

Portable vanilla TypeScript and GSAP effect recipes. Keep the project's fonts, colors, layout, and component styling; no style skill, token, or font is required.

Load the matching

gsap-<framework>

skill first (

gsap-vanilla

for plain sites), installing it if missing. It owns mount → initial state → intro → settled → outro → end state → unmount, initialization, navigation, recovery, interruption, and cleanup timing. This skill supplies builders its controller calls; do not invent lifecycle guidance here.

Choose the scope

Full treatment. "We're animaxxing", "animax this", or "full treatment" means every element on every screen animates, keeping the brand. Each element starts from a blank first paint, enters (intro), rests static or ambient (settled), and leaves (outro) on every requested navigation. Content below the fold enters when it is scrolled or tabbed to. Mark every element as a page item (route letters) or give it a pair from the shelf; the framework skill keeps the first paint blank. Record the decision in the project's plan or notes so later sessions keep it.
Single effects. A named effect gets only that effect. A particle button does not imply a page transition, font change, or hero sequence.
Unclear. Ask once before building: "Full treatment on every element, or only <effect>?"
The full treatment still follows reduced motion, no-script readability, and the framework skill's initialization and lifecycle.

Setup and adaptation

Read the installed GSAP version and types. Every plugin used is free since 3.13; SplitText recipes need 3.13+ (
```
SplitText.create
```
,
```
smartWrap
```
,
```
mask
```
,
```
aria
```
);
```
easeReverse
```
needs 3.15+. Each recipe lists its dependencies; register only those used. Use the official GSAP skills for API details.
Recipes register plugins at module scope, which is server-safe, but import them only from client code. Drop a copy's registration when the project registers plugins centrally.
Add only requested effects unless the full treatment applies; see Choose the scope.
Recipe constants are editable defaults, not brand rules. Tune timing, stagger, spread, and intensity to the surface; expose more constants only if the app needs runtime configuration.
Weight effects need a loaded variable weight axis, not a specific font. Match endpoints and resting weight to the face (examples use 400–800), or use transform-only effects.
Particle canvases take their CSS
```
color
```
; use an existing brand color with enough contrast. Keep control geometry and focus styling.
Use
```
style-animaxxing
```
only when its look is requested; it selects and configures these recipes.

Read only what you need

Task	Reference
Choose in/out effects, configure defaults, coordinate with the controller	Motion vocabulary
A brand's signature curve for every `ease` option	Signature curves
Loading flashes, auth-dependent content, or layout shifts	Matching installed framework skill's `references/initialization.md` , Data readiness and layout stability
Character animation: font readiness, kerning, masks, stable split/revert	Text stability
Character, word, line, scramble, or glitch entrances/exits, ellipse line reveals, highlighter line sweeps	Split entrances
Page items, including scattering headlines	Route letters
Short display copy arriving at speaking pace	Speak-in
Text typed behind a caret, deleted, or a word that retypes through a list	Typewriter
Ambient headline ripple	Wave
Scroll reveals and pop-ins, scrubbed statements, parallax and footer reveals, pinned scenes, stacking cards, zoom-through to the next scene, horizontal runs and drift inside them, an element traveling between section waypoints, progress, velocity skew, header theme per section, hide-on-scroll headers	Scroll effects
Magnetic buttons, tilt cards, spotlight reveals, cursor follower and its scrolling label, momentum hover, proximity scaling and dock effects, image trails, drag-and-throw tracks, swipe to dismiss	Pointer effects
Endless drag galleries: a wrapping loop with snap, wheel, and drift; a 2D grid that wraps on both axes; a fanned card stack dealt by drag or flick	Endless drag
Lists reordered by dragging a handle or with the keyboard	Sortable
Full-screen sections changing on a wheel flick, swipe, or key	Section pager
Opt-in sound on interactions and timelines, ambient beds	Sound cues
Line drawing, icon morphs, a mark following a path, a section edge that morphs with scroll, text riding a path or turning around a badge	SVG effects
Count-up figures, odometer digits rolling to new values, looping marquees, logo walls that cycle	Counters and marquees
Eased page scrolling with Lenis or ScrollSmoother	Smooth scroll
Curtain page transitions, tilted, titled, clip-path wipe, or drifting covers, curved SVG swipe covers, first-visit preloaders	Page covers
Filter, reorder, and expand layouts; shared-element morphs across pages	Layout Flip
Image wipe reveals, hover image previews, scroll-scrubbed video, canvas frame sequences	Media effects
Label rolls, underline sweeps, direction-aware fills, image zoom on hover and focus
A control that squashes and ripples when pressed, by any input	Press feedback
A shake for an error or refused action	Accents
Menu overlays, interruptible enter/exit with reverse easing, dialog enter and exit, accordion height, sliding tab indicators, buttons that show loading, success, and failure	Component motion
Dispersal on a call to action	Blast-off
Confetti bursts and emoji rain thrown under gravity	Physics effects
Particle buttons, cards, links, or command fields	Particle effects plus field/attach helpers
Touch, focus, stuck hover, mobile particle budgets	Input and devices
Roll back partial setup and restore modified content	Effect restoration
Verify effects and reuse on another brand	Verification, then the framework's relevant checks

Recipe contract

Copy only the selected recipe and its named local helpers. Return shapes differ per recipe (timelines,

{ timeline, revert }

, stop functions, particle controls); assume no universal interface.

Framework phase	Effect responsibility
initial state	Targets prepared under the framework's pre-paint/no-script mechanism
intro	Entrance builder or `enter(delay)`
settled	Clear temporary styles; optional `idle()` or wave
outro	Exit builder, `exit()` , or `blastOff(...)`
end state	Notify completion; controller decides the next action
unmount	Controller calls the recipe's stop, `destroy` , or `revert` handle

Apply effect restoration when copying a recipe, including failure before a handle returns.
Builders never navigate, mount, subscribe to page lifecycle, or decide when they run. The controller calls them and owns phase state.
An invisible start does not make incomplete data ready. The controller supplies resolved targets or reserved regions; never use an entrance to disguise guest or empty content.
Keep split markup only while an effect needs it (speak-in finishes and an active wave persist). Revert at the controller's cleanup boundary; preserve accessible text and nested controls.
Use
```
overwrite: "auto"
```
; clear temporary styles and
```
will-change
```
when their phase ends.
Reduced motion reaches the documented settled or exit state and still fires completion callbacks; no ambient motion. Use the project's preference helper, including any app override. Builders read it when they build; on a change, the controller tears down and rebuilds.
Killing a parent timeline never reaches a nested builder's interrupt callback. Kill the parent, then call each builder's revert, such as
```
revertText
```
for split runners.
One effect per target: two owners must never write one element's transform. Stop pointer and ambient effects before an outro moves their target.
Ambient effects expose controls so the owner can pause them off screen and stop them on exit. Loops past five seconds need a user-facing pause (WCAG 2.2.2).
Particle input and density follow the field contract. Controls work without hover.
Width changes can invalidate split measurements (resize). The controller decides whether to rebuild; recipes never remount pages.