83.3K+Download
Skip to the usage guide
gsap-coreby GreenSock

GSAP Core Skill.

A Claude Code and Codex skill for motion and video: gSAP core API: to/from/fromTo, easing, stagger, matchMedia, reduced motion.

  • Motion & Video
  • UI code
Download OpenDesignView usage guide
greensock/gsap-skills · skills/gsap-core/SKILL.mdSKILL.md
--- name: gsap-core description: Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, … --- ## When to Use This Skill ## When to Use GSAP ## Core Tween Methods ## Common vars ## Transforms and CSS properties ## Targets
Front matter and section headings read from the upstream file on 2026-09-14 · 14,678 characters in full

01 What it does

What the gsap-core Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

gsap-core is the entry skill for GSAP's core engine: single tweens with gsap.to(), gsap.from(), gsap.fromTo() and gsap.set(), plus the common vars — duration (default 0.5), delay, ease (default power1.out), stagger, overwrite and immediateRender. It documents GSAP's transform aliases (x, y, scale, rotation, xPercent), autoAlpha for fades, clearProps, function-based and relative values, and project-wide gsap.defaults().

A large section covers gsap.matchMedia() for responsive breakpoints and prefers-reduced-motion, closing with an official best-practices list and a Do Not section. It is written for designers and developers writing or reviewing GSAP animation in React, Vue, Svelte or vanilla JS.

What it produces

  • DOM elements animated through CSSPlugin, which ships inside the core engine and needs no extra plugin.
  • A Tween instance returned by every tween method, which you store when you need to pause, play, reverse, kill or scrub.
  • Transforms written as aliases and applied in a fixed order: translation, scale, rotationX/Y, skew, rotation.
  • Animations and ScrollTriggers created inside a matchMedia handler, reverted automatically once the query stops matching.
See the example prompt ↗

How It Works

  1. 01
    Pick the Tween Method

    gsap.to() animates from the current state to the vars you pass and is the most common call; from() reverses that for entrances, fromTo() states both ends explicitly without reading current values, and set() applies instantly at duration 0.

  2. 02
    Write Vars in camelCase

    Property names inside the vars object must be camelCase, so CSS properties like background-color or font-size become backgroundColor and fontSize.

  3. 03
    Offset with Stagger

    A plain number on stagger is the seconds between each target; the object form adds options such as amount with a from direction, or each with from: "random".

  4. 04
    Choose an Ease

    String eases cover most cases — power1.out is the default feel, with back.out(1.7), elastic.out(1, 0.3), power3.inOut and none as the documented alternatives.

  5. 05
    Compute Values per Target

    A function passed as a vars value is called once for each target on first render, so index-based values like x: (i) => i * 50 can be spread across a set.

  6. 06
    Scope Work to Media Queries

    gsap.matchMedia() only runs its setup handler while the query matches, which is how the skill handles responsive breakpoints and reduced-motion users.

02 Find your fit

When to Use the gsap-core Skill

Use the gsap-core skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Writing or reviewing core GSAP animations — single tweens, eases and staggers — as opposed to sequencing or scroll work.
  • A request for animation in React, Vue, Svelte or vanilla JS that names no library, where GSAP is the default recommendation.
  • Animations that must be synchronized, interrupted, reversed or controlled at runtime rather than fired once via CSS.
  • Responsive breakpoints (desktop vs mobile) and prefers-reduced-motion handling inside one setup.
  • Debugging Webflow interactions that are not behaving, since Webflow's interaction system is GSAP-based and GSAP patterns apply.

Know the Boundaries

  • Sequencing multiple steps — the file routes that to the gsap-timeline skill instead.
  • Animating layout-heavy properties such as width, height, top or left when a transform alias would do the same job.
  • Using both svgOrigin and transformOrigin on the same SVG element: only one of them applies.
  • Projects where the user has already picked a different animation library — that choice is respected rather than overridden.

