gsap-performance by greensock/gsap-skills
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance当需要优化 GSAP 动画以实现流畅的 60fps、降低布局/绘制成本,或当用户询问有关性能、卡顿或快速动画最佳实践时使用。
相关技能: 使用 gsap-core(变换、autoAlpha)和 gsap-timeline 构建动画;关于 ScrollTrigger 性能,请参阅 gsap-scrolltrigger。
动画化 transform(x、y、scaleX、scaleY、rotation、rotationX、rotationY、skewX、)和 属性可以将工作保持在合成器层面,避免布局和大部分绘制。当变换可以实现相同效果时,避免动画化那些会引发大量布局的属性。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
skewYGSAP 的 x 和 y 默认使用变换(translate);用它们代替 left/top 来实现移动。
在将要进行动画的元素上使用 CSS 的 will-change 属性。它提示浏览器提升该元素的图层。
will-change: transform;
GSAP 在内部批量更新。当将 GSAP 与直接的 DOM 读写或依赖于布局的代码混合使用时,避免以导致重复布局抖动的方式交错进行读写操作。优先进行所有读取操作,然后再进行所有写入操作(或让 GSAP 一次性处理写入)。
对于经常更新的属性(例如鼠标跟随器的 x/y 坐标),优先使用 gsap.quickTo()。它会重用单个补间动画,而不是在每次更新时创建新的补间动画。
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
document.querySelector("#container").addEventListener("mousemove", (e) => {
xTo(e.pageX);
yTo(e.pageY);
});
scrub: 1)可以减少滚动期间的工作量;在低端设备上进行测试。每周安装量
1.2K
代码仓库
GitHub 星标数
1.7K
首次出现
6 天前
安全审计
安装于
codex1.1K
opencode1.1K
cursor1.1K
kimi-cli1.1K
gemini-cli1.1K
github-copilot1.1K
Apply when optimizing GSAP animations for smooth 60fps, reducing layout/paint cost, or when the user asks about performance, jank, or best practices for fast animations.
Related skills: Build animations with gsap-core (transforms, autoAlpha) and gsap-timeline ; for ScrollTrigger performance see gsap-scrolltrigger.
Animating transform (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) and opacity keeps work on the compositor and avoids layout and most paint. Avoid animating layout-heavy properties when a transform can achieve the same effect.
GSAP’s x and y use transforms (translate) by default; use them instead of left /top for movement.
Use will-change in CSS on elements that will animate. It hints the browser to promote the layer.
will-change: transform;
GSAP batches updates internally. When mixing GSAP with direct DOM reads/writes or layout-dependent code, avoid interleaving reads and writes in a way that causes repeated layout thrashing. Prefer doing all reads first, then all writes (or let GSAP handle the writes in one go).
Prefer gsap.quickTo() for properties that are updated often (e.g. mouse-follower x/y). It reuses a single tween instead of creating new tweens on each update.
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
document.querySelector("#container").addEventListener("mousemove", (e) => {
xTo(e.pageX);
yTo(e.pageY);
});
scrub: 1) can reduce work during scroll; test on low-end devices.Weekly Installs
1.2K
Repository
GitHub Stars
1.7K
First Seen
6 days ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex1.1K
opencode1.1K
cursor1.1K
kimi-cli1.1K
gemini-cli1.1K
github-copilot1.1K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装