# GSAP 和 ScrollTrigger 开发 ## 概述 GSAP（GreenSock 动画平台）是业界领先的 JavaScript 动画库，用于创建高性能、高品质的动画。 ScrollTrigger 是 GSAP 强大的滚动驱动动画插件。它们共同实现了从简单的 UI 转换到复杂的基于滚动的故事讲述体验的一切。 ## 核心概念 ### 基础知识：补间 **补间**是从 A 点到 B 点的单个动画。 // 动画到一个状态（从当前） gsap.to(".box", { x：200，旋转：360，持续时间：1，轻松：“power2.inOut” }); // 从状态开始动画（到当前状态） gsap.from(".box", { 不透明度：0， y：-50，持续时间：0.8 }); // 动画从到到（定义开始和结束） gsap.fromTo(".box", { 不透明度: 0, 比例: 0.5 }, // 来自 { 不透明度：1，比例：1，持续时间：1 } // TO ）； ### 时间线：动画排序 **时间轴**按顺序或重叠编排多个补间。 const tl = gsap.timeline(); // 默认顺序 tl.to(".box1", { x: 100, 持续时间: 1 }) .to(".box2", { y: 100, 持续时间: 1 }) .to(".box3", { 旋转: 360, 持续时间: 1 }); // 带有组织标签 tl.addLabel("开始") .to(".hero", { 不透明度: 1, 持续时间: 1 }) .addLabel("reveal") .to(".content", { y: 0, period: 0.8 }, "reveal") // 从“reveal”标签开始 .to(".cta", { scale: 1, duration: 0.5 }, "reveal+=0.5"); //“显示”后 0.5 秒 ### 位置参数（时间线计时）控制动画在时间轴内开始的时间： const tl = gsap.timeline(); // Default: One after another tl.to(".box1", { x: 100 }) .to(".box2", { x: 100 }); // box1 完成后开始 //同时开始 tl.to(".box1", { x: 100 }) .to(".box2", { y: 100 }, 0); // 从 0 秒开始 // 相对定位 tl.to(".box1", { x: 100, 持续时间: 2 }) .to(".box2", { y: 100 }, "-=1"); // 在 box1 结束前 1 秒开始 .to(".box3", { 旋转: 360 }, "+=0.5"); // box2完成后0.5秒开始 // At a specific time tl.to(".box1", { x: 100 }, 2.5); // 2.5秒开始 ## ScrollTrigger 基础知识 ### 基本滚动动画 gsap.registerPlugin(ScrollTrigger); gsap.to(".box", { x：500，滚动触发器：{ 触发器：“.box”， start: "top center", // 当触发器顶部触及视口中心时结束：“底部中心”， markers: true, // 仅用于开发 - 显示开始/结束位置 scrap: true, // 将动画链接到滚动条 toggleActions: "play none none back" // onEnter onLeave onEnterBack onLeaveBack } }); ### 开始和结束位置格式：`"[触发位置] [视口位置]"` // 常见模式 start: "top top" // 触发顶部命中视口顶部 start: "top center" // 触发顶部命中视口中心（默认） start: "top Bottom" // 触发顶部命中视口底部 start: "center center" // 触发中心命中视口中心 // With offsets start: "top top+=100" // 视口顶部下方 100px start: "top 80%" // 视口下方 80% end: "+=500" // 起始位置后 500px end: "bottom top" // Trigger bottom hits viewport top ### 滑动（滚动同步动画） // 布尔值：直接链接到滚动条（立即）擦洗: 真实 // Number: 平滑延迟（以秒为单位） scrap: 1 // 需要 1 秒“赶上”滚动条 scrub: 0.5 // Faster, tighter feel ### 切换操作在四个滚动点控制动画： toggleActions：“播放暂停恢复重置” // 输入时 |离开 | onEnterBack |离开时 // 操作：播放、暂停、恢复、重新启动、重置、完成、反向、无常见模式： toggleActions: "play none none none" // 输入时播放一次 toggleActions: "play none none reverse" // Play forward, reverse back toggleActions: "playcompletereversereset" // 完全控制 toggleActions: "restart暂停恢复暂停" //每次输入时重新启动 ## 常见模式 ### 1\.滚动时淡入 gsap.from(".淡入", { 不透明度：0， y：50，持续时间：1，滚动触发器：{ 触发器：“.淡入”，开始：“前 80%”，结束：“前 50%”，磨砂膏：1、 Once: true // 只动画一次 } }); ### 2\.滚动时固定元素 ScrollTrigger.create({ 触发器：“.panel”， start: "top top", end: "+=500", // 固定 500px 的滚动引脚：真实， pinSpacing: true // 添加间距（默认 true） }); ### 3\.水平滚动部分 constsections = gsap.utils.toArray(".panel"); gsap.to（节，{ xPercent: -100 * (sections.length - 1), 轻松：“无”，滚动触发器：{ 触发器：“.container”，引脚：真实，磨砂膏：1、 end: () => "+=" + document.querySelector(".container").offsetWidth } }); ### 4\.视差效果 // 较慢的移动（背景层） gsap.to(".bg", { y：200，轻松：“无”，滚动触发器：{ 触发器：“.section”，开始：“顶部底部”，结束：“底部顶部”，擦洗: 真实 } }); // 更快的移动（前景层） gsap.to(".fg", { y：-100， ease: "none", 滚动触发器：{ 触发器：“.section”，开始：“顶部底部”，结束：“底部顶部”，擦洗: 真实 } }); ### 5\.滚动触发的时间线 const tl = gsap.timeline({ 滚动触发器：{ 触发器：“.container”，开始：“顶顶”，结束：“+=500”，磨砂膏：1、引脚：真实，快照：{ snapTo: "labels", // 捕捉到时间线标签持续时间：{最小值：0.2，最大值：3}， delay: 0.2, 轻松：“power1.inOut” } } }); tl.addLabel("开始") .from(".title", { 比例: 0.3, 旋转: 45, autoAlpha: 0 }) .addLabel("颜色") .from(".box", { backgroundColor: "#28a92b" }) .addLabel("旋转") .to(".box", { rotation: 360 }) .addLabel("结束"); ### 6\.批量动画（多个元素） // 循环遍历多个元素 gsap.utils.toArray(".box").forEach((box, i) => { gsap.from(框, { y：100，不透明度：0，滚动触发器：{ 触发：盒子，开始：“前 80%”，结束：“前 50%”，磨砂膏：1 } }); }); // 或者使用ScrollTrigger.batch ScrollTrigger.batch(".box", { onEnter: 批处理 => gsap.to(批处理, { 不透明度: 1, y: 0, 交错: 0.15 }), onLeave: batch => gsap.set(batch, { opacity: 0 }), 开始：“前 80%”，一次：真实 }); ### 7\.交错动画 gsap.from(".item", { y：50，不透明度：0，持续时间：0.8， stagger: 0.1, // 每项之间间隔 0.1 秒滚动触发器：{ trigger: ".grid", 开始：“前 80%” } }); // 高级交错 gsap.from(".item", { 规模：0，持续时间：1，交错：{ 每个：0.1， from: "center", // "start", "center", "end", "edges", 或索引号 grid: "auto", // 用于网格布局轻松：“power2.inOut” } }); ## 集成模式 ### 使用 Three.js / WebGL 从 '三' 导入 * 作为三；从“gsap”导入 gsap；从 'gsap/ScrollTrigger' 导入 { ScrollTrigger }； gsap.registerPlugin(ScrollTrigger); // 动画相机 gsap.to(相机.位置, { x：5， y: 3, 兹：10，滚动触发器：{ 触发器：“#section2”，开始：“顶顶”，结束：“底部顶部”，磨砂膏：1、 onUpdate: () =>camera.lookAt(scene.position) } }); // 网格旋转动画 gsap.to(网格.旋转, { y: Math.PI * 2, 滚动触发器：{ 触发器：“#section3”，开始：“顶部底部”，结束：“底部顶部”，擦洗: 真实 } }); // 动画材质属性 gsap.to（材料，{ 不透明度：0，滚动触发器：{ 触发器：“#section4”，开始：“顶部中心”，结束：“中心中心”，磨砂膏：1 } }); ### 使用 React (useGSAP Hook) 从'react'导入{useRef}；从'@gsap/react'导入{useGSAP}；从“gsap”导入 gsap；从 'gsap/ScrollTrigger' 导入 { ScrollTrigger }； gsap.registerPlugin(ScrollTrigger); 函数组件() { const 容器 = useRef(); const box = useRef(); 使用GSAP(() => { gsap.to(box.current, { x：200，滚动触发器：{ 触发器：box.current，开始：“顶部中心”，结束：“底部中心”，擦洗：真实，标记：真实 } }); }, { 范围：容器 }); // 清理范围返回（

