GSAP和IntersectionObserver：文本。从不透明度0到动画前闪烁1]]

Question

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

[一切似乎都正常，但是动画的opacity部分无法正常工作。基本上，人们可以先看到h1，然后再回到opacity:0，然后又回到1（这让我想起了臭名昭著的无样式文本闪烁）。我正在使用.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>

非常感谢您的帮助！

我正在使用GSAP和IntersectionObserver为滚动中每个h1的每个字符设置动画。一切似乎都正常，但动画的不透明度部分无法正常工作。基本上是一个...

Answer 1

这确实是闪烁的未样式化内容（FOUC），因为JavaScript等待运行，直到页面加载完毕。 GreenSock实际上具有我推荐的a tutorial on removing FOUC。