УРОК
Сложная анимация с фиксацией по скроллу
Сначала нужно подготовить цветок. Ищем бутоны в разных стадиях цветения. Ищем сам одуванчик — оставляем от него только листики и стебелёк.

Помещаем все элементы во фреймы одинакового размера (это важно!). Обратите внимание, головка цветка должна совпадать со стебельком в месте их сочленения.

Отдельно подготавливаем другие элементы — цветы по краям, парашютик, руку, фон, бокал с вином, в котором плавают парашютики и др.
Начинаем формировать артборд. Устанавливаем высоту блока, переключаем на автоскейл. Размещаем наши объекты. Важно разместить все контейнеры с частями одуванчика ровно друг под другом по оси Х и через равное расстояние по оси Y (у меня это 400px от нижнего края одного положения цветка до верхнего края следующего за ним положения цветка).
Настраиваем анимацию. Фиксируем все элементы, которые должны быть закреплены на экране, кроме бабочек, поскольку они у нас пролетают по экрану в свободном парении.
Настройки анимации левых и правых цветов.
Настройки анимации стебля с листиками — одуванчик будет зафиксирован на экране до самого низа, в то время как бутоны будут плавно сменять друг друга.
Настройки анимации первого бутона. Два шага.
Настройки анимации всех остальных бутонов. Тут будет уже четыре шага.
Анимация бабочек. Сколько хотите шагов для придания живости. У меня три. Обратите внимание — бабочек не фиксируем.
Теперь парашютики. Обратите внимание, мы их и фиксируем, и поворачиваем как бабочек, и устанавливаем разное значение срабатывание анимации trigger offset, чтобы при появлении они немного отстояли друг от друга, а не выстраивались в одну линию.
Ура, первый блок готов! И он самый сложный! Уверена, что если освоите эту анимацию, второй блок будет сделать легко самостоятельно, ведь там нет никакой фиксации элементов — простое перемещение объектов по скроллу.
Понравился урок? Подпишись и переходи в канал для дизайнеров Марго Гретте, тут еще много полезных материалов.
Made on
Tilda