Лоадер тз

Анимация лоадера произвольная, можно использовать css keyframes или gsap

После загрузки страницы мы всегда находимся вверху страницы (не должно быть видно скачка)

Скролл страницы заблокирован во время загрузки

Сборка первого экрана тз

Для анимации используйте неколько разных css свойств и небольшие задержки

Для построчной или посимвольной анимации текста используйте splitting.js

Появление блоков

доскролили и вжух!

Можно делать через классы и высчитывать по скроллу getBoundingClientRect каждого блока, но гораздо проще использовать ScrollTrigger.batch()

  • fade
  • fade
  • fade-in
  • fade-in
  • fade-scale
  • fade-scale

Параллакс по скроллу

Эффекты, которые постоянно срабатывают по скроллу

Скроллим скроллим и вжух вжух вжух!
  • fade-scale
  • fade-scale
  • transform y
  • transform y
  • transform x
  • transform x

Scroll Slider

переключение полноэкранных слайдов по скроллу

position: sticky;

Просто стики. Не нужно мучаться с position: fixed; или pin: true,
(т.к. баги на тач неисправимы)

gsap scrollTrigger

без getBoundingClientRect
ScrollTrigger делает всю рутину за нас

ios friendly???

не забывайте добавлять вокруг transform: translate3d(0, 0, 0);