skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

animaxxing

Build reusable GSAP text and particle effects that preserve an existing site's design.

1|Updated Aug 17, 2026
Search Tags:#typescript#animation#page transitions#gsap#particles#splittext#frontend motion
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill animaxxing-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animaxxing
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/animaxxing
Command: npx skills add https://github.com/NalinDalal/skillset --skill animaxxing-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, and includes references (resource) components.

What problem does it solve? Adding expressive text and particle animation to a site usually means copying demo code that drags along its own fonts, colors, and layout, breaking the project's design. This Skill provides portable vanilla TypeScript and GSAP recipes for split-text entrances, scattering headlines, speak-in copy, letter waves, particle buttons and cards, and blast-off exits that adapt to any brand without a restyle. ## Core Features & Use Cases - Split-text effects: Character, word, line, and scramble entrances and exits built on GSAP SplitText, with guidance for kerning stability, mask clipping, and clean revert. - Particle system: A canvas-based particle field with five ready treatments (marquee, reactor, resolve, slipstream, ignite) for buttons, cards, links, and command fields, colored from the element's computed CSS color. - Route transitions and exits: Page intro/outro timelines driven by data attributes, plus a blast-off effect that throws a hero composition apart from a pressed call to action. - Use Case: A developer wants a headline whose letters scatter in from random positions on page load and a primary button with rising embers, without changing the site's typography or palette. The Skill supplies the effect builders while the matching gsap-<framework> skill owns lifecycle, navigation, and cleanup. ## Quick Start Ask the agent to add a split-text entrance to the hero headline and a particle effect to the primary button using the animaxxing recipes while keeping the current design intact.

Frequently Asked Questions about animaxxing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add GSAP split-text animations without changing my site's design?▼

Copy only the needed recipe and its named helpers from the references, keeping your existing fonts, palette, and layout. Recipe constants are editable defaults, so adapt timing, stagger, and spread to your surface rather than adopting demo styling.

How do I add particle effects to buttons and cards with GSAP?▼

Use the particle field recipe: attach a canvas wrapper to the target with attachParticleEffect and pick a treatment such as marquee, reactor, resolve, slipstream, or ignite. The canvas inherits its color from computed CSS and pauses automatically off screen.

Does GSAP SplitText animation require a specific font?▼

No specific font is required, but weight-based effects need a loaded variable font with a weight axis. For static faces, choose transform-only effects or omit weight moves rather than changing the font.

Why does text shift or look heavier after SplitText revert?▼

Character wrappers interrupt browser kerning, and masks can clip glyph ink on tight tracking. Apply persistent font-kerning: none on animated headlines, and add measured padding with negative margins to affected masks only when clipping is confirmed.

How do GSAP animations handle reduced motion preferences?▼

Every builder checks a prefers-reduced-motion helper, including an optional data-motion override on the html element. Under reduced motion, effects set the documented end state immediately with no splits or particles, while completion callbacks still fire.

When should I not use these GSAP effect recipes?▼

Do not use them for choosing a brand, redesigning layout, framework routing, or isolated GSAP API questions. Framework lifecycle, navigation, and cleanup timing belong to the matching gsap-<framework> skill, which these recipes expect to be installed.

Related Skills

Explore More Software Engineering Skills→
het8802het8802
3

gsap-frameworks

Integrate GSAP animations with Vue and Svelte lifecycle events.

Community
Intermediate
vTRKAvTRKA

reduced-motion-accessibility

Enforce reduced-motion fallbacks and validate with browser/runtime evidence.

Community
Advanced
peterbamuhigirepeterbamuhigire
1

platform-instagram-visual-system

Generate a standalone Instagram visual identity brief covering grid, palette, typography, and presets.

Community
Advanced
fyunusafyunusa

scroll-reveal-libraries

Implement scroll-triggered animations with AOS data attributes.

Community
Basic