如何用GSAP实现《罗纳河的面貌》网站的环形窗帘滚动动画？

核心技术点 #

• 用gsap.to()/gsap.fromTo()驱动样式属性变化，实现半圆的形态过渡
• 用ScrollTrigger绑定滚动进度与动画进度，同步滚动行为和动画节奏

实现思路与提示 #

1. 元素结构设计：

   • 准备两个独立的半圆元素（可使用div或SVG路径），分别组成环形的两个部分
   • 初始状态让两个半圆拼接成完整环形，后续通过动画向中心收缩形成漏斗形态

2. 动画核心逻辑：

   • CSS方案：通过动态修改clip-path的参数（如圆形半径、位置），让半圆逐步向中心收缩
   • SVG方案：借助GSAP的morphSVG插件，让初始半圆路径变形为漏斗对应的目标路径
   • 滚动绑定：用ScrollTrigger的scrub属性实现滚动时动画的平滑跟随，让滚动进度直接映射为动画完成度

3. 关键GSAP命令：

   • 基础动画：gsap.to() 用于驱动元素样式/属性的渐进式变化
   • 滚动触发：ScrollTrigger.create() 配置触发范围、滚动关联等规则
   • SVG路径变形：gsap.to(element, { morphSVG: targetPath }) 实现路径的平滑过渡

简单可运行示例（CSS clip-path方案） #

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
  <style>
    body {
      height: 200vh;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .curtain-wrap {
      position: fixed;
      width: 400px;
      height: 400px;
      overflow: hidden;
    }
    .half-circle {
      position: absolute;
      width: 100%;
      height: 100%;
      background: #2c3e50;
    }
    .left-half {
      clip-path: circle(50% at 0 50%);
      left: 0;
    }
    .right-half {
      clip-path: circle(50% at 100% 50%);
      right: 0;
    }
  </style>
</head>
<body>
  <div class="curtain-wrap">
    <div class="half-circle left-half"></div>
    <div class="half-circle right-half"></div>
  </div>

  <script>
    gsap.registerPlugin(ScrollTrigger);

    // 滚动时触发两个半圆向中心收缩成漏斗
    gsap.to([".left-half", ".right-half"], {
      clipPath: "circle(20% at 50% 50%)",
      duration: 1,
      ease: "power2.inOut",
      scrollTrigger: {
        trigger: "body",
        start: "top top",
        end: "bottom bottom",
        scrub: true
      }
    });
  </script>
</body>
</html>

额外优化提示 #

• 若需要更复杂的漏斗形态，可调整clip-path的参数组合，或增加多层元素实现分层动画
• SVG方案适合精细路径控制，可提前在设计工具中绘制初始和目标路径，再通过morphSVG完成过渡
• 可通过ScrollTrigger的onUpdate回调获取实时滚动进度，自定义动画的细节变化

内容的提问来源于stack exchange，提问作者theic_ocean