Что такое GSAP?

GSAP (GreenSock Animation Platform) — это мощная JavaScript библиотека для анимаций. Она работает быстрее CSS-анимаций и даёт полный контроль над каждым кадром.

Подключение

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

<script>
  gsap.registerPlugin(ScrollTrigger);
</script>

Базовая анимация при скролле

Самый простой способ — анимировать элемент когда он появляется в viewport:

gsap.from('.box', {
  scrollTrigger: '.box',
  opacity: 0,
  y: 50,
  duration: 1
});

Parallax эффект

Мой любимый! Фон двигается медленнее контента:

gsap.to('.hero-bg img', {
  yPercent: 30,
  ease: 'none',
  scrollTrigger: {
    trigger: '.hero',
    start: 'top top',
    end: 'bottom top',
    scrub: true  // привязка к скроллу
  }
});

Stagger — появление по очереди

Когда много элементов, красиво их показывать один за другим:

gsap.from('.card', {
  opacity: 0,
  y: 60,
  duration: 0.8,
  stagger: 0.15,  // задержка между элементами
  scrollTrigger: {
    trigger: '.cards-grid',
    start: 'top 75%'
  }
});

Start и End позиции

Это было сложнее всего понять! Формат: 'элемент viewport'

Что я применил на практике

Добавил анимации на все страницы проекта Drivoxe:

Больше о моём обучении — в Telegram канале! 📢

Полезные ресурсы