npx skills add https://github.com/mindrally/skills --skill gsap你是一位精通 GSAP(GreenSock 动画平台)、JavaScript 和网页动画性能的专家。在创建动画时请遵循以下指南。
// 现代 ES 模块导入
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
// 注册插件
gsap.registerPlugin(ScrollTrigger);
// 动画到某个状态
gsap.to(".element", { x: 100, duration: 1 });
// 从某个状态开始动画
gsap.from(".element", { opacity: 0, y: 50, duration: 0.5 });
// 从一个状态动画到另一个状态
gsap.fromTo(".element",
{ opacity: 0 },
{ opacity: 1, duration: 0.5 }
);
// 使用变换属性而非位置属性
gsap.to(".element", {
x: 100, // 好 - 使用变换
y: 50, // 好 - 使用变换
rotation: 45, // 好 - 使用变换
scale: 1.2, // 好 - 使用变换
// 尽量避免:left, top, width, height
});
// 启用 force3D 以利用 GPU 加速
gsap.to(".element", {
x: 100,
force3D: true // 确保 GPU 加速
});
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
// 在动画开始前应用 will-change
element.style.willChange = "transform";
gsap.to(element, {
x: 100,
onComplete: () => {
element.style.willChange = "auto"; // 动画完成后移除
}
});
// 对多个元素始终使用错开动画
gsap.to(".items", {
opacity: 1,
y: 0,
stagger: 0.1, // 防止所有元素同时动画
duration: 0.5
});
// 高级错开选项
gsap.to(".grid-items", {
scale: 1,
stagger: {
each: 0.1,
from: "center",
grid: "auto"
}
});
// 防止 CPU 峰值期间动画卡顿
gsap.ticker.lagSmoothing(1000, 16);
const tl = gsap.timeline({
defaults: { duration: 0.5, ease: "power2.out" }
});
tl.to(".header", { y: 0, opacity: 1 })
.to(".content", { y: 0, opacity: 1 }, "-=0.3") // 重叠
.to(".footer", { y: 0, opacity: 1 }, "-=0.3");
const tl = gsap.timeline();
tl.addLabel("start")
.to(".intro", { opacity: 1 })
.addLabel("middle")
.to(".main", { x: 100 })
.addLabel("end")
.to(".outro", { opacity: 0 });
// 跳转到标签
tl.play("middle");
const tl = gsap.timeline({ paused: true });
// 方法
tl.play();
tl.pause();
tl.reverse();
tl.restart();
tl.seek(1.5); // 跳转到 1.5 秒
tl.progress(0.5); // 跳转到 50%
gsap.to(".element", {
x: 500,
scrollTrigger: {
trigger: ".element",
start: "top center",
end: "bottom center",
scrub: true,
markers: false // 仅在调试时启用
}
});
ScrollTrigger.create({
trigger: ".panel",
pin: true,
start: "top top",
end: "+=500",
pinSpacing: true
});
ScrollTrigger.batch(".items", {
onEnter: (elements) => {
gsap.to(elements, {
opacity: 1,
y: 0,
stagger: 0.1
});
}
});
import { useGSAP } from "@gsap/react";
function Component() {
const containerRef = useRef(null);
useGSAP(() => {
gsap.to(".box", { x: 100 });
}, { scope: containerRef }); // 将选择器作用域限定在容器内
return <div ref={containerRef}>...</div>;
}
useGSAP(() => {
const tl = gsap.timeline();
tl.to(".element", { x: 100 });
return () => {
tl.kill(); // 在组件卸载时清理
};
}, []);
// 不好 - 每次调用都查询 DOM
gsap.to(".element", { x: 100 });
gsap.to(".element", { y: 50 });
// 好 - 缓存引用
const element = document.querySelector(".element");
gsap.to(element, { x: 100 });
gsap.to(element, { y: 50 });
// 将 NodeList 转换为数组
const items = gsap.utils.toArray(".items");
// 创建可重用的选择器
const select = gsap.utils.selector(container);
gsap.to(select(".box"), { x: 100 });
// 用户界面常用的缓动函数
gsap.to(".element", { x: 100, ease: "power2.out" }); // 减速
gsap.to(".element", { x: 100, ease: "power2.in" }); // 加速
gsap.to(".element", { x: 100, ease: "power2.inOut" }); // 两者兼具
// 用于趣味性 UI 的弹跳和弹性缓动
gsap.to(".element", { y: 0, ease: "bounce.out" });
gsap.to(".element", { scale: 1, ease: "elastic.out(1, 0.3)" });
gsap.to("path", {
strokeDashoffset: 0,
duration: 2,
ease: "none"
});
gsap.to("circle", {
attr: { r: 50, cx: 200 },
duration: 1
});
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
gsap.registerPlugin(MotionPathPlugin);
gsap.to(".element", {
motionPath: {
path: "#path",
align: "#path",
autoRotate: true
},
duration: 5
});
ScrollTrigger.defaults({
markers: process.env.NODE_ENV === "development"
});
tl.eventCallback("onUpdate", () => {
console.log(tl.progress());
});
周安装量
109
代码仓库
GitHub 星标数
42
首次出现
2026年1月25日
安全审计
安装于
gemini-cli93
opencode92
codex87
cursor85
github-copilot83
amp78
You are an expert in GSAP (GreenSock Animation Platform), JavaScript, and web animation performance. Follow these guidelines when creating animations.
// Modern ES Module import
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
// Register plugins
gsap.registerPlugin(ScrollTrigger);
// Animate TO a state
gsap.to(".element", { x: 100, duration: 1 });
// Animate FROM a state
gsap.from(".element", { opacity: 0, y: 50, duration: 0.5 });
// Animate FROM one state TO another
gsap.fromTo(".element",
{ opacity: 0 },
{ opacity: 1, duration: 0.5 }
);
// Use transforms instead of positional properties
gsap.to(".element", {
x: 100, // Good - uses transform
y: 50, // Good - uses transform
rotation: 45, // Good - uses transform
scale: 1.2, // Good - uses transform
// Avoid: left, top, width, height when possible
});
// Enable force3D for GPU acceleration
gsap.to(".element", {
x: 100,
force3D: true // Ensures GPU acceleration
});
// Apply will-change before animation
element.style.willChange = "transform";
gsap.to(element, {
x: 100,
onComplete: () => {
element.style.willChange = "auto"; // Remove after animation
}
});
// Always use stagger for multiple elements
gsap.to(".items", {
opacity: 1,
y: 0,
stagger: 0.1, // Prevents all elements animating at once
duration: 0.5
});
// Advanced stagger options
gsap.to(".grid-items", {
scale: 1,
stagger: {
each: 0.1,
from: "center",
grid: "auto"
}
});
// Prevent animation stuttering during CPU spikes
gsap.ticker.lagSmoothing(1000, 16);
const tl = gsap.timeline({
defaults: { duration: 0.5, ease: "power2.out" }
});
tl.to(".header", { y: 0, opacity: 1 })
.to(".content", { y: 0, opacity: 1 }, "-=0.3") // Overlap
.to(".footer", { y: 0, opacity: 1 }, "-=0.3");
const tl = gsap.timeline();
tl.addLabel("start")
.to(".intro", { opacity: 1 })
.addLabel("middle")
.to(".main", { x: 100 })
.addLabel("end")
.to(".outro", { opacity: 0 });
// Jump to label
tl.play("middle");
const tl = gsap.timeline({ paused: true });
// Methods
tl.play();
tl.pause();
tl.reverse();
tl.restart();
tl.seek(1.5); // Go to 1.5 seconds
tl.progress(0.5); // Go to 50%
gsap.to(".element", {
x: 500,
scrollTrigger: {
trigger: ".element",
start: "top center",
end: "bottom center",
scrub: true,
markers: false // Enable for debugging only
}
});
ScrollTrigger.create({
trigger: ".panel",
pin: true,
start: "top top",
end: "+=500",
pinSpacing: true
});
ScrollTrigger.batch(".items", {
onEnter: (elements) => {
gsap.to(elements, {
opacity: 1,
y: 0,
stagger: 0.1
});
}
});
import { useGSAP } from "@gsap/react";
function Component() {
const containerRef = useRef(null);
useGSAP(() => {
gsap.to(".box", { x: 100 });
}, { scope: containerRef }); // Scopes selectors to container
return <div ref={containerRef}>...</div>;
}
useGSAP(() => {
const tl = gsap.timeline();
tl.to(".element", { x: 100 });
return () => {
tl.kill(); // Clean up on unmount
};
}, []);
// Bad - queries DOM on every call
gsap.to(".element", { x: 100 });
gsap.to(".element", { y: 50 });
// Good - cache the reference
const element = document.querySelector(".element");
gsap.to(element, { x: 100 });
gsap.to(element, { y: 50 });
// Convert NodeList to Array
const items = gsap.utils.toArray(".items");
// Create reusable selector
const select = gsap.utils.selector(container);
gsap.to(select(".box"), { x: 100 });
// Common eases for UI
gsap.to(".element", { x: 100, ease: "power2.out" }); // Decelerate
gsap.to(".element", { x: 100, ease: "power2.in" }); // Accelerate
gsap.to(".element", { x: 100, ease: "power2.inOut" }); // Both
// Bounce and elastic for playful UI
gsap.to(".element", { y: 0, ease: "bounce.out" });
gsap.to(".element", { scale: 1, ease: "elastic.out(1, 0.3)" });
gsap.to("path", {
strokeDashoffset: 0,
duration: 2,
ease: "none"
});
gsap.to("circle", {
attr: { r: 50, cx: 200 },
duration: 1
});
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
gsap.registerPlugin(MotionPathPlugin);
gsap.to(".element", {
motionPath: {
path: "#path",
align: "#path",
autoRotate: true
},
duration: 5
});
ScrollTrigger.defaults({
markers: process.env.NODE_ENV === "development"
});
tl.eventCallback("onUpdate", () => {
console.log(tl.progress());
});
Weekly Installs
109
Repository
GitHub Stars
42
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli93
opencode92
codex87
cursor85
github-copilot83
amp78
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
4,800 周安装
图像压缩工具 - 使用 sips, cwebp, ImageMagick, Sharp 优化图片大小
13,400 周安装
AI 产品需求文档(PRD)生成指南:GitHub Copilot 技能,高效撰写技术规范
13,500 周安装
X转Markdown工具:将推文和文章转换为带元数据的Markdown格式
13,800 周安装
Vite 8 前端构建工具指南:配置、插件、SSR 与 Rolldown 迁移
14,600 周安装
Google Calendar API CLI 工具 - gws-calendar 命令行操作日历事件与资源
14,700 周安装
Google Workspace CLI gws-docs 命令:快速操作 Google 文档的开发者工具
15,300 周安装