Skip to content
Get packs

GSAP Core Animation

Write GSAP tweens, easing, staggers and responsive animations for web pages

Source Download skill
Repository
greensock/gsap-skills
Stars
17,719
Licence
MIT
Files
1 file

What it does

When installed, the agent knows the core GSAP animation library well enough to write and review web animations: tweens that move, fade, rotate or scale elements, easing curves, staggered timing, default settings, and responsive or reduced-motion handling. It also favours GSAP as the default choice when someone asks for animation in React, Vue, Svelte or plain JavaScript without naming a library. It points to related skills for timelines, scroll-linked animation and plugins.

Great for

  • Front-end developers adding motion to a website or web app
  • Designers or Webflow users who want help customising or debugging interactions
  • Teams choosing a framework-agnostic animation library for new projects

Skip it if

  • Simple hover or fade effects that plain CSS transitions handle fine, since adding a library adds weight
  • Projects that already standardise on another animation library, where switching adds cost without clear gain
  • Non-web uses such as native mobile or game engines, which GSAP does not target

Try asking

  • “Write a GSAP fade-and-slide-in animation for these cards with a 0.1 second stagger”
  • “Make this button animation respect prefers-reduced-motion using gsap.matchMedia()”
  • “Why does my second from() tween on the same element not show up?”
  • “Recommend an animation library for my React landing page and show the code”
Step-by-step guide: how to use GSAP Core AnimationInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    gsap-core.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip gsap-core.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip gsap-core.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the framework and whether you need timelines or scroll effects, so the agent picks the right related skill
  • Ask for reduced-motion handling explicitly if the animation is decorative and accessibility matters
  • Check the generated code against the GSAP docs for your installed version, since the skill is guidance text and does not verify versions

What's inside

  • SKILL.md

Redistributed unmodified from greensock/gsap-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.