动画框

）； } ### 在 React 中共享时间线函数应用程序（）{ const [tl, setTl] = useState(); 使用GSAP(() => { const 时间轴 = gsap.timeline(); setTl(时间线); }, []); 返回（

<圆圈时间轴={tl}索引={1}/>

）； } 函数 Box({ 时间轴, 索引 }) { const ref = useRef(); 使用GSAP(() => { 时间线 && 时间线.to(ref.current, { x: 100 }, 索引 * 0.1); }, [时间轴, 索引]); 返回

; } ### 机车涡旋整合从“机车滚动”导入 LocomotiveScroll； const 滚动条 = new LocomotiveScroll({ el: document.querySelector('[数据滚动容器]'), 平滑：真实 }); ScrollTrigger.scrollerProxy("[data-scroll-container]", { 滚动顶部（值）{ 返回参数.length ? scroller.scrollTo(value, 0, 0) :scroller.scroll.instance.scroll.y; }, 获取边界客户端矩形（）{ 返回{顶部：0，左侧：0，宽度：window.innerWidth，高度：window.innerHeight}； }, pinType: document.querySelector("[data-scroll-container]").style.transform ？ “变换”：“固定” }); ScrollTrigger.addEventListener("刷新", () =>scroller.update()); ScrollTrigger.refresh(); ## 先进技术 ### 图像序列清理 const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); 常量图像= []；常量图像计数 = 147; 常量 currentFrame = { 值: 0 }; for (让 i = 0; i < imageCount; i++) { const img = 新图像(); img.src = `./frames/frame_${i.toString().padStart(4, '0')}.jpg`; 图像.push(img); } 图片[0].onload = () => { canvas.width = images[0].width; 画布.高度=图像[0].高度; 使成为（）; }; 函数渲染（）{ context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(images[Math.floor(currentFrame.value)], 0, 0); } gsap.to(当前帧，{ 值：imageCount - 1，快照：“值”，轻松：“无”，滚动触发器：{ 触发器：画布，开始：“顶顶”，结束：“+=500%”，擦洗：真实，引脚：真实 }, onUpdate: 渲染 }); ### 平滑滚动到元素 gsap.registerPlugin(ScrollToPlugin); // 滚动到元素 gsap.to（窗口，{ 持续时间：1，滚动到：“#section2”，轻松：“power2.inOut” }); // 带偏移量 gsap.to（窗口，{ 持续时间：1.5，滚动到: { y: "#section2", offsetY: 50 }, 轻松：“expo.inOut” }); // 水平滚动 gsap.to(".container", { 持续时间：2，滚动到: { x: 1000, autoKill: true } }); ### 条件动画（媒体查询） ScrollTrigger.matchMedia({ // 桌面 “（最小宽度：800px）”：函数（）{ gsap.to(".box", { x：500，滚动触发器：{ 触发器：“.box”，开始：“顶部中心”，结束：“底部顶部”，擦洗: 真实 } }); }, // 手机 “（最大宽度：799px）”：函数（）{ gsap.to(".box", { y：200，滚动触发器：{ 触发器：“.box”，开始：“前 80%”，磨砂膏：1 } }); } }); ## 性能最佳实践 ### 1\.使用“will-change”CSS .animated-element { will-change：变换、不透明度； } ### 2\.限制重涂 // 好：动画变换/不透明度（GPU 加速） gsap.to(".box", { x: 100, 不透明度: 0.5 }); // 避免：动画布局属性 // gsap.to(".box", { 宽度: 500, 高度: 300 }); // 导致回流 ### 3\.处理 ScrollTriggers // 杀死单个触发器 const 触发器 = ScrollTrigger.create({ /* ... */ }); 触发.kill(); // 杀死所有触发器 ScrollTrigger.getAll().forEach(t => t.kill()); // 在 React 中进行清理使用GSAP(() => { const tween = gsap.to(".box", { /* ... */ }); 返回（）=> { 补间.kill(); }; }, []); ### 4\.去抖调整大小 ScrollTrigger 会自动处理此问题，但对于自定义调整大小逻辑：让 resizeTimer; window.addEventListener("调整大小", () => { 清除超时（调整大小定时器）；调整大小定时器 = setTimeout(() => { ScrollTrigger.refresh(); }, 250); }); ### 5\.使用“invalidateOnRefresh” 对于调整大小时更改的动态值： gsap.to(".box", { x: () => window.innerWidth / 2, // 动态值滚动触发器：{ 触发器：“.box”，开始：“顶部中心”， invalidateOnRefresh: true // 调整大小时重新计算 x } }); ## 常见陷阱 ### 1\. Multiple Tweens on Same Element // 问题：第二个补间与第一个补间冲突 gsap.to('h1', { x: 100,scrollTrigger: { /* ... */ } }); gsap.to('h1', { x: 200,scrollTrigger: { /* ... */ } }); // 跳跃！ // 解决方案 1：使用 fromTo gsap.fromTo('h1', { x: 100 }, { x: 200,scrollTrigger: { /* ... */ } }); // 解决方案2：使用immediateRender: false gsap.to('h1', { x: 200,immediateRender: false,scrollTrigger: { /* ... */ } }); // 解决方案 3：将 ScrollTrigger 应用于时间轴 const tl = gsap.timeline({scrollTrigger: { /* ... */ } }); tl.to('h1', { x: 100 }) .to('h1', { x: 200 }); ### 2\.不对多个元素使用循环 // 错误：一次性全部动画 gsap.to('.section', { y：-100，滚动触发器：{触发器：'.section'，擦洗：true} }); // 右：单个触发器的循环 gsap.utils.toArray('.section').forEach(section => { gsap.to（部分，{ y：-100，滚动触发器：{触发器：部分，擦洗：true} }); }); ### 3\.忘记注册插件从“gsap”导入 gsap；从 'gsap/ScrollTrigger' 导入 { ScrollTrigger }；从 'gsap/ScrollToPlugin' 导入 { ScrollToPlugin }； gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); // 必须注册！ ### 4\.时间线中的嵌套 ScrollTriggers // 错误：在时间轴中的各个补间上滚动触发 const tl = gsap.timeline(); tl.to('.box1', { x: 100,scrollTrigger: { /* ... */ } }) // 不要这样做！ .to('.box2', { y: 100,scrollTrigger: { /* ... */ } }); // 右：父时间轴上的 ScrollTrigger const tl = gsap.timeline({ 滚动触发: { /* ... */ } }); tl.to('.box1', { x: 100 }) .to('.box2', { y: 100 }); ## 缓动参考 // 功率缓动（最常见） ease: "power1.out" // 轻微减速 ease: "power2.inOut" // Smooth acceleration/deceleration ease: "power3.in" // 强加速 ease: "power4.out" // 非常强的减速 // 特殊宽松 ease: "elastic.out" // 弹性过冲 ease: "back.out" // 轻微过冲 ease: "bounce.out" // 弹跳效果 ease: "circ.inOut" // 圆周运动感觉 ease: "expo.inOut" // 指数（戏剧性） // 线性（用于滑动滚动动画） ease: "none" ## ScrollTrigger 方法 // 刷新所有ScrollTriggers（DOM改变后） ScrollTrigger.refresh(); // 获取所有ScrollTrigger const 触发器 = ScrollTrigger.getAll(); // 根据ID获取特定的触发器 const st = ScrollTrigger.getById("myTrigger"); // 终止触发器 st.kill(); // 更新触发器圣卷（500）； // Programmatically set scroll position st.enable(); st.disable(); // 全局ScrollTrigger配置 ScrollTrigger.config({ limitCallbacks: true, // 提高性能 syncInterval: 15 // 油门滚动检查（毫秒） }); // 调试模式 ScrollTrigger.defaults({ markers: true // 在所有触发器上显示标记 }); ## 资源该技能包括捆绑资源： ###参考资料/ * `api_reference.md`：快速 API 参考（补间方法、时间轴方法、ScrollTrigger 属性） * `easing_guide.md`：带有用例的视觉缓动参考 * `common_patterns.md`：常见场景的复制粘贴模式 ### 脚本/ * `generate_animation.py`：生成样板 GSAP 代码 * `timeline_builder.py`：交互式时间线序列生成器 ###资产/ * `starter_scroll/`：完整的滚动驱动站点模板 * `easings/`：缓动可视化 HTML 工具 * `examples/`：现实世界的 ScrollTrigger 示例 ## 何时使用此技能在以下情况下使用此技能： * 创建流畅的网页动画 * 构建滚动驱动的体验 * 实现视差效果 * 对复杂的动画进行排序 * 动画 DOM、SVG、Canvas 或 WebGL * 将动画与 Three.js 或 React 集成 * 建立滚动式网站 * 创建交互式 UI 过渡 For Three.js-specific animations, also reference the **threejs-webgl** skill.对于具有内置动画的 React 组件，请参考 **motion-framer** 技能。

Gsap 滚动触发

包含技能