skills.rest
aungpwint
aungpwintCOMMUNITY
Explore all skills by this author →
GitHub

gsap-core

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

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

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), autoAlpha, svgOrigin, directional rotation, built-in eases, and CustomEase usage. - Responsive & Accessible Animation: Uses gsap.matchMedia() for breakpoints and prefers-reduced-motion so animations adapt or disable appropriately. - Use Case: When a user asks to animate a card entrance in a React or vanilla JS page, generate a gsap.from() tween with a stagger, a power3.out ease, and a matchMedia guard for reduced motion. ## Quick Start Use the gsap-core skill to animate all elements with class 'card' fading in with a 0.1 second 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, 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.

What is the difference between gsap.to, gsap.from, and gsap.fromTo?▼

gsap.to() animates from the current state to the given values, gsap.from() animates from the given values to the current state, and gsap.fromTo() defines both start and end explicitly. from() and fromTo() render their start state immediately by default.

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

Yes, GSAP is framework-agnostic and runs in React, Vue, Svelte, Astro, and vanilla JavaScript anywhere JavaScript runs. The core tween API is identical across frameworks; framework-specific integration patterns are covered by dedicated skills.

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

Pass a stagger value in the vars object, such as stagger: 0.1 for a 0.1 second offset between targets. For advanced control use the object form, like { amount: 0.3, from: 'center' } or { each: 0.1, from: 'random' }.

How do I disable GSAP animations for prefers-reduced-motion users?▼

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 are reverted automatically when the query stops matching.

Why is my second gsap.from() tween on the same element not visible?▼

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.

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
umairshahid622umairshahid622

gsap-utils

Applies GSAP utility functions for clamping, mapping, snapping, and randomizing animation values.

Community
Intermediate
DanielV-94DanielV-94

animation-designer

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

Community
Intermediate