没有其他库能同时提供如此先进的序列编排、可靠性和精细控制,同时还能解决超过 1200 万个网站上的实际问题。
GSAP 能绕过无数浏览器兼容性问题——你的动画就是能正常运行。GSAP 的核心是一个高速属性操纵器,能以极高精度随时间更新数值。它的速度比 jQuery 快 20 倍!
GSAP 的核心是一个高速属性操纵器,能以极高精度随时间更新数值。通过智能优化 GPU 加速属性,避免布局抖动,确保 60fps 流畅运行。
完全灵活,可以在任何地方使用。不依赖任何其他库,体积小巧,加载迅速。
行业标准级滚动驱动动画插件,用极少代码实现令人惊叹的滚动效果。
绕过无数浏览器兼容性问题,你的动画在所有主流浏览器中都能正常运行。
gsap.matchMedia() 让构建响应式动画变得轻而易举。自动处理不同屏幕尺寸的动画逻辑,支持 prefers-reduced-motion 无障碍偏好。
向下滚动,体验 GSAP ScrollTrigger 的力量——固定、联动、视差,一切随你掌控。
ScrollTrigger 让你用几行代码就能创建复杂的滚动动画。无需繁琐的事件监听,无需手动计算滚动位置。
gsap.to('.box', { scrollTrigger: { trigger: '.box', start: 'top center', scrub: true }, rotation: 360, duration: 3 });
将元素固定在视口中,同时驱动动画进度,创造沉浸式叙事体验。
不同元素以不同速度移动,营造深度和空间感。每一层都有自己节奏。
可选插件和缓动函数让你轻松实现高级效果——滚动、变形、文本拆分、运动路径、FLIP 动画……应有尽有。
行业标准级滚动驱动动画。创建令人惊叹的滚动效果——固定、联动、视差、进度条,用极少的代码实现。
将文本拆分为字符、单词或行,实现逐字逐行的精细动画。创建引人注目的标题动画和文字效果。
在任意两个 SVG 路径之间实现平滑变形动画。从圆形到星形,从简单到复杂,变形从未如此优雅。
让元素沿任意 SVG 路径运动。创建曲线飞行、轨道旋转、波浪前进等复杂运动轨迹。
First-Last-Invert-Play 技术。在任何状态变化之间创建平滑过渡动画——列表重排、布局变化、视图切换。
在浏览器和设备间标准化事件检测。统一处理鼠标、触摸、滚轮、指针事件,简化跨平台交互开发。
无论你使用 CDN、NPM 还是模块打包器,GSAP 都能轻松集成到你的项目中。核心库包含所有实用方法和缓动函数。
感谢 Webflow,GSAP 现在完全免费,包括所有高级插件如 SplitText、MorphSVG 以及其他 Club GSAP 会员专属功能。即使是商业用途也完全免费!
<!-- GSAP 核心 --> <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script> <!-- ScrollTrigger 插件 --> <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
npm install gsap
// 典型导入方式 import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import Flip from "gsap/Flip"; import Draggable from "gsap/Draggable"; // 别忘了注册插件 gsap.registerPlugin(ScrollTrigger, Draggable, Flip);