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.
- A feel, or no effect named. "Make it feel premium", "add some animation": read Finding the vibe before choosing any effect. Read the feel from the project, then say the plan in a line or two before building.
- Unclear. When the project's own cues settle the feel and how much motion it wants, say the plan in a line or two and build. Ask only when they don't, and then once: "Full treatment on every element, or only ?", folding in the feel if that is open too.
- 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);easeReverseneeds 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-animaxxingonly when its look is requested; it selects and configures these recipes.
Read only what you need
| Task | Reference |
|---|---|
| The feel isn't settled: a full treatment, a new project, or a user describing a mood | Finding the vibe |
| 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; weight or width moves inside a line of text | Text stability |
| Character, word, line, scramble, or glitch entrances/exits, implode and explode, 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 shape flowing through a sequence of shapes, a mark following a path, a section edge that morphs with scroll, text riding a path or turning around a badge | SVG effects |
| Printmaking: an image or block painted on with a dry brush, text that inks in through grain or is written on by a brush, a second impression slipping into register, a corner pulled back and peeled off | Print effects |
| Thresholds and arches: a picture opening out of an arch to fill its frame, a scrolled passage through a doorway into the next picture, a picture flying from a card into an arch and taking its shape | Doorways |
| A beat that draws the eye then rests (a ring from a live dot, a heartbeat, a badge bump), and ambient loops that float, drift, breathe, or orbit while on screen, with a pause | Pulse and ambient |
| 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, a liquid pour reveal, hover image previews, scroll-scrubbed video, canvas frame sequences | Media effects |
| Label rolls, underline sweeps, direction-aware fills, weight or width hovers in running text, image zoom on hover and focus, liquid hovers (a bead underline, a poured round fill, a jelly button) | Hover effects |
| 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 andwill-changewhen their phase ends. - Park a start position with
gsap.setorfromTo, never with a CSS transform the tween also moves: GSAP reads CSStranslateY(100%)as pixelyand addsyPercenton top, so a cover lands a full height short. A CSS transform is fine as a resting pose that afromtween lands on. - 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
revertTextfor 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.
- Text keeps its line breaks from first paint to rest. Wait for the faces before measuring or splitting, keep text hidden until they load (briefly at most), never tween letter-spacing, width, or weight on text that wraps, and animate a paragraph as one block unless its split lines match the resting breaks. Verification has the check.
- Width changes can invalidate split measurements (resize). The controller decides whether to rebuild; recipes never remount pages.