引入 GSAP
页面里先放 HTML，再引入 `gsap.min.js`，最后写自己的动画代码。
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>为开发者准备的快捷工具箱
少一点搜索，
多一点创造。
精选前端效果、常用 CDN 和在线工具。找到它，预览它，复制它，然后继续写你的项目。
Ctrl K
quick-start.js
READY
01 const toolkit = new DevKit();
02
03 // 查找你需要的资源
04 const result = toolkit.find({
05 type: 'effect',
06 keyword: 'smooth'
07 });
08
09 result.copy();
10 console.log('开始创造。');
运行成功
耗时 0.08s
FEATURED / 01
常用前端效果
无需从零开始，预览并复制可直接使用的代码片段。
LIBRARIES / 02
常用 CDN
UTILITIES / 03
在线工具
EFFECT LIBRARY
前端效果库
原生 HTML、CSS、JavaScript 效果，实时预览，一键复制。
没有找到匹配的效果。
CDN DIRECTORY
常用 CDN
常用前端库稳定版本地址，支持 URL 与 HTML 标签快速复制。
没有找到匹配的 CDN。
ONLINE UTILITIES
在线工具
数据只在当前浏览器处理，不上传服务器。
FORM BUILDER
可视化表单搭建器
拖入组件、调整配置，直接生成原生 HTML、CSS 和 JavaScript。
02
表单画布拖动已添加组件可调整顺序
0 个组件
+
将左侧组件拖到这里
也可以直接点击组件快速添加
GENERATED CODE
生成代码
SWIPER RECIPES
Swiper 轮播示例
基于 Swiper 12.2.0 的常用场景，联网即可预览，支持复制和下载完整 Demo。
GSAP ANIMATION
GSAP 动画教程
从引入、选择元素、基础动画、时间线到滚动触发，配套可复制 Demo。
最小示例
`gsap.to()` 表示“动画到某个状态”，适合入门第一行代码。
gsap.to(".box", {
x: 200,
rotation: 360,
duration: 1,
ease: "power2.out"
});推荐学习顺序
先学 `to/from/fromTo`，再学 `timeline`，最后加 ScrollTrigger。
- 先让一个元素动起来
- 再让一组元素错峰动
- 最后用时间线组织复杂动画
COPY READY DEMOS
常用 GSAP Demo
点击卡片查看运行效果、复制 HTML/CSS/JS 或下载完整页面。
BABY STEPS
保姆级使用步骤
- 准备结构：先写要动的 HTML，例如 `.box`、`.card`、`.title`。
- 写初始样式：元素必须有尺寸和背景，否则你可能看不见动画。
- 引入 GSAP：把 CDN 脚本放到你的动画代码前面。
- 写第一条动画：`gsap.to(".box", { x: 100, duration: 1 })`。
- 多个元素错峰：给多个元素同一个类，用 `stagger` 控制延迟。
- 复杂动画：用 `gsap.timeline()` 按步骤组织动画。
- 滚动触发：引入 ScrollTrigger，并执行 `gsap.registerPlugin(ScrollTrigger)`。
- 调试：元素不动先检查选择器、脚本加载顺序、控制台报错。