GSAP и IntersectionObserver: Text. От непрозрачности: от 0 до 1 мигает перед анимацией - PullRequest
Новая
       92

GSAP и IntersectionObserver: Text. От непрозрачности: от 0 до 1 мигает перед анимацией

0 голосов
/ 20 марта 2020

Я использую GSAP и IntersectionObserver для анимации каждого символа каждого h1 на свитке.

Кажется, все работает, но часть анимации opacity не работает должным образом. В основном можно увидеть h1, прежде чем он перейдет к opacity:0, а затем обратно к 1 (это напоминает мне о печально известном Fla sh 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>

Заранее большое спасибо за вашу помощь!

1 Ответ

0 голосов
/ 20 марта 2020

Это действительно sh содержимого без стилей (FOU C), которое происходит из-за того, что JavaScript ожидает запуска до загрузки страницы. GreenSock на самом деле имеет учебник по удалению FOU C, который я рекомендую.

Основной подход c заключается в том, чтобы скрыть элементы с помощью CSS и изменить JS на работать с измененным CSS (таким как изменение .from () на .to () или .fromTo ()). Вы можете сделать это, добавив h1 { opacity: 0 } к вашему CSS, а затем добавьте следующее к JS: gsap.set(h1, {opacity: 1});.

Примечание: GSAP имеет собственный плагин SplitText , который позволяет легко настраивать способ разделения текста (в том числе по строкам), обрабатывать нестандартные символы и добавляет возможность вернуться к значению по умолчанию. Я очень рекомендую, если вы собираетесь разбивать текст на части!

...