Gsap 文字动画从某物后面

Question

我希望我的文本在加载时具有类似于本网站上的动画效果。UNFOLD svg。 Mewsunfold 我有动画，但不知道它是如何从某物后面出现的。

your text

这是我的 我的动画

代码链接 代码

我尝试过 chatgbt 和 YouTube。

Answer 1

您可以通过多种方式做到这一点，这里

CSS

方式：

body {
     margin: 0;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     background-color: #f0f0f0;
}
 .container {
     position: relative;
     overflow: hidden;
     animation: revealAnimationContainer 2s forwards;
}
 .text {
     margin: 0;
     padding: 0px;
     color: #222333;
     font-family: 'Arial', sans-serif;
     font-size: 48px;
     position: relative;
     z-index: 1;
     overflow: hidden;
     animation: revealAnimation 2s forwards;
}
 @keyframes revealAnimationContainer {
     50% {
         transform: scale(1);
    }
     100% {
         transform: scale(2.5);
    }
}
 @keyframes revealAnimation {
     0% {
         transform: translateY(100%) ;
    }
     50% {
         transform: translateY(0) ;
    }
     100% {
         transform: translateY(0);
    }
}

<div class="container">
    <h1 class="text">BOOOOM</h1> 

哦，我查了一下，你的例子中有

SVG

和

GSAP

:

const tl = gsap.timeline({ repeat: -1, yoyo: true });
gsap.set("#rectangle", { transformOrigin: "50% 100%", scaleY: 0 });
  tl.to("#rectangle", { duration: 1, scaleY: 1, ease: "power2.out" });
  tl.add("scaleAnimation");
  tl.to("#rectangle-svg", { duration: 1, scale: 2, ease: "ease.out(1, 0.3)" }, "scaleAnimation"); 

body {
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
      background-color: #f0f0f0;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

<svg id="rectangle-svg" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect id="rectangle" width="200" height="100" fill="#3498db"/>
</svg>