Gsap

AThevon/genjutsu/skills/_jutsu/gsap

作者 AThevon1f518a71378b15d423389e546e767cffc86e14c3无许可证431 个星标收录于 2026年10月9日更新于 2026年10月9日仓库3天前更新

GSAP animation engine sub-skill - core, timeline, ScrollTrigger, plugins.

仅含说明Software Development

AI 生成的概览

GSAP 动画库使用参考，涵盖核心补间、时间轴、ScrollTrigger 与插件。

功能: 该技能是一份仅含说明的 GSAP 3 动画引擎参考。它说明何时应选用 GSAP 而非 CSS 过渡或 Framer Motion，如何注册插件，以及如何编写核心补间、时间轴、交错与 ScrollTrigger 模式。它还列出常见错误，并指向四个随附参考文件，分别覆盖 core、timeline、ScrollTrigger 和 plugins。
适用场景: 适合在需要序列化时间轴、滚动联动效果、分布式交错、文字拆分或 SVG 变形的网页动画场景中使用。也可用于核对 GSAP 的初始化与插件注册，或对照已知陷阱检查动画代码。
运行要求: 不附带脚本，只有说明文档和四个 Markdown 参考文件。实际应用这些指导需要一个 JavaScript 项目并安装 gsap npm 包，React 中若使用 useGSAP 还需 @gsap/react。

Version-sensitive. Every API name, SDK gate and browser-support claim below was verified on 2026-09-08 against primary sources. What against, and when, is in _jutsu/VERSIONS.md. If that date is old, re-verify before acting on a version number.

GSAP - Animation Engine

GSAP 3.15 (released 13 Apr 2026). Since 3.13 the entire library - including every former Club plugin (SplitText, MorphSVG, DrawSVG, ScrollSmoother, InertiaPlugin, MotionPathHelper, CustomEase…) - ships in the public gsap npm package and is free, commercial use included, under the GreenSock Standard "no charge" license. There is no Club paywall. GreenSock also publish official agent skills (MIT, 8 skills: core, timeline, scrolltrigger, plugins, utils, react, performance, frameworks): https://github.com/greensock/gsap-skills - worth installing alongside this sub-skill.

When to use GSAP

Criteria	CSS Transitions	Framer Motion	GSAP
Hover / simple toggle	Yes	Yes	Overkill
Sequenced timeline	No	Limited	Yes
Scroll-driven	scroll-timeline	Limited	ScrollTrigger
Complex stagger	No	Basic	Distribution
Mobile perf (60fps)	Good	Average	Excellent
Text splitting	No	No	SplitText
SVG morph / draw	No	No	MorphSVG
Bundle size concern	0kb	~30kb	~25kb + plugins

Rule: if the animation needs timeline, scroll-link, or distributed stagger, use GSAP. Otherwise CSS first.

Setup

// Always register plugins at the top levelimport gsap from "gsap";import { ScrollTrigger } from "gsap/ScrollTrigger";import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(ScrollTrigger, SplitText);

// Always register plugins at the top levelimport gsap from "gsap";import { ScrollTrigger } from "gsap/ScrollTrigger";import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(ScrollTrigger, SplitText);

React: use useGSAP() from the @gsap/react package instead of useEffect + manual cleanup.

jsx

import { useGSAP } from "@gsap/react";
useGSAP(() => {  gsap.to(".box", { x: 200 });}, { scope: containerRef }); // auto-cleanup, auto-revert

import { useGSAP } from "@gsap/react";
useGSAP(() => {  gsap.to(".box", { x: 200 });}, { scope: containerRef }); // auto-cleanup, auto-revert

Core Patterns

defaults{} to avoid repetition

const tl = gsap.timeline({  defaults: { duration: 0.8, ease: "power2.out" },});tl.to(".a", { y: -20 })  .to(".b", { y: -20 }, "<0.1")  .to(".c", { y: -20 }, "<0.1");

const tl = gsap.timeline({  defaults: { duration: 0.8, ease: "power2.out" },});tl.to(".a", { y: -20 })  .to(".b", { y: -20 }, "<0.1")  .to(".c", { y: -20 }, "<0.1");

fromTo for full control

Stagger with distribution

