skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-core

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

Updated May 5, 2026
Search Tags:#frontend#javascript#animation#gsap#easing#tween#matchmedia
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill gsap-core-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/gsap-core
Command: npx skills add https://github.com/josippapez/ai-setup --skill gsap-core-josippapez

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: Enforces camelCase properties, 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 so animations revert cleanly and respect user accessibility settings. - 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(targets, 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 states.

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 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 like '(prefers-reduced-motion: reduce)' and set duration to 0 or skip the animation when it matches. All animations created in the 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 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-heavy 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→
whimzyLivewhimzyLive
3

gsap-core

Implement GSAP core animations for DOM and SVG elements in React and Vue.

Community
Advanced
brunoolfbrunoolf

gsap-timeline

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

Community
Intermediate
coastdigitalgroupcoastdigitalgroup
2

high-performance-css-animations

Guide CSS animations using compositor-only properties like transform and opacity.

Official
Advanced
fengshao1227fengshao1227
5.9k

animate

Adds purposeful animations, micro-interactions, and motion effects to frontend features.

Community
Intermediate