CSS Opacity эффект на элементе по скроллу

const footer = document.querySelector('footer');
const animProgress = .5; // Анимируем до середины элемента

// Инициализируем observer
new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // Если элемент в зоне видимости
    if(entry.isIntersecting) {
      // Получаем область видимости, и берём от неё процент для прогресса
      const progress = Math.min(1, entry.intersectionRatio / animProgress);

      // Добавляем прогресс элементу
      entry.target.style.setProperty('--scroll-progress', progress);
    }
  });
}, {
  root: null,
  rootMargin: '0px',
  threshold: Array.from({ length: 101 }, (_, i) => i / 100) // Таким образом получаем threshold от 0 до 1 до фулл отображения элемента
}).observe(footer);

body {
  margin: 0;
}

p {
  margin: 0;
}

.demo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.footer {
  background-color: #502223;
  color: #fff;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  opacity: var(--scroll-progress, 1);
}

.items,
.links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
  width: 100%;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  border-top: 1px solid #fff;
  padding-top: 20px;
}

.links span {
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  aspect-ratio: 2.5;
  background-color: #fff;
}

<div class="demo">Scroll down</div>

<footer class="footer">
  <div class="footer-inner">
    <div class="items">
      <div class="item">
        <span>Menu</span>
        <p>About Us<br>Our Team<br>Expertise<br>Careers<br>Internships<br>News & Insights<br>Contact</p>
      </div>
      <div class="item">
        <span>Expertise</span>
        <p>Commercial Arbitration<br>Investment Arbitration<br>Arbitration-Related Litigation</p>
      </div>
      <div class="item">
        <span>Connect</span>
        <p>[email protected]<br>+0 123 456 78 90<br><br>LinkedIn<br>X</p>
      </div>
    </div>
    <div class="links">
      <span>Privacy Policy</span>
      <span>Cookies Policy</span>
      <span>Branding & Website by Fable&Co.</span>
    </div>
    <div class="image"></div>
  </div>
</footer>

// GreenSocks советуют использовать это в начале
gsap.registerPlugin(ScrollTrigger);

// Запускаем анимацию изначальную для `.footer-inner`
gsap.from('.footer-inner', {
  opacity: 0, // т.е. `opacity` будет анимироваться от 0 до установленного значения (в демо до 1)
  // Подключаем взаимодействие со скроллом.
  scrollTrigger: {
    trigger: 'footer', // Триггером будет `footer`
    start: 'top bottom', // старт анимации будет от его верхней части, относительно нижней части вьюпорта
    end: 'top+=50% bottom', // а закончится от его верхней части + 50% от его высоты, так же относительно нижней части вьюпорта
    markers: false, // можно включить, чтобы отобразить маркеры границы анимации
    scrub: true, // свойство, для связки анимации с прокруткой
  }
})

body {
  margin: 0;
}

p {
  margin: 0;
}

.demo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.footer {
  background-color: #502223;
  color: #fff;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.items,
.links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
  width: 100%;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  border-top: 1px solid #fff;
  padding-top: 20px;
}

.links span {
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  aspect-ratio: 2.5;
  background-color: #fff;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>

<div class="demo">Scroll down</div>

<footer class="footer">
  <div class="footer-inner">
    <div class="items">
      <div class="item">
        <span>Menu</span>
        <p>About Us<br>Our Team<br>Expertise<br>Careers<br>Internships<br>News & Insights<br>Contact</p>
      </div>
      <div class="item">
        <span>Expertise</span>
        <p>Commercial Arbitration<br>Investment Arbitration<br>Arbitration-Related Litigation</p>
      </div>
      <div class="item">
        <span>Connect</span>
        <p>[email protected]<br>+0 123 456 78 90<br><br>LinkedIn<br>X</p>
      </div>
    </div>
    <div class="links">
      <span>Privacy Policy</span>
      <span>Cookies Policy</span>
      <span>Branding & Website by Fable&Co.</span>
    </div>
    <div class="image"></div>
  </div>
</footer>