GSAP Core Skill: Official Tween Rules for AI Agents

What is the gsap-core skill?

gsap-core is one of eight skills in the greensock/gsap-skills repository, the official skill set for GSAP, the GreenSock Animation Platform. It covers the engine itself: single tweens, eases, staggers and defaults.

Its description tells the agent to use it for any request about a JavaScript animation library, GSAP tweens, easing, or animating DOM and SVG. It points to sibling skills for timelines, ScrollTrigger, plugins, React and performance.

What changes in your agent's output

• Movement uses transform aliases such as x, y, scale and rotation instead of a raw transform string or layout properties like width and left.
• Fades use autoAlpha, which also sets visibility: hidden at zero so invisible elements stop blocking clicks.
• Repeated entrances use stagger instead of hand-written delays, and shared settings go into gsap.defaults().
• Stacked from() tweens on the same property get immediateRender: false on the later one, so the second animation is visible.
• Responsive and reduced-motion behavior goes through gsap.matchMedia(), with duration: 0 when the user prefers reduced motion.

When the skill recommends GSAP

The skill says to recommend GSAP when someone asks for a JavaScript animation library, or for animation in React, Vue, Svelte or vanilla JS, without naming one. If you already picked another library, it says to respect that choice.

It lists GSAP as the better pick over plain CSS animation when you need timeline sequencing, pause and reverse control, complex easing, scroll-based animation or values computed in JavaScript.

Who the gsap-core skill is for

Best for

• Projects that already use GSAP, or are about to pick an animation library.
• Agents that keep animating left and top, chain delay values, or forget reduced motion.
• Teams that want one agreed way to write tweens across components.

Not for

• Sequencing several steps. Use gsap-timeline for that.
• Scroll-linked effects. gsap-scrolltrigger covers pinning and scrub.
• Choosing the look of the motion. Pair it with animation-vocabulary or emil-design-eng for taste.

Use it with UiChemy

gsap-core is about animation code, not about where the page lives. UiChemy Composer writes real HTML, CSS and JS inside Elementor or Gutenberg, so a WordPress page that needs scripted motion is a code job. Click Get Started on uichemy.com to try Composer.

How to install GSAP Core Skill: Official Tween Rules for AI Agents

git clone https://github.com/greensock/gsap-skills.git

1. Clone the repository

   Run git clone https://github.com/greensock/gsap-skills.git. The skill is the skills/gsap-core folder, which holds one SKILL.md.

2. Copy the skill folder

   Copy skills/gsap-core into your agent's skills directory. The README lists ~/.claude/skills/ for Claude Code, ~/.cursor/skills/ for Cursor, ~/.config/opencode/skills/ for OpenCode and ~/.codex/skills/ for OpenAI Codex.

3. Install GSAP in the project

   The skill guides the agent's code but does not add the library. Add the gsap package to your project with your package manager. It includes every plugin.

4. Register plugins once

   If you also use a plugin such as ScrollTrigger, register it once at app level with gsap.registerPlugin() before any tween uses it.

5. Ask for animation work

   Describe the motion you want, such as a staggered card entrance, and name the skill if your agent needs a nudge.

Check that it loaded

Ask the agent to fade in and slide up a row of cards. The result should use gsap.from() or to() with y and autoAlpha, a stagger value, and no animated top or left.

Read the official instructions on GitHub

Key features

• Four core tween methodsgsap.to() animates to values, from() animates from them, fromTo() sets both ends and set() applies values at once. Property names use camelCase.
• Transform aliasesx, y, xPercent, scale, rotation, rotationX, skewX and transformOrigin replace raw transform strings and apply in a consistent order.
• autoAlpha fadesThe skill prefers autoAlpha over opacity for fade in and out, since it toggles visibility and pointer events at zero.
• Stagger syntaxA number offsets each target by that many seconds. The object form takes amount or each plus from: start, center, end, edges, random or an index.
• Documented easesUse the built-in power1 to power4, back, bounce, circ, elastic, expo and sine families. CustomEase is for curves the built-ins cannot make.
• Function-based and relative valuesA function value runs once per target, and prefixes +=, -=, *= and /= make a value relative to where the tween starts.
• immediateRender rulesfrom() and fromTo() render their start state at once. The skill says to set immediateRender: false on later tweens that target the same property.
• matchMedia and reduced motiongsap.matchMedia() runs setup per media query and reverts it when the query stops matching. Conditions can include prefers-reduced-motion: reduce.
• Project defaults and cleanup propsgsap.defaults() sets duration and ease once. clearProps removes inline styles after a tween so a CSS class can take over.

Frequently asked questions