gsap.to(".grid-item", {  scale: 0,  stagger: {    each: 0.05,    from: "center",   // "start" | "end" | "center" | "edges" | "random" | index    grid: "auto",      // auto-detects the grid    axis: "x",         // "x" | "y" | null (both)  },});

gsap.to(".grid-item", {  scale: 0,  stagger: {    each: 0.05,    from: "center",   // "start" | "end" | "center" | "edges" | "random" | index    grid: "auto",      // auto-detects the grid    axis: "x",         // "x" | "y" | null (both)  },});

ScrollTrigger Patterns

Basic Pin + Scrub

gsap.to(".panel", {  x: "-300%",  ease: "none",  scrollTrigger: {    trigger: ".container",    pin: true,    scrub: 1,    end: () => "+=" + document.querySelector(".container").scrollWidth,  },});

gsap.to(".panel", {  x: "-300%",  ease: "none",  scrollTrigger: {    trigger: ".container",    pin: true,    scrub: 1,    end: () => "+=" + document.querySelector(".container").scrollWidth,  },});

Batch for mass reveal

ScrollTrigger.batch(".card", {  onEnter: (elements) => gsap.to(elements, { opacity: 1, y: 0, stagger: 0.1 }),  start: "top 85%",});

ScrollTrigger.batch(".card", {  onEnter: (elements) => gsap.to(elements, { opacity: 1, y: 0, stagger: 0.1 }),  start: "top 85%",});

Horizontal scroll with containerAnimation

const scrollTween = gsap.to(".panels", {  x: () => -(document.querySelector(".panels").scrollWidth - window.innerWidth),  ease: "none",  scrollTrigger: { trigger: ".wrapper", pin: true, scrub: 1 },});
// Animate elements INSIDE the horizontal scrollgsap.to(".panel-content", {  scale: 1.2,  scrollTrigger: {    trigger: ".panel-content",    containerAnimation: scrollTween, // linked to horizontal scroll    start: "left center",    end: "right center",    scrub: true,  },});

const scrollTween = gsap.to(".panels", {  x: () => -(document.querySelector(".panels").scrollWidth - window.innerWidth),  ease: "none",  scrollTrigger: { trigger: ".wrapper", pin: true, scrub: 1 },});
// Animate elements INSIDE the horizontal scrollgsap.to(".panel-content", {  scale: 1.2,  scrollTrigger: {    trigger: ".panel-content",    containerAnimation: scrollTween, // linked to horizontal scroll    start: "left center",    end: "right center",    scrub: true,  },});

DO NOT - Critical mistakes

1. Ease on containerAnimation

// BAD - ease breaks the scroll mappingscrollTrigger: { containerAnimation: scrollTween, scrub: 1, ease: "power2.out" }
// GOOD - always ease: "none" on the parent tweenconst scrollTween = gsap.to(".panels", { x: ..., ease: "none", scrollTrigger: { scrub: 1 } });

// BAD - ease breaks the scroll mappingscrollTrigger: { containerAnimation: scrollTween, scrub: 1, ease: "power2.out" }
// GOOD - always ease: "none" on the parent tweenconst scrollTween = gsap.to(".panels", { x: ..., ease: "none", scrollTrigger: { scrub: 1 } });

2. ScrollTrigger on a child tween in a timeline

// BAD - ScrollTrigger ignores child tweens of a timeline that has its own ScrollTriggerconst tl = gsap.timeline({ scrollTrigger: { trigger: ".section" } });tl.to(".box", { x: 100, scrollTrigger: { trigger: ".box" } }); // IGNORE
// GOOD - one ScrollTrigger per timeline OR standalone tweensgsap.to(".box", { x: 100, scrollTrigger: { trigger: ".box" } }); // tween standalone

// BAD - ScrollTrigger ignores child tweens of a timeline that has its own ScrollTriggerconst tl = gsap.timeline({ scrollTrigger: { trigger: ".section" } });tl.to(".box", { x: 100, scrollTrigger: { trigger: ".box" } }); // IGNORE
// GOOD - one ScrollTrigger per timeline OR standalone tweensgsap.to(".box", { x: 100, scrollTrigger: { trigger: ".box" } }); // tween standalone

3. setState in onUpdate

// BAD - setState 60x/s = re-render hellscrollTrigger: { onUpdate: (self) => setProgress(self.progress) }
// GOOD - mutate a ref or DOM element directlyconst progressRef = useRef(0);scrollTrigger: { onUpdate: (self) => { progressRef.current = self.progress; } }// Or better: gsap.quickSetter to mutate the DOM without React

// BAD - setState 60x/s = re-render hellscrollTrigger: { onUpdate: (self) => setProgress(self.progress) }
// GOOD - mutate a ref or DOM element directlyconst progressRef = useRef(0);scrollTrigger: { onUpdate: (self) => { progressRef.current = self.progress; } }// Or better: gsap.quickSetter to mutate the DOM without React

4. immediateRender on from() in a timeline

// BAD - from() has immediateRender: true by default, breaks sequencingtl.to(".box", { x: 100 });tl.from(".box", { y: 50 }); // visually jumps to the start
// GOOD - disable immediateRender when from() follows another tweentl.to(".box", { x: 100 });tl.from(".box", { y: 50, immediateRender: false });

// BAD - from() has immediateRender: true by default, breaks sequencingtl.to(".box", { x: 100 });tl.from(".box", { y: 50 }); // visually jumps to the start
// GOOD - disable immediateRender when from() follows another tweentl.to(".box", { x: 100 });tl.from(".box", { y: 50, immediateRender: false });

5. Animating non-transform properties

// BAD - width/height/top/left trigger layout reflowgsap.to(".box", { width: 200, height: 200 });
// GOOD - use transforms (GPU-accelerated, composited)gsap.to(".box", { scaleX: 1.5, scaleY: 1.5 });// If actual size needed: use Flip plugin for layout transition

// BAD - width/height/top/left trigger layout reflowgsap.to(".box", { width: 200, height: 200 });
// GOOD - use transforms (GPU-accelerated, composited)gsap.to(".box", { scaleX: 1.5, scaleY: 1.5 });// If actual size needed: use Flip plugin for layout transition

Refs

references/core.md - Complete gsap.to/from/fromTo/set API, options
references/timeline.md - Timeline, position parameter, nesting
references/scrolltrigger.md - Full ScrollTrigger reference
references/plugins.md - SplitText, Flip, MorphSVG, DrawSVG, MotionPath, Observer

来源与署名

来源：AThevon/genjutsu位于skills/_jutsu/gsap提交1f518a7

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Gsap

GSAP - Animation Engine

When to use GSAP

Setup

Core Patterns

defaults{} to avoid repetition

fromTo for full control

Stagger with distribution

ScrollTrigger Patterns

Basic Pin + Scrub

Batch for mass reveal

Horizontal scroll with containerAnimation

DO NOT - Critical mistakes

1. Ease on containerAnimation

2. ScrollTrigger on a child tween in a timeline

3. setState in onUpdate

4. immediateRender on from() in a timeline

5. Animating non-transform properties

Refs

来源与署名

更多来自 AThevon/genjutsu 的技能

Framer Motion

Css Native

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices