gsap-core

Name: gsap-core
Availability: InStock
Author: gyalamanch001a

Create GSAP tweens for DOM and SVG elements with matchMedia responsiveness.

Updated Apr 2, 2026

Search Tags:#animation #responsive #gsap #reduced-motion #stagger #easing #tween

Ready to run

npx skills add https://github.com/gyalamanch001a/pur-new --skill gsap-core-gyalamanch001a

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/gyalamanch001a/pur-new/tree/main/.agents/skills/gsap-core
Command: npx skills add https://github.com/gyalamanch001a/pur-new --skill gsap-core-gyalamanch001a

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes the complexity of building smooth, controllable JavaScript animations for interfaces, helping you replace brittle CSS-only motion with predictable runtime animation.

Core Features & Use Cases

Core tweens: Create entrances, exits, motion, scaling, and rotation with gsap.to, gsap.from, and gsap.fromTo.
Timing control: Use duration, delay, stagger, repeat, yoyo, and easing to choreograph polished motion.
Responsive motion: Adapt animations with gsap.matchMedia for breakpoints and prefers-reduced-motion.
Use case: Animate a dashboard card grid so items fade, slide, and scale into view on desktop while simplifying motion for users who prefer reduced animation.

Quick Start

Use the gsap-core skill to animate the selected UI elements with GSAP while keeping the motion responsive and accessible.

Frequently Asked Questions about gsap-core

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

FAQPage Schema

How do I create smooth JavaScript animations for DOM and SVG elements?▼

Smooth JavaScript animations for DOM and SVG elements are created using core GSAP tweens like gsap.to, gsap.from, and gsap.fromTo. These methods configure transform-based properties to build predictable entrances, exits, scaling, and rotation.

What's the best way to choreograph staggered motion and timing in JavaScript UI animations?▼

Staggered motion and timing in JavaScript UI animations are choreographed using duration, delay, stagger, repeat, yoyo, and easing configurations. These settings provide precise control over sequence timing to replace brittle CSS-only motion.

Does GSAP support responsive animations and prefers-reduced-motion for accessible interfaces?▼

GSAP supports responsive animations and prefers-reduced-motion through the gsap.matchMedia workflow. This adapts animations for different breakpoints and simplifies motion for users who prefer reduced animation control.

Can I use GSAP core tweens across modern frameworks and vanilla JS?▼

GSAP core tweens work across vanilla JS and modern frameworks. They require precise tween configuration and transform-based properties to ensure reliable interactive UI motion regardless of the environment.

Why use GSAP tweens over CSS-only motion for interactive UI elements?▼

GSAP tweens replace brittle CSS-only motion with predictable runtime animation. They remove the complexity of building smooth, controllable JavaScript animations by providing robust timing control and choreographed motion for interfaces.

How do I animate a dashboard card grid so items fade, slide, and scale into view?▼

Animate a dashboard card grid by applying core GSAP tweens for fading, sliding, and scaling. Configure staggered timing for sequenced item entrances and use matchMedia to simplify motion for reduced-motion preferences.