gsap-fundamentals by bbeierle12/skill-mcp-claude
npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill gsap-fundamentals使用 GreenSock 动画平台的核心动画概念。
npm install gsap
import gsap from 'gsap';
// 基础补间动画
gsap.to('.box', {
x: 200,
duration: 1,
ease: 'power2.out'
});
| 方法 | 描述 | 使用场景 |
|---|---|---|
gsap.to() | 从当前状态 → 目标状态动画 | 最常用 |
gsap.from() | 从目标状态 → 当前状态动画 | 入场动画 |
gsap.fromTo() | 从定义的起点 → 终点动画 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 完全控制 |
gsap.set() | 立即设置属性 | 初始状态 |
// To: 当前状态 → 目标状态
gsap.to('.element', {
x: 100,
y: 50,
rotation: 360,
duration: 1
});
// From: 目标状态 → 当前状态
gsap.from('.element', {
opacity: 0,
y: -50,
duration: 0.5
});
// FromTo: 明确的起点和终点
gsap.fromTo('.element',
{ opacity: 0, scale: 0.5 }, // 起点
{ opacity: 1, scale: 1, duration: 1 } // 终点
);
// Set: 立即改变属性
gsap.set('.element', { visibility: 'visible', opacity: 0 });
gsap.to('.element', {
// 位置
x: 100, // 以像素为单位的 translateX
y: 50, // 以像素为单位的 translateY
xPercent: 50, // 以元素宽度百分比为单位的 translateX
yPercent: -100, // 以元素高度百分比为单位的 translateY
// 旋转
rotation: 360, // 以度为单位的 2D 旋转
rotationX: 45, // 围绕 X 轴的 3D 旋转
rotationY: 45, // 围绕 Y 轴的 3D 旋转
// 缩放
scale: 1.5, // 统一缩放
scaleX: 2, // 水平缩放
scaleY: 0.5, // 垂直缩放
// 倾斜
skewX: 20, // 以度为单位的水平倾斜
skewY: 10, // 以度为单位的垂直倾斜
// 变换原点
transformOrigin: 'center center',
transformPerspective: 500,
duration: 1
});
gsap.to('.element', {
// 颜色
color: '#00F5FF',
backgroundColor: '#FF00FF',
borderColor: 'rgba(255, 215, 0, 0.5)',
// 尺寸
width: 200,
height: '50%',
padding: 20,
margin: '10px 20px',
// 显示
opacity: 0.8,
visibility: 'visible',
display: 'block',
// 边框
borderRadius: '50%',
borderWidth: 2,
// 阴影
boxShadow: '0 0 20px rgba(0, 245, 255, 0.5)',
duration: 1
});
gsap.to('svg path', {
// 路径变形 (需要 MorphSVGPlugin)
morphSVG: '#targetPath',
// 绘制 SVG
strokeDashoffset: 0,
drawSVG: '100%',
// SVG 属性
attr: {
cx: 100,
cy: 100,
r: 50,
fill: '#00F5FF'
},
duration: 2
});
gsap.to('.element', {
x: 100,
duration: 1, // 动画长度(秒)
delay: 0.5, // 开始前等待时间
repeat: 3, // 重复 3 次(总共播放 4 次)
repeatDelay: 0.2, // 重复之间的暂停
yoyo: true // 交替重复时反向播放
});
gsap.to('.spinner', {
rotation: 360,
duration: 1,
repeat: -1, // 无限重复
ease: 'none' // 线性以获得恒定速度
});
// 使用偏移时间动画多个元素
gsap.to('.card', {
y: 0,
opacity: 1,
duration: 0.5,
stagger: 0.1 // 每个元素之间延迟 0.1 秒
});
// 高级交错
gsap.to('.grid-item', {
scale: 1,
duration: 0.3,
stagger: {
each: 0.05, // 每个之间的时间
from: 'center', // 从中心、边缘、随机等开始
grid: [4, 4], // 用于 2D 交错的网格尺寸
axis: 'x' // 沿轴交错
}
});
// 幂缓动 (1-4,数字越大效果越明显)
'power1.out' // 轻微减速
'power2.out' // 平滑减速(默认感觉)
'power3.out' // 强烈减速
'power4.out' // 非常强烈的减速
// 方向后缀
'power2.in' // 加速
'power2.out' // 减速
'power2.inOut' // 先加速后减速
// 特殊缓动
'back.out(1.7)' // 过冲然后稳定
'elastic.out' // 弹簧式弹跳
'bounce.out' // 球体下落式弹跳
'circ.out' // 圆周运动
'expo.out' // 指数型
'sine.out' // 柔和的正弦波
// UI 元素 - 快速响应
gsap.to('.button', { scale: 1.1, ease: 'power2.out', duration: 0.2 });
// 入场动画 - 平滑减速
gsap.from('.modal', { y: 100, opacity: 0, ease: 'power3.out', duration: 0.5 });
// 趣味性 - 弹跳或弹性
gsap.to('.notification', { y: 0, ease: 'back.out(1.7)', duration: 0.6 });
// 机械感 - 线性
gsap.to('.progress', { width: '100%', ease: 'none', duration: 2 });
import { CustomEase } from 'gsap/CustomEase';
gsap.registerPlugin(CustomEase);
// 从 SVG 路径创建自定义缓动
CustomEase.create('custom', 'M0,0 C0.25,0.1 0.25,1 1,1');
gsap.to('.element', {
x: 200,
ease: 'custom',
duration: 1
});
const tween = gsap.to('.element', {
x: 200,
duration: 2,
paused: true // 开始时暂停
});
// 播放控制
tween.play();
tween.pause();
tween.resume();
tween.reverse();
tween.restart();
// 跳转
tween.seek(0.5); // 跳转到 0.5 秒
tween.progress(0.5); // 跳转到 50%
tween.time(1); // 跳转到 1 秒
// 速度控制
tween.timeScale(2); // 双倍速度
tween.timeScale(0.5); // 半速
// 状态
tween.isActive(); // 当前是否正在动画?
tween.progress(); // 获取当前进度 (0-1)
// 清理
tween.kill(); // 停止并移除
gsap.to('.element', {
x: 200,
duration: 1,
// 生命周期回调
onStart: () => console.log('已开始'),
onUpdate: () => console.log('帧更新'),
onComplete: () => console.log('已完成'),
onRepeat: () => console.log('已重复'),
onReverseComplete: () => console.log('反向已完成'),
// 带参数
onComplete: (param) => console.log('完成:', param),
onCompleteParams: ['myValue'],
// 在回调中访问补间动画
onUpdate: function() {
console.log('进度:', this.progress());
}
});
// CSS 选择器
gsap.to('.class', { x: 100 });
gsap.to('#id', { x: 100 });
gsap.to('div', { x: 100 });
gsap.to('[data-animate]', { x: 100 });
gsap.to('.parent .child', { x: 100 });
// 直接元素引用
const element = document.querySelector('.box');
gsap.to(element, { x: 100 });
// NodeList / 数组
const elements = document.querySelectorAll('.item');
gsap.to(elements, { x: 100, stagger: 0.1 });
// 混合目标数组
gsap.to(['.box', '#circle', element], { opacity: 0.5 });
// 动画化任何对象属性
const obj = { value: 0, x: 100, y: 200 };
gsap.to(obj, {
value: 100,
x: 500,
duration: 2,
onUpdate: () => {
console.log(obj.value); // 插值后的值
// 更新 Three.js, Canvas 等
}
});
// 淡入
gsap.from('.element', {
opacity: 0,
duration: 0.5
});
// 淡出并移除
gsap.to('.element', {
opacity: 0,
duration: 0.5,
onComplete: () => element.remove()
});
// 从左侧滑入
gsap.from('.panel', {
x: -100,
opacity: 0,
duration: 0.5,
ease: 'power2.out'
});
// 从底部滑入
gsap.from('.notification', {
y: 50,
opacity: 0,
duration: 0.4,
ease: 'power3.out'
});
// 弹出进入
gsap.from('.modal', {
scale: 0.8,
opacity: 0,
duration: 0.3,
ease: 'back.out(1.7)'
});
// 脉动
gsap.to('.heart', {
scale: 1.2,
duration: 0.3,
repeat: -1,
yoyo: true,
ease: 'power1.inOut'
});
倒计时特定动画:
// 数字翻转动画
function flipDigit(element, newValue) {
gsap.to(element, {
rotationX: -90,
opacity: 0,
duration: 0.3,
ease: 'power2.in',
onComplete: () => {
element.textContent = newValue;
gsap.fromTo(element,
{ rotationX: 90, opacity: 0 },
{ rotationX: 0, opacity: 1, duration: 0.3, ease: 'power2.out' }
);
}
});
}
// 时间膨胀脉动(青色辉光)
gsap.to('.countdown-digit', {
textShadow: '0 0 30px #00F5FF, 0 0 60px #00F5FF',
duration: 0.5,
repeat: -1,
yoyo: true,
ease: 'sine.inOut'
});
// 最终倒计时强度提升
function intensifyCountdown(secondsRemaining) {
const intensity = 1 - (secondsRemaining / 60);
gsap.to('.glow-element', {
filter: `brightness(${1 + intensity})`,
duration: 0.5
});
}
// 使用变换而非布局属性
// 推荐
gsap.to('.element', { x: 100, y: 50, scale: 1.2 });
// 避免(触发布局)
gsap.to('.element', { left: 100, top: 50, width: 200 });
// 强制 GPU 加速
gsap.set('.element', { force3D: true });
// 组件卸载时终止补间动画
const tween = gsap.to('.element', { x: 100 });
// 稍后...
tween.kill();
// 或终止目标上的所有补间动画
gsap.killTweensOf('.element');
gsap-sequencing 了解时间线和复杂序列gsap-react 了解 React 集成模式gsap-scrolltrigger 了解基于滚动的动画每周安装量
177
代码仓库
GitHub 星标数
7
首次出现
2026年1月22日
安全审计
安装于
opencode149
codex144
gemini-cli141
github-copilot132
cursor123
claude-code115
Core animation concepts with GreenSock Animation Platform.
npm install gsap
import gsap from 'gsap';
// Basic tween
gsap.to('.box', {
x: 200,
duration: 1,
ease: 'power2.out'
});
| Method | Description | Use Case |
|---|---|---|
gsap.to() | Animate from current → target | Most common |
gsap.from() | Animate from target → current | Entrance animations |
gsap.fromTo() | Animate from defined start → end | Full control |
gsap.set() | Instantly set properties | Initial state |
// To: current state → target
gsap.to('.element', {
x: 100,
y: 50,
rotation: 360,
duration: 1
});
// From: target → current state
gsap.from('.element', {
opacity: 0,
y: -50,
duration: 0.5
});
// FromTo: explicit start and end
gsap.fromTo('.element',
{ opacity: 0, scale: 0.5 }, // from
{ opacity: 1, scale: 1, duration: 1 } // to
);
// Set: instant property change
gsap.set('.element', { visibility: 'visible', opacity: 0 });
gsap.to('.element', {
// Position
x: 100, // translateX in pixels
y: 50, // translateY in pixels
xPercent: 50, // translateX as percentage of element width
yPercent: -100, // translateY as percentage of element height
// Rotation
rotation: 360, // 2D rotation in degrees
rotationX: 45, // 3D rotation around X axis
rotationY: 45, // 3D rotation around Y axis
// Scale
scale: 1.5, // Uniform scale
scaleX: 2, // Horizontal scale
scaleY: 0.5, // Vertical scale
// Skew
skewX: 20, // Horizontal skew in degrees
skewY: 10, // Vertical skew in degrees
// Transform origin
transformOrigin: 'center center',
transformPerspective: 500,
duration: 1
});
gsap.to('.element', {
// Colors
color: '#00F5FF',
backgroundColor: '#FF00FF',
borderColor: 'rgba(255, 215, 0, 0.5)',
// Dimensions
width: 200,
height: '50%',
padding: 20,
margin: '10px 20px',
// Display
opacity: 0.8,
visibility: 'visible',
display: 'block',
// Border
borderRadius: '50%',
borderWidth: 2,
// Shadow
boxShadow: '0 0 20px rgba(0, 245, 255, 0.5)',
duration: 1
});
gsap.to('svg path', {
// Path morphing (requires MorphSVGPlugin)
morphSVG: '#targetPath',
// Draw SVG
strokeDashoffset: 0,
drawSVG: '100%',
// SVG attributes
attr: {
cx: 100,
cy: 100,
r: 50,
fill: '#00F5FF'
},
duration: 2
});
gsap.to('.element', {
x: 100,
duration: 1, // Animation length in seconds
delay: 0.5, // Wait before starting
repeat: 3, // Repeat 3 times (4 total plays)
repeatDelay: 0.2, // Pause between repeats
yoyo: true // Reverse on alternate repeats
});
gsap.to('.spinner', {
rotation: 360,
duration: 1,
repeat: -1, // Infinite repeat
ease: 'none' // Linear for constant speed
});
// Animate multiple elements with offset timing
gsap.to('.card', {
y: 0,
opacity: 1,
duration: 0.5,
stagger: 0.1 // 0.1s delay between each element
});
// Advanced stagger
gsap.to('.grid-item', {
scale: 1,
duration: 0.3,
stagger: {
each: 0.05, // Time between each
from: 'center', // Start from center, edges, random, etc.
grid: [4, 4], // Grid dimensions for 2D stagger
axis: 'x' // Stagger along axis
}
});
// Power eases (1-4, higher = more pronounced)
'power1.out' // Subtle deceleration
'power2.out' // Smooth deceleration (default feel)
'power3.out' // Strong deceleration
'power4.out' // Very strong deceleration
// Directional suffixes
'power2.in' // Accelerate
'power2.out' // Decelerate
'power2.inOut' // Accelerate then decelerate
// Special eases
'back.out(1.7)' // Overshoot then settle
'elastic.out' // Springy bounce
'bounce.out' // Ball-drop bounce
'circ.out' // Circular motion
'expo.out' // Exponential
'sine.out' // Gentle sine wave
// UI Elements - snappy, responsive
gsap.to('.button', { scale: 1.1, ease: 'power2.out', duration: 0.2 });
// Entrances - smooth deceleration
gsap.from('.modal', { y: 100, opacity: 0, ease: 'power3.out', duration: 0.5 });
// Playful - bounce or elastic
gsap.to('.notification', { y: 0, ease: 'back.out(1.7)', duration: 0.6 });
// Mechanical - linear
gsap.to('.progress', { width: '100%', ease: 'none', duration: 2 });
import { CustomEase } from 'gsap/CustomEase';
gsap.registerPlugin(CustomEase);
// Create custom ease from SVG path
CustomEase.create('custom', 'M0,0 C0.25,0.1 0.25,1 1,1');
gsap.to('.element', {
x: 200,
ease: 'custom',
duration: 1
});
const tween = gsap.to('.element', {
x: 200,
duration: 2,
paused: true // Start paused
});
// Playback control
tween.play();
tween.pause();
tween.resume();
tween.reverse();
tween.restart();
// Seeking
tween.seek(0.5); // Jump to 0.5 seconds
tween.progress(0.5); // Jump to 50%
tween.time(1); // Jump to 1 second
// Speed control
tween.timeScale(2); // Double speed
tween.timeScale(0.5); // Half speed
// State
tween.isActive(); // Currently animating?
tween.progress(); // Get current progress (0-1)
// Cleanup
tween.kill(); // Stop and remove
gsap.to('.element', {
x: 200,
duration: 1,
// Lifecycle callbacks
onStart: () => console.log('Started'),
onUpdate: () => console.log('Frame update'),
onComplete: () => console.log('Finished'),
onRepeat: () => console.log('Repeated'),
onReverseComplete: () => console.log('Reverse finished'),
// With parameters
onComplete: (param) => console.log('Done:', param),
onCompleteParams: ['myValue'],
// Access tween in callback
onUpdate: function() {
console.log('Progress:', this.progress());
}
});
// CSS selectors
gsap.to('.class', { x: 100 });
gsap.to('#id', { x: 100 });
gsap.to('div', { x: 100 });
gsap.to('[data-animate]', { x: 100 });
gsap.to('.parent .child', { x: 100 });
// Direct element reference
const element = document.querySelector('.box');
gsap.to(element, { x: 100 });
// NodeList / Array
const elements = document.querySelectorAll('.item');
gsap.to(elements, { x: 100, stagger: 0.1 });
// Array of mixed targets
gsap.to(['.box', '#circle', element], { opacity: 0.5 });
// Animate any object property
const obj = { value: 0, x: 100, y: 200 };
gsap.to(obj, {
value: 100,
x: 500,
duration: 2,
onUpdate: () => {
console.log(obj.value); // Interpolated value
// Update Three.js, Canvas, etc.
}
});
// Fade in
gsap.from('.element', {
opacity: 0,
duration: 0.5
});
// Fade out and remove
gsap.to('.element', {
opacity: 0,
duration: 0.5,
onComplete: () => element.remove()
});
// Slide in from left
gsap.from('.panel', {
x: -100,
opacity: 0,
duration: 0.5,
ease: 'power2.out'
});
// Slide in from bottom
gsap.from('.notification', {
y: 50,
opacity: 0,
duration: 0.4,
ease: 'power3.out'
});
// Pop in
gsap.from('.modal', {
scale: 0.8,
opacity: 0,
duration: 0.3,
ease: 'back.out(1.7)'
});
// Pulse
gsap.to('.heart', {
scale: 1.2,
duration: 0.3,
repeat: -1,
yoyo: true,
ease: 'power1.inOut'
});
Countdown-specific animations:
// Digit flip animation
function flipDigit(element, newValue) {
gsap.to(element, {
rotationX: -90,
opacity: 0,
duration: 0.3,
ease: 'power2.in',
onComplete: () => {
element.textContent = newValue;
gsap.fromTo(element,
{ rotationX: 90, opacity: 0 },
{ rotationX: 0, opacity: 1, duration: 0.3, ease: 'power2.out' }
);
}
});
}
// Time dilation pulse (cyan glow)
gsap.to('.countdown-digit', {
textShadow: '0 0 30px #00F5FF, 0 0 60px #00F5FF',
duration: 0.5,
repeat: -1,
yoyo: true,
ease: 'sine.inOut'
});
// Final countdown intensity ramp
function intensifyCountdown(secondsRemaining) {
const intensity = 1 - (secondsRemaining / 60);
gsap.to('.glow-element', {
filter: `brightness(${1 + intensity})`,
duration: 0.5
});
}
// Use transforms over layout properties
// GOOD
gsap.to('.element', { x: 100, y: 50, scale: 1.2 });
// AVOID (triggers layout)
gsap.to('.element', { left: 100, top: 50, width: 200 });
// Force GPU acceleration
gsap.set('.element', { force3D: true });
// Kill tweens when component unmounts
const tween = gsap.to('.element', { x: 100 });
// Later...
tween.kill();
// Or kill all tweens on a target
gsap.killTweensOf('.element');
gsap-sequencing for timelines and complex sequencesgsap-react for React integration patternsgsap-scrolltrigger for scroll-based animationsWeekly Installs
177
Repository
GitHub Stars
7
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode149
codex144
gemini-cli141
github-copilot132
cursor123
claude-code115
网页可访问性(A11y)开发指南:实现WCAG合规、键盘导航与屏幕阅读器支持
12,600 周安装