gsap

Name: gsap
Author: mengto

github.com/mengto设计与 UI7.1k1.8k 次安装4 天前更新

代码仓库

关于 gsap

一项涵盖 GSAP 补间、时间轴、缓动和 ScrollTrigger 的网页动画技能，帮助开发者规划 UI 动效，并规避性能、布局和生命周期方面的常见问题。

主要功能

01补间与时间轴模式
02缓动与交错控制
03ScrollTrigger 示例
04基于变换的动画建议
05SPA 和 React 清理指导

适用场景

01编排首屏和页面入场动效
02构建滚动同步区段
03排查动画卡顿或触发问题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mengto/skills --skill gsap

安装后在 Claude Code 中输入/gsap确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

REFERENCES.md

demo/

index.html

PROMPT.md

source.json

详细介绍

GSAP (GreenSock) — Web 动画技能

使用场景

高品质的 UI／动效设计：入场动画、微交互、页面过渡
基于时间轴的序列（而非零散的 CSS 过渡）
滚动驱动的叙事（使用 ScrollTrigger）
复杂的缓动、交错动画，以及跨多个元素的编排

核心概念与 API

补间动画：
- gsap.to(targets, vars)
- gsap.from(targets, vars)
- gsap.fromTo(targets, fromVars, toVars)
时间轴：
- const tl = gsap.timeline({ defaults, repeat, yoyo, paused })
- 链式调用：tl.to(...).from(...).addLabel('x').add(() => ...)
- 位置参数：绝对位置 1.2、相对位置 "+=0.5"、重叠位置 "-=0.3"、标签 "intro"
缓动：ease: "power2.out"、"expo.inOut"、"elastic.out(1, 0.3)"
交错动画：stagger: 0.05 或 { each, from: "start|center|end|random", grid }
性能友好的属性：
- 优先使用变换（x、y、scale、rotation）和不透明度（autoAlpha）
ScrollTrigger（插件）：
- gsap.registerPlugin(ScrollTrigger)
- 内联用法：gsap.to(".box", { scrollTrigger: ".box", x: 500 })
- 高级用法：scrollTrigger: { trigger, start, end, scrub, pin, snap, markers }
- 独立用法：ScrollTrigger.create({ trigger, start, end, onUpdate, onToggle })

常见问题（及解决方法）

动画涉及布局属性（top/left/width/height）→ 卡顿
- 使用变换，添加 will-change: transform，避免强制重排。
ScrollTrigger 因触发器尺寸或溢出容器不正确而“未触发”
- 确保触发器存在且具有高度，并检查滚动容器（嵌套滚动需要配置）。
未在 SPA/React 中清理
- 使用 gsap.context()，并在卸载时还原；必要时销毁触发器（ScrollTrigger.getAll().forEach(t => t.kill())）。
FOUC／在字体或图片加载前测量
- 等布局稳定后再初始化；图片加载后运行 ScrollTrigger.refresh()。

快速示例

1) 主视觉入场动画（交错）

gsap.from(".hero [data-anim]", {
  y: 24,
  autoAlpha: 0,
  duration: 0.8,
  ease: "power2.out",
  stagger: 0.06,
});

2) 序列时间轴

const tl = gsap.timeline({ defaults: { ease: "power2.out", duration: 0.6 } });
tl.from(".nav", { y: -20, autoAlpha: 0 })
  .from(".hero-title", { y: 30, autoAlpha: 0 }, "-=0.2")
  .from(".hero-cta", { scale: 0.95, autoAlpha: 0 }, "-=0.2");

3) 滚动联动的固定区域

gsap.registerPlugin(ScrollTrigger);

gsap.timeline({
  scrollTrigger: {
    trigger: ".story",
    start: "top top",
    end: "+=800",
    scrub: 1,
    pin: true,
  },
}).to(".story .panel", { xPercent: -200 });

需求不明确时要询问用户的问题

这是静态站点还是 SPA（React/Next/Vue）？是否需要页面过渡？
是否需要滚动驱动的区域（固定／联动／吸附）？
有哪些性能限制（移动设备支持、减少动态效果）？

支持 Markdown

登录后评论