GSAP文字揭示动画问题：文字未从指定水平线出现如何调整

你需要同时调整CSS代码和GSAP动画逻辑，核心问题是没有裁剪容器限制文字显示范围，以及动画属性选择和逻辑错误，具体修改如下：

调整后CSS代码 #

/* 外层裁剪容器 */
.text {
  margin: 100px;
  width: 600px;
  height: 220px; /* 调整高度适配所有文字尺寸 */
  position: absolute;
  overflow: hidden; /* 核心属性：超出容器的内容隐藏，实现裁剪效果 */
}

h1{    
  font-size: 80px;
  line-height: 1.2;
  margin: 0;
  width: 600px;
  position: absolute;
  bottom: 0; /* 初始对齐容器底部，也就是水平线位置 */
  left: 0;
  opacity: 0;
}
h2{    
  font-size: 70px;
  line-height: 1.2;
  margin: 0;
  width: 600px;
  position: absolute;
  bottom: 0; 
  left: 0;
  opacity: 0;
}
h3{    
  font-size: 60px;
  line-height: 1.2;
  margin: 0;
  width: 600px;
  position: absolute;
  bottom: 0; 
  left: 0;
  opacity: 0;
}

.line {
  position: absolute;
  width: 500px;
  left: 180px; /* 对齐text容器的left+margin */
  bottom: 100px; /* 和text容器的底部位置对齐，作为显现基准线 */
  height: 5px;
  background-color: #fff;
  z-index: 10; /* 确保线在文字上层，更符合从线里冒出来的视觉效果 */
}

调整后GSAP动画代码 #

gsap.from(".line", { width: 0, duration: 0.3 });
// 用y轴偏移实现从下往上显现效果，y:100%代表初始位置在容器底部外、水平线下方
gsap.from("h1",{y: "100%", duration: 1, delay: 0.3, opacity: 1})
gsap.from("h2",{y: "100%", duration: 1, delay: 0.6, opacity: 1})
gsap.from("h3",{y: "100%", duration: 1, delay: 0.9, opacity: 1})

核心调整说明 #

• 给外层.text添加overflow: hidden作为裁剪容器，只有进入容器范围内的文字才会显示，自然实现从水平线往上一点点“露出来”的效果
• 放弃修改height的动画逻辑，改用y轴位移动画，不会出现文字被挤压、行高错乱的问题，动画更流畅
• 错开三个标题的动画延迟时间，实现依次显现的效果，你可以根据自己的需求调整延迟和动画时长参数
• 调整line的位置和层级，对齐容器底部作为显现基准，视觉上更符合从水平线冒出来的需求

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