skills.rest
TOBIASpuchito
TOBIASpuchitoCOMMUNITY
Explore all skills by this author →
GitHub

gsap-core

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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: When a user asks to animate a list of cards fading in with staggered timing on desktop but disabled for reduced-motion users, this Skill produces the correct gsap.to() call with stagger and a matchMedia conditions block. ## 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 power2.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 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 }). Targets can be a CSS selector, element, or array, and vars use camelCase property names.

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

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

Related Skills

Explore More Software Engineering Skills→
gyalamanch001agyalamanch001a

gsap-core

Create GSAP tweens for DOM and SVG elements with matchMedia responsiveness.

Community
Intermediate
brunoolfbrunoolf

gsap-timeline

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

Community
Intermediate
Probably-GroupProbably-Group
3

motion-design

Plan UI animation strategies with safe DOM and performance constraints.

Official
Intermediate
skyf0xxskyf0xx
26

gsap-timeline

Coordinate multi-step animation sequences with GSAP timelines.

Community
Intermediate