Shopify 实用动画教程 通过 GSAP 为你的 Shopify 网站添加动态效果
通过 Bilibili 观看本期 Shopify 教程通过 Youtube 观看本期 Shopify 教程
安装
<script src="https://cdn.shopify.com/s/files/1/0568/8190/5782/files/gsap.min.js?v=1764991287"></script>比喻
如果把网页比喻成剧场，可以参考以下对照表来理解 GSAP 中的概念：
补间动画 Tween
常见的 GSAP 补间动画有种：gsap.to(), gsap.from(), gsap.fromto()
gsap.to()：从当前状态动画到指定状态gsap.from()：从指定状态动画到当前状态gsap.fromto()：明确定义起点和终点
如下图所示，gsap.to(".box", { x: 200 }) 代表将 .box 元素沿 x 轴（水平）方向往右移动 200px，点击 Run Pen 和 Rerun 可以查看动画效果。
时间轴 Timeline
决定动画按何种顺序进行。