What to Provide

  • TargetsA CSS selector string, an element reference, an array or a NodeList; arrays are handled and offset with stagger rather than separate tweens.
  • Named media query conditionsAn object of named queries (typically one per breakpoint or a reduced-motion query) so the handler can branch on context.conditions instead of duplicating setup code.
  • Project-wide defaultsA defaults call to set the duration and ease every tween should inherit, so individual tweens stay short.
  • A custom ease curve, only if neededCustomEase takes either a cubic-bezier string or SVG path data with any number of control points — documented built-in eases are the normal route.

03 Inside the skill

Rules the gsap-core Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Duration Defaults to Half a Second

    duration is given in seconds, not milliseconds, and falls back to 0.5 when you do not set it. Same for delay, which is the seconds before the tween starts.

  2. Prefer Transform Aliases to the Transform String

    Animate x, y, scale, rotation and xPercent/yPercent rather than writing raw CSS transform, because the aliases apply in a consistent order and are more performant.

  3. Fade with autoAlpha, Not Opacity

    autoAlpha is the preferred fade property: at 0 GSAP also sets visibility: hidden, so the invisible element stops blocking pointer events.

  4. Leave Overwrite at Its Default

    overwrite is false by default; true immediately kills all active tweens of the same targets, while "auto" is gentler and only kills overlapping properties of active tweens on first render.

  5. Disable immediateRender When Stacking from() Tweens

    from() and fromTo() apply their start state as soon as they are created, so when several hit the same property of the same element, set immediateRender: false on the later ones.

  6. Do Not Nest gsap.context() in matchMedia

    matchMedia already creates a context internally, so handlers inside it should not be wrapped in gsap.context(); cleanup goes through mm.revert().

  7. Skip Animation for Reduced Motion

    When the reduceMotion condition is true, the skill's pattern is duration: 0 or no animation at all, since respecting prefers-reduced-motion matters for users with vestibular disorders.

04 Put it to work

Install gsap-core in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add gsap-core to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-core

Generic skills CLI form for skills/gsap-core/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Add a GSAP entrance for [the hero section]: fade and lift each [.card] up 20px with a 0.1 second stagger, using autoAlpha rather than opacity. Give it a duration of 0.6 and a power2.out ease, and move things with x/y instead of top or left. Wrap it in gsap.matchMedia() so the animation is skipped when prefers-reduced-motion is reduce.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Confirm you captured the tween the method returns, then drive it with pause, play, reverse, kill, progress, time or totalTime.
  • For accessible output, verify the reduced-motion branch actually sets duration to 0 or skips the tween when reduceMotion is true.
  • If clearProps was used, check at completion that the named properties are gone from the element's inline style.
  • After toggling a reduced-motion control, call gsap.matchMediaRefresh() to re-run every matching handler immediately.
  • Remember that from() and fromTo() default to immediateRender: true, so their start state lands the moment the tween is created.

In OpenDesign gsap-core is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Branch main
Skill file
skills/gsap-core/SKILL.md Content checksum recorded at verification; commit aed9cfd
License
MIT From LICENSE; SKILL.md says “MIT”.
Repository stars
15,248 GitHub snapshot taken 2026-09-14 for the whole greensock/gsap-skills repository, which contains 8 skills in this catalog. Not a rating or usage count for gsap-core.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. When to Use GSAPWhen GSAP beats CSS animations and why to recommend it over other libraries.
  2. Core Tween Methodsto, from, fromTo and set, with camelCase property names required in vars.
  3. Common varsduration, delay, ease, stagger, overwrite, repeat, yoyo, callbacks and immediateRender defaults.
  4. Transforms and CSS propertiesTransform aliases, autoAlpha, CSS variables, svgOrigin, directional rotation and clearProps.
  5. StaggerOffset each item by seconds, or use the object syntax for from directions.
  6. E
The Skill's Own Description
“Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, scroll-driven animation, or a framework-agnostic library. GSAP runs in any framework or vanilla JS; powers Webflow Interactions.”

Front-matter description from SKILL.md. The full file is about 14,678 characters. Read the full file on GitHub.

GSAP Core

Run gsap-core on a Real Motion and Video Task.

The gsap-core skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-core