skills.rest
abhinaaaavvv
abhinaaaavvvCOMMUNITY
Explore all skills by this author →
Website𝕏@abhinaaaavvvGitHub

gsap-core

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

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

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 breakpoints and prefers-reduced-motion so animations revert cleanly and respect user accessibility settings. - Use Case: A developer building a landing page in React asks for staggered entrance animations that disable motion for reduced-motion users; this Skill produces gsap.to() code with stagger objects and a matchMedia reduceMotion condition. ## 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(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-based animation, or dynamically computed values in JavaScript.

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 through its included CSSPlugin regardless of the surrounding framework.

How do I handle prefers-reduced-motion in GSAP?▼

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.

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 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 like width, height, top, and left. Transforms render faster and avoid layout recalculation, and GSAP applies them in a consistent order across browsers.

Related Skills

Explore More Software Engineering Skills→
ayofemiadeayofemiade

gsap-scrolltrigger

Create GSAP animations and scroll-driven experiences with ScrollTrigger for web projects.

Community
Advanced
brunoolfbrunoolf

gsap-timeline

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

Community
Intermediate
James-GamboaJames-Gamboa

gsap-utils

Provide GSAP helper utilities for clamping, mapping, normalizing, and interpolating animation values.

Community
Intermediate
DanielV-94DanielV-94

animation-designer

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

Community
Intermediate