skills.rest
malikkotb
malikkotbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-core

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

Updated Sep 6, 2026
Search Tags:#javascript#animation#gsap#stagger#easing#prefers-reduced-motion#tween
One-click install
npx skills add https://github.com/malikkotb/shellpluscore --skill gsap-core-malikkotb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/malikkotb/shellpluscore/tree/main/.agents/skills/gsap-core
Command: npx skills add https://github.com/malikkotb/shellpluscore --skill gsap-core-malikkotb

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, repeat, and overwrite. - Transforms & Easing: Documents transform aliases (x, y, scale, rotation), 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: A developer asks for a staggered card entrance animation in a React app that disables motion for reduced-motion users; the Skill produces a gsap.to() with stagger, autoAlpha, and a matchMedia reduceMotion condition. ## Quick Start Use the gsap-core skill to write a staggered fade-in animation for my list items 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 create a staggered animation with GSAP?▼

Pass a stagger value in the vars object of gsap.to(), such as stagger: 0.1 for a fixed delay per target, or an object like { amount: 0.3, from: "center" } for advanced distribution across the targets array.

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

gsap.to() animates from the current state to the given vars, from() animates from the vars to the current state for entrances, and fromTo() defines explicit start and end values without reading current state.

Does GSAP work with React, Vue, and vanilla JavaScript?▼

Yes, GSAP is framework-agnostic and runs in React, Vue, Svelte, Astro, and vanilla JS anywhere JavaScript executes. For React-specific patterns like cleanup on unmount, use the dedicated gsap-react guidance.

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

Use gsap.matchMedia() with a reduceMotion condition such as "(prefers-reduced-motion: reduce)" and set duration to 0 or skip the animation when it matches. All animations created in the handler revert automatically when the query stops matching.

Why is my second gsap.from() animation not playing?▼

Multiple from() or fromTo() tweens on the same property conflict because immediateRender defaults to true, so the later tween overwrites the first tween's start state. Set immediateRender: false on the later tweens to fix it.

Should I animate width and height or transforms in GSAP?▼

Prefer transform aliases like x, y, scale, and rotation over layout properties such as width, height, top, and left. Transforms render faster and avoid layout recalculation, and GSAP applies them in a consistent order.

Related Skills

Explore More Software Engineering Skills→
nexu-ionexu-io
93.2k

gsap-core

Implement high-performance web animations using the GSAP core engine and tweening methods.

Official
Intermediate
brunoolfbrunoolf

gsap-timeline

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

Community
Intermediate
Gito125Gito125

gsap-core

Implements GSAP core tweens, eases, staggers, and matchMedia for DOM and SVG animation.

Community
Intermediate
DanielV-94DanielV-94

animation-designer

Create web UI animations with Framer Motion, CSS keyframes, and GSAP.

Community
Intermediate