skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

gsap-core

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

Updated Sep 1, 2026
Search Tags:#javascript#animation#gsap#stagger#easing#tween#matchmedia
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill gsap-core-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-core
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/gsap-core
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill gsap-core-zamansepeti43

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 animations are written correctly the first time. ## 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, and the full built-in ease catalog plus CustomEase. - 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 grid entrance in React with staggered timing and reduced-motion support, this Skill produces gsap.to() code with stagger, autoAlpha, and a matchMedia block. ## Quick Start Ask the AI to animate a set of elements with GSAP, for example staggering list items into view with a power3 ease and reduced-motion support.

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 vars, gsap.from() animates from the vars to the current state, and gsap.fromTo() takes explicit start and end objects. from() and fromTo() render their start state immediately unless immediateRender is false.

Should I use GSAP or CSS animations for web projects?▼

CSS animations suit simple transitions, but GSAP is preferred for timeline sequencing, runtime control like pause and reverse, complex easing, and scroll-driven animation. GSAP is framework-agnostic and works in React, Vue, Svelte, or vanilla JS.

Does GSAP support prefers-reduced-motion accessibility?▼

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

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

Pass a stagger value in the vars, either a number like stagger: 0.1 for seconds between items or an object like { amount: 0.3, from: "center" }. The from option accepts start, center, end, edges, random, or an index.

Related Skills

Explore More Software Engineering Skills→
ankaboot-sourceankaboot-source
2

gsap-core

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

Official
Intermediate
brunoolfbrunoolf

gsap-timeline

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

Community
Intermediate
aungpwintaungpwint

gsap-utils

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

Community
Intermediate
andronicsandronics
1

animation-creator

Generate performant CSS animations and transitions with compositor-only properties and prefers-reduced-motion support.

Community
Advanced