GSAP CORE
GSAP Motion LabKinetic Studio
001—∞GSAP 动效实验室滚动 / 布局 / 拖拽 / 文字 / 路径 / SVG 六类动效演示，时长可调
MOTION
FEELS
ALIVE.
Tween 控制动作，Timeline 编排节奏，ScrollTrigger 把滚动变成时间。这个页面不是在“介绍 GSAP”，而是在用 GSAP 本身说话。
Motion engine
GSAP
ScrollTrigger
scrub: 0.55
60 FPS
motion budget
x: 240 · rotate: 360 · ease: power4.out
TWEEN
TIMELINE
SCROLLTRIGGER
PIN
SCRUB
EASING
MOTION
SVG
INTERACTION
TWEEN
TIMELINE
SCROLLTRIGGER
01 / Motion manifesto
EVERY
WORD
EVERY
CARD
EVERY
SCROLL
HAS
A RHYTHM.
SCROLLTRIGGER LIVE
Scroll is
not distance.
It is time.
01 / TRIGGER
元素进入视口，
故事开始。
trigger、start、end 决定一段滚动动画从哪里发生、在哪里结束。
02 / SCRUB
滚多少，
动画走多少。
scrub 把 Timeline 的进度和当前滚动位置绑定起来。
03 / PIN
页面在滚，
场景不走。
pin 把一个视觉场景固定下来，让内部叙事继续前进。
SCROLL
→ TIME
KEEP SCROLLING
02 / CORE API
手机纵向浏览 · 桌面滚动 →
Four
01
gsap.to()
去到目标
从元素当前状态精确动画到目标状态。
gsap.to(".box", {
x: 240,
rotation: 360,
duration: 1,
ease: "power3.out"
});02
gsap.from()
从这里来
适合页面入场、文字揭示、卡片进入与章节过渡。
gsap.from(".title", {
y: 80,
opacity: 0,
duration: 1,
ease: "power4.out"
});03
timeline()
编排节奏
把多个 Tween 组合成真正有节奏的动画叙事。
const tl = gsap.timeline();
tl.to(".box", { x: 200 })
.to(".box", { rotation: 180 })
.to(".box", { scale: 1.2 });04
ScrollTrigger
滚动控制
把页面滚动位置直接变成动画的时间轴。
gsap.to(".box", {
x: 400,
scrollTrigger: {
trigger: ".box",
start: "top 80%",
end: "bottom 30%",
scrub: 1
}
});Keep
exploring.
03 / INTERACTIVE PLAYGROUND
别只看代码，
让它动起来
修改 Tween 参数，然后执行真正的 GSAP 动画。你可以直接感受 duration、distance、rotation 和 ease 的差异。
Animation controls
修改参数并运行 Tween
Duration1.0s
Distance180px
Rotation360°
Easingpower3.out
Animation canvas
ts
gsap.to(".demo-box", {
x: 180,
rotation: 360,
duration: 1,
ease: "power3.out"
});04 / NEXT.JS + TYPESCRIPT
在 Next.js 里，
动画也要正确清理。
bash
npm install gsappackage manager
tsx
"use client";
import { useEffect, useRef } from "react";
import { gsap } from "gsap";
export default function Demo() {
const root = useRef<HTMLDivElement>(null);
useEffect(() => {
const ctx = gsap.context(() => {
gsap.from(".card", {
y: 60,
opacity: 0,
duration: 0.8,
ease: "power3.out"
});
}, root);
return () => ctx.revert();
}, []);
return <div ref={root}><div className="card">Hello GSAP</div></div>;
}tsx
"use client";
import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default function ScrollDemo() {
const root = useRef<HTMLDivElement>(null);
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
const ctx = gsap.context(() => {
gsap.to(".box", {
x: 400,
rotation: 180,
scrollTrigger: {
trigger: ".section",
start: "top top",
end: "+=1500",
scrub: 1,
pin: true
}
});
}, root);
return () => ctx.revert();
}, []);
return (
<section ref={root} className="section">
<div className="box" />
</section>
);
}use client
涉及 DOM 的动画组件应该运行在客户端。
context + revert
组件卸载时及时清理 Tween、Timeline 和 ScrollTrigger。
registerPlugin
使用 ScrollTrigger 前记得显式注册插件。
05 / PLUGIN ECOSYSTEM
Core 只是开始，
后面的东西才有意思。
滚动动画
ScrollTrigger
Trigger、Scrub、Pin、Snap，让滚动成为动画控制器。
布局切换
Flip
布局变化也能保持流畅、连续和自然。
拖拽交互
Draggable
构建拖拽、滑块、轨道和指针交互。
文字动画
SplitText
按字符、单词、行制作更细腻的文字动画。
路径动画
MotionPath
沿 SVG Path 精准移动，适合轨迹与叙事。
SVG 变形
MorphSVG
在不同 SVG Path 之间进行形态变化。
READY TO ANIMATE
Make the web
feel alive.
从 gsap.to() 开始，再逐步掌握 Timeline、ScrollTrigger 和完整插件生态。