文字显示动画[关闭]答案

【问题标题】：Text reveal animation [closed]文字显示动画[关闭]
【发布时间】：2021-10-18 21:05:28
【问题描述】：

我得到了我想要的动画，但它并没有从我想要的地方开始。文本应该从行中“出来”，现在它还没有做到这一点。 https://jsfiddle.net/bfth5w1k/

.text {
        margin: 100px;
        width: 500px;
        height: 100px;
        position: absolute;
      }

 h1{    
        font-size: 80px;
        line-height: 200px;
        width: 600px;
        position: absolute;
        bottom: 0;
        left: 80px;
        opacity:1;
        }
 h2{    
        font-size: 70px;
        line-height: 30px;
        width: 600px;
        position: absolute;
        bottom: 0; 
        left: 80px;
        opacity:0;
        }
h3{    
        font-size: 60px;
        line-height: 150px;
        width: 600px;
        position: absolute;
        bottom: 0; 
        left: 80px;
        opacity:0;
        }

.line {
        position: absolute;
        width: 500px;
        left: 80px;
        height: 5px;
        background-color: white;
      }

  
 gsap.from(".line", { width: 0, duration: 0.3 });
 gsap.from("h1",{height:0,duration:3,delay:0.3,opacity:0})
 gsap.to("h2",{height:0,duration:3,delay:0.3,opacity:1})
 gsap.to("h3",{height:0,duration:3,delay:0.3,opacity:1})

我想不通，也许 css 需要一些调整？

【问题讨论】：

"文本应该'出来'行" - 你的意思是说，对于任何越界的文本，任何部分都应该是在它开始的线的一侧不可见，只有在它们越线时才能看到？
是的。这就是我的意思，而且文本应该在动画开始时已经在那个交叉点，所以动画的一半不会浪费在不可见的文本上。

标签： css gsap

【解决方案1】：

如果我正确理解了您的问题，那么这应该可以满足您的要求。

gsap.from(".line", {
  width: 0,
  duration: 0.3
});
gsap.from("h1", {
  height: 0,
  duration: 3,
  delay: 0.3,
  opacity: 0
})
gsap.to("h2", {
  height: 0,
  duration: 3,
  delay: 0.3,
  opacity: 1
})
gsap.to("h3", {
  height: 0,
  duration: 3,
  delay: 0.3,
  opacity: 1
})

body {
  text-align: center;
  margin: 0px;
  background-color: violet;
}

.text {
  margin: 100px;
  width: 500px;
  height: 100px;
  position: absolute;
}

h1 {
  font-size: 80px;
  line-height: 200px;
  width: 600px;
  position: absolute;
  bottom: 0;
  left: 80px;
  opacity: 1;
  z-index: -1;
  /*here*/
}

h2 {
  font-size: 70px;
  line-height: 30px;
  width: 600px;
  position: absolute;
  bottom: 0;
  left: 80px;
  opacity: 0;
  z-index: 2;
}

h3 {
  font-size: 60px;
  line-height: 150px;
  width: 600px;
  position: absolute;
  bottom: 0;
  left: 80px;
  opacity: 0;
  z-index: 2;
  /*here*/
}

.line {
  position: absolute;
  width: 500px;
  left: 80px;
  height: 5px;
  background-color: white;
  z-index: 2;
}

.cover-up {
  background-color: violet;
  position: absolute;
  top: 105px;
  left: 180px;
  height: 205px;
  width: 500px;
  z-index: 1;
  /*here*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<div class="text">

  <h1>Up</h1>
  <div class="line"></div>
  <h2>Down</h2>
  <h3>Down2</h3>

</div>
<div class="cover-up"></div>

我在该行上方添加了一个 div 元素，然后使用 z-index 将 div 放置在不同的文本之间。

【讨论】：

我将您的解决方案移动到一个可运行的 sn-p 中获得了荣誉。它似乎适用于向下的文本，但不适用于向上的文本......
好的，我改变了它，使所有文本都隐藏在行之外。我认为他们希望“down2”成为唯一被线隐藏的。
我认为他们希望“向上”隐藏直到它越界，但我可能会误解——OP可能有称重。
我又改了。希望现在这是正确的。
好吧，现在看起来“向上”是正确的，但“向下”是隐藏的——我认为他们希望 both 隐藏。但同样，这可能要由 OP 来澄清。