skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

gsap-core

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

1|Updated Aug 20, 2023
Search Tags:#javascript#animation#gsap#stagger#easing#tween#matchmedia
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill gsap-core-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/imanlangaran/mini-projects/tree/main/building-sell/.claude/skills/gsap-core
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill gsap-core-imanlangaran

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 duration, delay, ease, stagger, repeat, yoyo, and callback vars. - Transforms & CSS: Documents transform aliases (x, y, scale, rotation), autoAlpha, CSS variables, svgOrigin, and directional rotation suffixes. - 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 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 GSAP to animate the elements with class .card fading in with a 0.1 second stagger and respect 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.

What is the difference between gsap.to, from, and 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() takes explicit start and end objects. from() and fromTo() render their start state immediately by default.

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

Pass a stagger value in the vars object, either a number like stagger: 0.1 for seconds between each target, or an object like { amount: 0.3, from: 'center' } for advanced distribution across the targets array.

Does GSAP support prefers-reduced-motion accessibility?▼

Yes, gsap.matchMedia() accepts a '(prefers-reduced-motion: reduce)' condition so you can set duration to 0 or skip animations for users who prefer reduced motion. All animations created inside 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 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.

Should I animate CSS transforms or width and height with GSAP?▼

Prefer GSAP transform aliases like x, y, scale, and rotation over layout properties such as width, height, top, or 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→
fanguyunfanguyun

gsap-core

Create GSAP animations for DOM elements and SVGs with sequencing.

Community
Advanced
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
GuibibiGuibibi

motion

Add Vue and Nuxt animation guidance for motion components and gestures.

Community
Intermediate