Как работает ScrollMagic?

Question

[Анатолий Филиппов]

Надо сделать сложную анимацию как на сайте Apple, чтобы при скролле происходила анимация.
Совсем не понимаю как с этим всем работать, и на русском языке ничего не нашел

Есть сайт - mistxs.ru/hey
Вот там этот шаблон

Answer 1

[Алексей]

Вот есть несколько переводов ScrollMagic инструкция – полноэкранное слайдшоу, ScrollMagic – Создание анимации при прокрутке страницы
ScrollMagic это либа от Greensock, так что надо изучить Tweenmax и Timeline, есть небольшой перевод GSAP JS – руководство для начинающих
На английском много инфы по скролл анимациям в этом блоге https://ihatetomatoes.net/blog/
По поводу разбора анимации на сайте Apple есть неплохая статья websitedeconstructions.com/apple-imac-retina

Answer 2

[bromzh]

Как работает ScrollMagic?

С помощью магии, разумеется. Посмотри примеры, они более чем понятны.

Верстаешь всё последовательно. Создаёшь контроллер сцены и саму сцену. На сцену добавляешь события: связываешь триггер с нужной анимацией. Триггер - это селектор или элемент. Когда скролл доходит до элемента-триггера, библиотека производит необходимые трансформации. Вместо временной шкалы для анимации используется положение скролла относительно начала элемента. Сами анимации можно описывать с помощью этой либы. Анимации применяются (обычно) к тому же элементу, хотя можно всё настроить. В анимациях указываешь как изменяются css-атрибуты. Ты можешь описывать либо начальное положение элемента (а конечное будет такое, как было бы согласно вёрстке без запуска этой библиотеки), либо конечное (начальное положение будет согласно вёрстке), либо и начальное и конечное.

В целом, приведённых примеров вполне хватит, чтобы освоить.