如何实现Mewsunfold式SVG文字从遮挡物后向上GSAP加载动画

要做类似的文字弹出效果，核心是容器裁剪+组合动画：用裁剪容器把文字初始状态的大部分隐藏，再通过扩展容器范围+文字位移/缩放，模拟从遮挡物后弹出的质感。以下是具体实现步骤：

1. 调整DOM结构 #

给你的SVG文字套一个带裁剪的容器，初始只让容器显示文字底部的一小部分：

<div class="text-clip-box">
  <svg class="unfold-svg" viewBox="0 0 500 100">
    <!-- 你的SVG文字内容，比如<text>标签或路径 -->
    <text x="0" y="80" font-size="60" font-weight="bold">UNFOLD</text>
  </svg>
</div>

2. 基础样式设置 #

用overflow:hidden实现裁剪，同时给容器和SVG设置基础样式：

.text-clip-box {
  width: 500px;
  height: 15px; /* 初始只显示文字底部15px的区域 */
  overflow: hidden;
  /* 可选：给容器加背景色，模拟遮挡物的视觉效果 */
  background: #ffffff;
}

.unfold-svg {
  transform-origin: bottom center; /* 把缩放原点设在文字底部，弹出更自然 */
}

3. GSAP组合动画 #

把你已有的缩放动画，和容器高度扩展+文字向上位移绑定到同一条时间线，保证同步执行：

// 创建时间线，统一管理动画顺序
const tl = gsap.timeline();

// 动画1：扩展裁剪容器的高度，逐步露出全部文字
tl.to('.text-clip-box', {
  height: '100px', // 最终高度匹配SVG的高度
  duration: 0.7,
  ease: 'power3.out'
})

// 动画2：同步执行文字的缩放+淡入动画（和容器动画同时启动）
tl.from('.unfold-svg', {
  scale: 0.25,
  opacity: 0,
  duration: 0.7,
  ease: 'power3.out'
}, 0); // 这里的0表示和上一个动画同时开始

进阶优化点 #

• 如果需要非矩形的遮挡效果，可以用clip-path替代overflow:hidden，比如初始用clip-path: inset(90% 0 0 0)隐藏顶部90%，动画时过渡到inset(0 0 0 0)
• 可以给文字加微小的向上位移动画，配合容器高度变化，弹出感会更强：在from()里加y: 20参数
• 调整ease曲线（比如elastic.out）可以让动画更有弹性，接近参考网站的质感

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