Create GSAP tweens with matchMedia for responsive, reduced-motion-aware animations.
npx skills add https://github.com/braswelljr/braswelljr --skill gsap-core-braswelljr
Please help me install this Agent Skill. Skill: gsap-core Source: https://github.com/braswelljr/braswelljr/tree/main/.agents/skills/gsap-core Command: npx skills add https://github.com/braswelljr/braswelljr --skill gsap-core-braswelljr
This Skill eliminates the frustration of building inconsistent, hard-to-control JavaScript animations that lack cross-framework compatibility and accessibility support, providing a robust, production-ready animation engine for web projects.
Use the gsap-core skill to create a fade-in animation for the hero section that respects users' reduced motion preferences and works across desktop and mobile screen sizes.
High-intent search queries and answers about installing and using this skill.
Use gsap.matchMedia() to register responsive animation breakpoints that automatically disable or adjust tween animations when users enable prefers-reduced-motion. This ensures your JavaScript animations remain accessible and automatically clean up when media query conditions no longer match.
GSAP core works across React, Vue, Svelte, and vanilla JS projects to animate DOM and SVG elements. It provides cross-framework compatible tween creation, easing configuration, stagger effects, and transform animation capabilities for consistent JavaScript animations.
Use gsap.matchMedia() to create responsive web animations that adapt to different screen sizes by registering breakpoint-specific tween configurations. This approach automatically reverts and cleans up animations when media query conditions no longer match, preventing inconsistent behavior across devices.
Use gsap.to(), from(), and fromTo() methods to create, pause, reverse, and sequence single or multiple element animations. Apply stagger effects and easing configurations to build smooth entrance, exit, and interactive state change animations.
Animations break on unmount when cleanup is not handled automatically. GSAP core reverts and cleans up animations when media query conditions no longer match, preventing orphaned tweens and inconsistent behavior during component unmounts across React, Vue, and Svelte.
You need GSAP core if your web project requires performant SVG animations with accessibility support, responsive breakpoints, and cross-framework compatibility. It provides tween creation, transform animation, and automatic cleanup that vanilla JavaScript animation solutions lack natively.
James-GamboaCreate GSAP core tweens for DOM and SVG in React, Vue, Svelte, or vanilla JS.
Eng0AICreate a gaming landing page with GSAP scroll animations and 3D hover effects.
viktorbezdekCreate accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.
ZanebonoAlterCreate GSAP tweens, timelines, staggered effects, and ScrollTrigger animations.
