TL;DR

GSAP vừa open-source AI Skills - training set cho 40+ AI agents (Cursor, Claude Code, Copilot, Google Antigravity...) biết cách dùng đúng GreenSock Animation Platform. Kèm theo: tất cả GSAP plugins (SplitText, MorphSVG, ScrollTrigger...) giờ 100% miễn phí cho mọi người, không cần Club membership hay token. Điều này thay đổi cách AI generate animation code - từ rigid, stiff như PowerPoint sang smooth, professional motion effects.

GSAP AI Skills là gì

Sau khi Webflow mua lại GSAP, GreenSock quyết định release một thư viện training chính thức cho AI coding agents. GSAP AI Skills là bộ hướng dẫn cấu trúc theo "Agent Skills" format, dạy các AI agents cách generate animation code theo best practices.

Repository (greensock/gsap-skills trên GitHub) chứa 8 skill modules riêng biệt:

  • gsap-core: API cơ bản - gsap.to(), from(), easing, duration, stagger

  • gsap-timeline: Sequencing animations, position parameter, labels, nesting timelines

  • gsap-scrolltrigger: Scroll-driven animations, pinning, scrub effects

  • gsap-plugins: Flip, Draggable, ScrollSmoother, SplitText, physics plugins

  • gsap-react: React integration với useGSAP hook, lifecycle management

  • gsap-frameworks: Vue, Svelte - selector scoping, cleanup on unmount

  • gsap-utils: Helpers - clamp, mapRange, interpolate

  • gsap-performance: Optimization tips - transforms vs layout properties, will-change

    AI-Powered Animation Toolkit

Tại sao nó peak ?

Trước đây, AI-generated animations thường "stiff" và thiếu chuyên nghiệp. ChatGPT, Claude, Copilot không có context cụ thể về GSAP best practices, nên chúng hay generate code thiếu texture, missing features như ScrollTrigger hay Flip transitions. Kết quả: animations feel like PowerPoint slides - rigid, không có sắc thái.

Vấn đề gốc: không có "official knowledge base" cho AI agents về GSAP. Bây giờ, với AI Skills format, Cursor, Claude Code, Copilot, Google Antigravity và 35+ agents khác có thể đọc GSAP instructions và generate canonical code - smooth, professional, optimized.

Các đặc điểm chính

1. Broad AI Agent Support
Skills đã hỗ trợ 40+ agents:

  • Cursor, Claude Code (installation: npx skills add greensock/gsap-skills)

  • OpenAI Copilot, Codex, Windsurf

  • Google Antigravity

  • Pi, OpenCode, và hơn 30 agents khác

2. 100% Free for Everyone
Sau Webflow acquisition, tất cả GSAP plugins giờ miễn phí:

  • SplitText (text animation, divideLetters)

  • MorphSVG (SVG morphing)

  • ScrollSmoother (smooth scroll)

  • Draggable, Flip, physics-based plugins

  • Custom easing tools, GSDevTools debugger

Không cần .npmrc token, không cần Club membership - install từ public gsap npm package.

  • Google Antigravity support

So sánh - Trước và Sau

Tiêu chí

Trước

Sau

Plugin như SplitText, MorphSVG

Yêu cầu Club GSAP membership

100% free, public npm

AI agent animation code

Generic, không tối ưu, thiếu context

Canonical, best-practice, ScrollTrigger-aware

Pricing model

Freemium (plugins = paid)

Hoàn toàn open

AI integration

Không chính thức

Official skills repo cho 40+ agents

Giá cả & Tính khả dụng

Pricing: 100% miễn phí cho cả commercial use. GSAP library, tất cả plugins, documentations - không cần đóng tiền.

Installation:

  • CLI (recommended): npx skills add greensock/gsap-skills

  • Claude Code: /plugin marketplace add greensock/gsap-skills

  • Cursor: Settings → Rules → Remote Rule (Github) → greensock/gsap-skills

  • Manual: Clone repo, copy skills/ folder vào agent directory

Availability: Hỗ trợ Node.js 18+, works với vanilla JS, React, Vue, Svelte.

Ai nên dùng ngay

Frontend developers using AI assistants: Nếu bạn dùng Cursor hoặc Claude Code để generate animation code, install skill này ngay - AI sẽ generate tốt hơn 10x lần.

UI/UX designers implementing complex animations: High-end interactive UI requires ScrollTrigger, Flip, SplitText - tất cả giờ miễn phí, không thể miss.

React/Vue/Svelte developers: Framework-specific modules (gsap-react, gsap-frameworks) đảm bảo cleanup, lifecycle management đúng - AI agent sẽ tạo code không leak memory.

Startups & agencies: Trước đây, SplitText $99/year per dev. Giờ miễn phí - cost savings không nhỏ khi scale team.

Kết

GSAP AI Skills là milestone - nó giải quyết vấn đề "AI hallucination" trong animation code generation. Thay vì generate thứ rigid và generic, AI agents giờ có official instruction set cách dùng professional-grade animation library. Kèm theo 100% free plugins, đây là game-changer cho frontend devs muốn delegate animation work cho AI assistants.

Nếu bạn dùng Cursor, Claude Code, hay Copilot, recommend install skill này hôm nay - single command, zero cost, major productivity gain.

👉 via GitHub - greensock/gsap-skills