gsap

html部分（图片和视频自行替换） css部分 js部分 这是一个非常典型且高质量的视差滚动案例，使用了业界顶尖的动画库 GSAP 及其插件 ScrollTrigger。 一、 JavaScript

GSAP ScrollTrigger 与 Timeline 深度融合，将滚动行为转化为精准动画控制器。Timeline 编排复杂动画序列，ScrollTrigger 通过 scrub（滚动同步）、pi

什么是registerEffect gsap.registerEffect() 是 GSAP（GreenSock Animation Platform） 提供的一个强大功能，用于将常用的动画逻辑封装成

什么是CustomBounce CustomBounce 是 GSAP（GreenSock Animation Platform） 提供的一个高级插件，用于自动生成逼真、可定制的“弹跳”缓动效果（bo

什么是ScrollTo ScrollToPlugin 是 GSAP（GreenSock Animation Platform） 提供的一个轻量级但非常实用的插件，用于实现 平滑、可控的页面滚动动画——

morphSVG 是什么 morphSVG 是 GSAP（GreenSock Animation Platform） 动画库中的一个高级插件（MorphSVGPlugin），专门用于实现 SVG 路径

drawSVG 是什么 drawSVG 是 GSAP（GreenSock Animation Platform）官方提供的一个强大插件 —— DrawSVGPlugin 的核心功能，专门用于以动画方式

yoyo 是什么意思 在 GSAP（GreenSock Animation Platform）中，yoyo: true 是一个控制重复动画播放方向的选项 这段代码的作用是： ✅ yoyo: true 

toggleActions: "play none none reverse" 是什么意思 位置 触发时机 说明 1. onEnter 元素从上往下滚动进入触发区间（比如进入 start 到 end

这个页面展示了使用GSAP实现的滚动动画效果。用户在滚动时，内容块逐渐淡入并移动，增强了视觉吸引力。简洁的布局和进度条提升了互动体验，展示了GSAP在网页动画中的应用。

这个页面展示了一个使用GSAP（GreenSock Animation Platform）和ScrollTrigger插件实现的滚动动画效果。用户在滚动页面时，可以看到不同的内容块逐渐淡入和移

这个页面展示了一个使用GSAP（GreenSock Animation Platform）实现的自定义动画效果示例。页面包含多个动画方块，每个方块都有不同的动画效果，如弹跳、摆动和弹性移动。用户可

这个页面展示了一个使用GSAP（GreenSock Animation Platform）实现的动画控制示例。用户可以通过一组按钮来播放、暂停、倒放和重启动画，控制三个方块的动态效果。方块在动画中

这个页面展示了一个使用GSAP（GreenSock Animation Platform）实现的交互式动画示例。页面包含一个中央的磁性按钮和多个漂浮的元素，用户在鼠标移动时，按钮会根据鼠标位置产生磁性

这个页面展示了一个使用GSAP（GreenSock Animation Platform）实现的文字动画示例。页面包含多个按钮，用户可以点击这些按钮触发不同的文字效果，包括打字机效果、词语切换和字

这个页面展示了一个使用GSAP（GreenSock Animation Platform）实现的3D立方体动画示例。用户可以通过点击按钮触发不同的动画效果，包括旋转、翻转和展开。

这个页面展示了一个使用GSAP（GreenSock Animation Platform）和SVG路径动画的示例。用户可以通过点击不同的按钮，触发方块沿着三条不同的路径（波浪形、圆形和心形）进行动画移

这个页面展示了一个使用GSAP（GreenSock Animation Platform）实现的方块动画示例。页面包含一个按钮和一个方块，用户点击按钮后，方块会从中心向外扩散、从左到右移动或随机播

这个页面是一个使用GSAP和ScrollTrigger实现的滚动动画示例。它包含两个部分：一个方块和一段文字。方块在用户滚动到特定位置时从左侧滑入并逐渐显现，而文字则在滚动到其位置时从下方淡入。页面的

这个页面展示了一个使用GSAP（GreenSock Animation Platform）实现的动画示例。页面包含三个方块，采用Flexbox布局，排列在一个容器中。通过GSAP的时间轴功能，方块