skills.rest
Wayn-Git
Wayn-GitCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-core

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

52|3|Updated Aug 20, 2026
Search Tags:#frontend#javascript#SVG#animation#gsap#easing#tween
One-click install
npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-core-wayn-git
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/Wayn-Git/Amethyst/tree/main/agents/skills/gsap-core
Command: npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-core-wayn-git

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 common vars like duration, delay, ease, stagger, repeat, and overwrite. - Transforms & Easing: Documents transform aliases (x, y, scale, rotation), 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 handling with automatic revert. - Use Case: When a user asks to animate a card grid entrance in a React app, generate a staggered gsap.to() tween with autoAlpha, a power3.out ease, and a matchMedia block that disables motion for reduced-motion users. ## Quick Start Use the gsap-core skill to write a GSAP animation that fades in and slides up all elements with the class .card using a stagger and a power3.out ease.

Frequently Asked Questions about gsap-core

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

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

Use gsap.to(target, vars) to animate from the current state to the values in vars, for example 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 dynamic values calculated in JavaScript.

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

GSAP is framework-agnostic and runs in React, Vue, Svelte, Astro, and vanilla JavaScript anywhere JavaScript runs. It also powers Webflow Interactions, so GSAP patterns apply when debugging Webflow animations.

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

Use gsap.matchMedia() with a reduceMotion condition query and set duration to 0 or skip the animation when it matches. Animations created inside a matchMedia handler revert automatically when the query stops matching.

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

Multiple from() or fromTo() tweens on the same property of the same target conflict because immediateRender defaults to true. Set immediateRender: false on the later tweens so the first tween's end state is not overwritten before it runs.

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
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