skills.rest
umairshahid622
umairshahid622COMMUNITY
Explore all skills by this author →
GitHub

gsap-core

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

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

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, xPercent), autoAlpha, svgOrigin, directional rotation, and the full built-in ease catalog plus CustomEase. - Responsive & Accessible Animation: Uses gsap.matchMedia() for breakpoint-based animations and prefers-reduced-motion handling with automatic revert. - Use Case: A developer building a landing page in React asks for staggered entrance animations that respect reduced-motion settings; this Skill produces gsap.to() code with stagger objects and a matchMedia conditions block. ## Quick Start Use the gsap-core skill to animate the cards on my page with a staggered fade-in 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(target, vars) to animate from the current state to the values in vars, such as gsap.to('.box', { x: 100, duration: 1 }). Use gsap.from() for entrances and gsap.fromTo() when you need explicit start and end values.

GSAP vs CSS animations: which should I use?▼

CSS animations work for simple transitions, but GSAP is preferred when you need timeline sequencing, runtime control like pause and reverse, complex easing, scroll-driven animation, or dynamically calculated values.

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

Yes, GSAP is framework-agnostic and runs in React, Vue, Svelte, Astro, and vanilla JavaScript. It animates DOM and SVG elements anywhere JavaScript runs, and it also powers Webflow Interactions.

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

Use gsap.matchMedia() with a reduceMotion condition like '(prefers-reduced-motion: reduce)'. Inside the handler, set duration to 0 or skip the animation when context.conditions.reduceMotion is true; animations revert automatically when the query stops matching.

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

from() and fromTo() default to immediateRender: true, so a later tween on the same property overwrites the first tween's end state. Set immediateRender: false on the later tweens so each animation renders correctly.

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 more performantly and apply in a consistent order across browsers.

Related Skills

Explore More Software Engineering Skills→
SharmaAnurag99SharmaAnurag99

gsap-core

Animate DOM and SVG elements with GSAP core tweens and utilities.

Community
Intermediate
DanielV-94DanielV-94

gsap-timeline

Sequence GSAP tweens with timelines, position parameters, and labels.

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