Как двигать блок в месте со скроллом и потом закрасить буквы?

Question

Как двигать блок app-text вместе со скроллом и остановить этот блок когда он попадает в about-title и когда с темного фона переходит на белый закрашивать текст app-text в черный

Думал поможет Gsap но в нем новичок и не совсем понимаю как это реализовать

gsap.registerPlugin(ScrollTrigger)

const indexTitle = document.querySelector('.app-text')

const t1 = gsap.timeline()
t1.to(indexTitle, {
  ease: "power3.out out",
  y: 1000
})

ScrollTrigger.create({
  animation: t1,
  trigger: '#app',
  start: 'top',
  scrub: true,
  pin: true
})

.app-text__title {
  margin: 0 auto;
  max-width: 955px;
  font-family: "Dobrozrachniy", san-serif;
  font-size: 120px;
  line-height: 1.2;
}

.app-text {
  display: block;
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #ffffff;
}

.index-cover {
  display: block;
  width: 100%;
  height: 1430px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

.about {
  padding: 400px 0 140px;  
}

.about-description {
    font-family: "TT Drugs", san-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    text-align: center;
    max-width: 70%;
    margin: 0 auto;
}

.stat {
  display: flex;
  align-items: center;
  margin-top: 80px;
}

.stat-item {
  width: 20%;
  padding: 0 15px;
}

.stat-number {
  font-weight: 600;
  font-size: 72px;
  line-height: 100px;
  text-align: center;
  letter-spacing: 0.01em;
}

.stat-description {
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.01em;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<main>
  <div class="index-cover" style="background-image: url(https://wm-mhm.ru/wp-content/uploads/2021/03/mem.jpg);"></div>
  <div class="app-text">
    <h1 class="app-text__title">собственные 4 Производства дверей и окон для торговых центров</h1>
  </div>
  <div class="about">
    <div class="container">
      <div class="about-title">

      </div>
      <div class="about-description">
        Столярных цех был организован в 2000 году в собственном производственном помещении. Для изготовления столярных изделий были приобретены пилорама, две сушильных камеры. Это позволило быть независимыми от поставщиков сырья и снизило себестоимость изделий.
      </div>
      <div class="stat">
        <div class="stat-item">
          <div class="stat-card">
            <div class="stat-number">20+</div>
            <p class="stat-description">Лет опыта в сфере</p>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-card">
            <div class="stat-number">175</div>
            <p class="stat-description">Сотрудников в штате</p>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-card">
            <div class="stat-number">200+</div>
            <p class="stat-description">Довольных клиентов</p>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-card">
            <div class="stat-number">10</div>
            <p class="stat-description">Лет гаранти</p>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-card">
            <div class="stat-number">Free</div>
            <p class="stat-description">Бесплатная консультация</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

БЛОГ НА HUSL

Как двигать блок в месте со скроллом и потом закрасить буквы?

Ответы (0 шт):