skills.rest
Marshal-Nguyen
Marshal-NguyenCOMMUNITY
Explore all skills by this author →
GitHub

gsap-core

Implements GSAP core tweens, eases, staggers, and matchMedia for JavaScript animations.

1|Updated Aug 17, 2026
Search Tags:#frontend#javascript#animation#gsap#easing#tween#matchmedia
One-click install
npx skills add https://github.com/Marshal-Nguyen/Skill_Claude_Agent --skill gsap-core-marshal-nguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/Marshal-Nguyen/Skill_Claude_Agent/tree/main/claude/skills/gsap-core
Command: npx skills add https://github.com/Marshal-Nguyen/Skill_Claude_Agent --skill gsap-core-marshal-nguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Writing correct GSAP animations requires knowing the right tween methods, transform aliases, easing names, and accessibility patterns; this Skill provides the official core API guidance so generated animation code follows GSAP best practices. ## Core Features & Use Cases - Core Tween Methods: Covers gsap.to(), from(), fromTo(), and set() with correct vars like duration, delay, ease, stagger, overwrite, and immediateRender. - Transforms & Easing: Documents transform aliases (x, y, scale, rotation, xPercent), autoAlpha, svgOrigin, directional rotation, built-in eases, and CustomEase for custom curves. - Responsive & Accessible Animation: Uses gsap.matchMedia() for breakpoints and prefers-reduced-motion so animations revert cleanly and respect user accessibility settings. - Use Case: When a user asks to animate a card grid entrance in React or vanilla JS, the Skill produces a staggered gsap.to() tween with autoAlpha, a power ease, and a matchMedia block that disables motion for reduced-motion users. ## Quick Start Use the gsap-core skill to write a staggered fade-in animation for my card elements that respects prefers-reduced-motion.

Frequently Asked Questions about gsap-core

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

FAQPage Schema
How do I animate elements with GSAP in JavaScript?▼

Use gsap.to(targets, vars) to animate from the current state to the values in vars, such as gsap.to(".box", { x: 100, duration: 1 }). Targets can be a CSS selector, element, or array, and vars use camelCase property names.

What is the difference between gsap.to, gsap.from, and gsap.fromTo?▼

gsap.to animates from the current state to the given values, gsap.from animates from the given values to the current state, and gsap.fromTo defines explicit start and end states. from() and fromTo() render immediately by default unless immediateRender is false.

How do I make GSAP animations respect prefers-reduced-motion?▼

Use gsap.matchMedia() with a reduceMotion condition like "(prefers-reduced-motion: reduce)" and set duration to 0 or skip the animation when it matches. Animations created inside matchMedia revert automatically when the query stops matching.

Should I use GSAP or CSS animations for my project?▼

CSS animations suit simple transitions, but GSAP is preferred for timeline sequencing, runtime control like pause and reverse, complex easing, and scroll-driven animation. GSAP is framework-agnostic and works in React, Vue, Svelte, and vanilla JS.

Why is my second gsap.from() tween not animating?▼

When multiple from() or fromTo() tweens target the same property of the same element, the default immediateRender: true causes the later tween to overwrite the first one's end state. Set immediateRender: false on the later tweens to fix it.

Can GSAP animate SVG elements and CSS variables?▼

Yes, GSAP animates SVG using transform aliases and svgOrigin for rotation around a global SVG point, and it can animate CSS custom properties like "--hue". Use either svgOrigin or transformOrigin on an SVG element, never both.

Related Skills

Explore More Software Engineering Skills→
Bharathadi01Bharathadi01

gsap-core

Animate web interfaces with GSAP core tweens, timelines, and matchMedia.

Community
Advanced
brunoolfbrunoolf

gsap-timeline

Sequences and choreographs GSAP animations using timelines, labels, and the position parameter.

Community
Intermediate
coastdigitalgroupcoastdigitalgroup
2

high-performance-css-animations

Guide CSS animations using compositor-only properties like transform and opacity.

Official
Advanced
maxxthedevelopermaxxthedeveloper
3

web-animation-design

Design web animations with easing, timing, and performance guidance.

Community
Intermediate