GSAP 和 IntersectionObserver：文本 .from opacity:0 到 1 在动画前闪烁

Question

我正在使用 GSAP 和 IntersectionObserver 为滚动中每个 h1 的每个字符设置动画。

一切似乎都正常，但动画的 opacity 部分没有按预期工作。基本上可以看到 h1，然后它变为 opacity:0，然后又回到 1（这让我想起了臭名昭著的 Flash Of Unstyled Text）。我正在使用 .from 方法。我希望每个 h1 在动画之前都是不可见的，但我不知道我做错了什么。请检查代码段。

const titles = document.querySelectorAll("h1");
    const options = {
      root: null,
      threshold: 0.25,
      rootMargin: "-200px"
    };
    const observer = new IntersectionObserver(function(entries, observer) {
      entries.forEach(entry => {
        if (!entry.isIntersecting) {
          return;
        }
        entry.target.classList.add("anim-text");
        // TEXT SPLITTING
        const animTexts = document.querySelectorAll(".anim-text");
    
        animTexts.forEach(text => {
          const strText = text.textContent;
          const splitText = strText.split("");
          text.textContent = "";
    
          splitText.forEach(item => {
            text.innerHTML += "<span>" + item + "</span>";
          });
        });
        // END TEXT SPLITTING
    
        // TITLE ANIMATION
        const charTl = gsap.timeline();
    
        charTl.set("h1", { opacity: 1 }).from(
          ".anim-text span",
          {
            opacity: 0,
            x: 40,
            stagger: {
              amount: 1
            }
          },
          "+=0.5"
        );
        observer.unobserve(entry.target);
        // END TITLE ANIMATION
      });
    }, options);
    
    titles.forEach(title => {
      observer.observe(title);
    });

* {
  color: white;
  padding: 0;
  margin: 0;
}
.top {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  height: 100vh;
  width: 100%;
  background-color: #279AF1;
}

h1 {
  opacity: 0;
  font-size: 4rem;
}

section {
  padding: 2em;
  height: 100vh;
}

.sec-1 {
  background-color: #EA526F;
}

.sec-2 {
  background-color: #23B5D3;
}

.sec-3 {
  background-color: #F9C80E;
}

.sec-4 {
  background-color: #662E9B;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/gsap.min.js"></script>
<div class="top">Scroll Down</div>
<section class="sec-1">
  <h1>FIRST</h1>
</section>
<section class="sec-2">
  <h1>SECOND</h1>
</section>
<section class="sec-3">
  <h1>THIRD</h1>
</section>
<section class="sec-4">
  <h1>FOURTH</h1>
</section>

非常感谢您的帮助！

Answer 1

这确实是无样式内容 (FOUC) 的闪现，因为 JavaScript 等待运行直到页面加载完毕。 GreenSock居然有我推荐的a tutorial on removing FOUC

基本方法是使用 CSS 隐藏元素并修改 JS 以使用更改后的 CSS（例如将 .from() 更改为 .to() 或。从到（））。您可以通过将 h1 { opacity: 0 } 添加到 CSS 然后将以下内容添加到 JS：gsap.set(h1, {opacity: 1}); 来实现。

旁注：GSAP 有自己的 SplitText plugin，可以轻松自定义文本的拆分方式（包括按行）、处理非标准字符并添加轻松恢复为默认值的功能.如果您要拆分文本，我强烈推荐它！

GSAP 和 IntersectionObserver：文本 .from opacity:0 到 1 在动画前闪烁

GSAP and IntersectionObserver: Text .from opacity:0 to 1 flashing before animation

javascript

animation

gsap

intersection-observer