skills.rest
Dhruv-Ghanchi
Dhruv-GhanchiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-core

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

Updated Jul 26, 2026
Search Tags:#javascript#animation#gsap#stagger#easing#tween#matchmedia
One-click install
npx skills add https://github.com/Dhruv-Ghanchi/Portfolio-Webiste --skill gsap-core-dhruv-ghanchi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/Dhruv-Ghanchi/Portfolio-Webiste/tree/main/.agents/skills/gsap-core
Command: npx skills add https://github.com/Dhruv-Ghanchi/Portfolio-Webiste --skill gsap-core-dhruv-ghanchi

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, and overwrite. - Transforms & Easing: Documents transform aliases (x, y, scale, rotation), autoAlpha, directional rotation, and the full built-in ease catalog plus CustomEase. - Responsive & Accessible Animation: Uses gsap.matchMedia() for breakpoints and prefers-reduced-motion handling with automatic revert. - Use Case: When a user asks to animate a list of cards fading in on a React page, the Skill produces a staggered gsap.to() tween with autoAlpha, a power ease, and a matchMedia guard for reduced motion. ## Quick Start Use the gsap-core skill to write a GSAP animation that staggers my '.card' elements fading in with a power3.out ease and 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.

What is the best JavaScript animation library for React or Vue?▼

GSAP is a framework-agnostic animation library that works in React, Vue, Svelte, and vanilla JS. It provides timeline sequencing, ScrollTrigger for scroll-driven animation, and runtime control like pause, reverse, and seek.

How do I stagger animations across multiple elements in GSAP?▼

Pass a stagger value in the vars object, such as stagger: 0.1 for 0.1 seconds between items, or an object like { amount: 0.3, from: 'center' } for advanced distribution across the targets array.

Does GSAP support prefers-reduced-motion accessibility?▼

Yes, gsap.matchMedia() lets you add a '(prefers-reduced-motion: reduce)' condition and set duration to 0 or skip animation when it matches. All animations created inside a matchMedia handler revert automatically when the query stops matching.

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

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

When should I use GSAP instead of CSS animations?▼

Prefer GSAP when you need timeline sequencing, runtime control like pause and reverse, complex easing, scroll-based animation, or dynamic values computed in JavaScript. CSS animations are sufficient only for simple transitions.

Related Skills

Explore More Software Engineering Skills→
SharmaAnurag99SharmaAnurag99

gsap-core

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

Community
Intermediate
brunoolfbrunoolf

gsap-timeline

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

Community
Intermediate
Carlosfwd86Carlosfwd86

gsap-performance

Optimize GSAP animations with transform-based motion and cleanup for reduced jank.

Community
Intermediate
beardcoderbeardcoder

css-animate

Create composited CSS animations with scroll-driven effects and reduced-motion fallbacks.

Community
Advanced