GSAP 基础教程：GreenSock 动画平台核心概念、补间动画与时间控制

gsap-fundamentals by bbeierle12/skill-mcp-claude

217 周安装量

8 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill gsap-fundamentals

JavaScript 框架用户体验前端架构

🇨🇳中文介绍

GSAP 基础

使用 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.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 了解基于滚动的动画

🇺🇸English

GSAP Fundamentals

Core animation concepts with GreenSock Animation Platform.

Quick Start

npm install gsap



import gsap from 'gsap';

// Basic tween
gsap.to('.box', {
  x: 200,
  duration: 1,
  ease: 'power2.out'
});

Core Concepts

Tween Types

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

Basic Tweens

// 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 });

Animation Properties

Transform Properties

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
});

CSS Properties

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
});

SVG Properties

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
});

Timing Controls

Duration and Delay

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
});

Infinite Repeat

gsap.to('.spinner', {
  rotation: 360,
  duration: 1,
  repeat: -1,       // Infinite repeat
  ease: 'none'      // Linear for constant speed
});

Stagger

// 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
  }
});

Easing Functions

Built-in Eases

// 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

Ease Comparison

// 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 });

Custom Easing

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
});

Controlling Tweens

Tween Instance Methods

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

Callbacks

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());
  }
});

Targeting Elements

Selector Strings

// 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 });

DOM References

// 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 });

Object Properties

// 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.
  }
});

Common Patterns

Fade In/Out

// 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 Animations

// 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'
});

Scale Animations

// 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'
});

Temporal Collapse Patterns

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
  });
}

Performance Tips

// 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');

Reference

See gsap-sequencing for timelines and complex sequences
See gsap-react for React integration patterns
See gsap-scrolltrigger for scroll-based animations

Weekly Installs

177

Repository

bbeierle12/skil…p-claude

GitHub Stars

First Seen

Jan 22, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode149

codex144

gemini-cli141

github-copilot132

cursor123

claude-code115

网页可访问性（A11y）开发指南：实现WCAG合规、键盘导航与屏幕阅读器支持

12,600 周安装

GSAP 基础教程：GreenSock 动画平台核心概念、补间动画与时间控制

🇨🇳中文介绍

GSAP 基础

快速开始

核心概念

补间动画类型

相关 Skills

基础补间动画

动画属性

变换属性

CSS 属性

SVG 属性

时间控制

持续时间和延迟

无限重复

交错动画

缓动函数

内置缓动

缓动对比

自定义缓动

控制补间动画