плакат делаем в ширину экрана 1200px (не забываем autoscale) и в 600px в высоту

а еще перманентную ( это как летающий квадрат)

и базовую анимацию

используйте клик

переверстайте этот плакат

эта штука говорит анимации «начнись, когда достигнешь отступа в Npx от верха экрана»

эта штука говорит «оставайся на фиксе на протяжении Npx»

эта штука говорит «фиксируйся с отступом 115 от верха экрана» (лучше мерять отступ от верха на макете и ставить сюда это число)

эта штука говорит анимации «фиксируйся от верха экрана»

эта штука говорит скролься быстрее скорости экрана (значение больше 100) или медленнее (меньше 100)

выбираем тип паралакса

эта штука говорит «смещайся в зависимости от движения мыши на Npx»

выбираем тип паралакса

что за анимация произойдет? в нашем случае только изменение размера

за сколько секунд произойдет анимация

если не ставить триггер, анимация происходит при наведении на сам объект

если поставить зацикливание, то когда пользователь один раз наведет на элемент, анимация зациклится

выбираем тип анимации по наведению

что за анимация произойдет? в нашем случае только изменение размера

за сколько секунд произойдет анимация

тыкаем и выбираем триггер

если поставить зацикливание, то когда пользователь один раз наведет на элемент, анимация зациклится

выбираем тип анимации по наведению

что за анимация произойдет? в нашем случае только изменение размера

за сколько секунд произойдет анимация

если не ставить триггер, анимация происходит при клике на сам объект

если поставить зацикливание, то когда пользователь один раз кликнет на элемент, анимация зациклится

выбираем тип анимации по клику

что за анимация произойдет? в нашем случае только изменение размера

за сколько секунд произойдет анимация

тыкаем и выбираем триггер

если поставить зацикливание, то когда пользователь один раз кликнет на элемент, анимация зациклится

выбираем тип анимации по клику

что за анимация произойдет? в нашем случае поворот по часовой

за сколько секунд произойдет шаг анимации

если поставить зацикливание, то анимация будет повторять циклы бесконечно

ставим начало анимации, когда элемент достигнет положения в 230px от верха экрана

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

возвращаем настройки старта (чтобы зацикливание было гладким)

возвращаем настройки шага 1

вторым шагом уменьшаем в изначальный размер (100%) и двигаем еще на 350px (итого 700px), easy out ускоряет анимацию к концу

эта настройка ускоряет движение в начале

что за анимация произойдет в первом шаге? в нашем случае смещение по Х на 350px и увеличение на 22%

за сколько секунд произойдет первый шаг анимации

ставим начало анимации, когда элемент достигнет положения в 600px от верха экрана

если поставить зацикливание, то анимация будет повторять циклы бесконечно

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

возвращаем настройки старта (чтобы зацикливание было гладким)

возвращаем настройки шага 1

вторым шагом уменьшаем двигаем по Y на 190px (итого 80px), easy out ускоряет анимацию к концу

эта настройка ускоряет движение в конце

что за анимация произойдет в первом шаге? в нашем случае смещение по Х на 430px и по Y на -110px (вверх)

за сколько секунд произойдет первый шаг анимации

ставим начало анимации, когда элемент достигнет положения в 600px от верха экрана

если поставить зацикливание, то анимация будет повторять циклы бесконечно

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

возвращаем настройки старта (чтобы зацикливание было гладким)

что за анимация произойдет в первом шаге? в нашем случае увеличение на 90%

за сколько секунд произойдет первый шаг анимации

ставим начало анимации, когда элемент достигнет положения в 600px от верха экрана

если поставить зацикливание, то анимация будет повторять циклы бесконечно

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

возвращаем настройки старта (чтобы зацикливание было гладким)

возвращаем горизонтальный скейт в норму (100%)

вторым шагом тянет на 300% по вертикале

что за анимация произойдет в первом шаге? в нашем случае увеличение на 90% по горизонтали

за сколько секунд произойдет первый шаг анимации

ставим начало анимации, когда элемент достигнет положения в 600px от верха экрана

если поставить зацикливание, то анимация будет повторять циклы бесконечно

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

возвращаем настройки старта (чтобы зацикливание было гладким)

что за анимация произойдет в первом шаге? в нашем случае снижение прозрачности в 0

за сколько секунд произойдет первый шаг анимации

ставим начало анимации, когда элемент достигнет положения в 600px от верха экрана

если поставить зацикливание, то анимация будет повторять циклы бесконечно

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

что за анимация произойдет в первом шаге? в нашем случае поворот по часовой

за сколько секунд произойдет первый шаг анимации

ставим начало анимации, когда элемент достигнет положения в 600px от верха экрана

если поставить зацикливание, то анимация будет повторять циклы бесконечно

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

ставим задержку 1 секунда на втором шаге (за это время происходит анимация красного и зеленого слоя, они по 0,5)

удаляем 3 шаг, тк этот слой последний и никого не ждет, сразу зацикливается

проявляем

появление произойдет за 0,5 сек

оставляем элемент в состоянии 2 шага на 1 секунду (за это время будет происходить анимация других слоев. если не поставить, зацикливание будет не коннектиться с остальными слоями)

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

создаем четыре одинаковых элемента трех разных цветов
самый нижний не анимируем, начинаем со второго

если поставить зацикливание, то анимация будет повторять циклы бесконечно

шаг с 0 продолжительностью подменяет изначальное состояние элемента (если в общих настройках поставить 0 прозрачность, то на анимации она не проявится)

ставим 0 прозрачность

ставим начало анимации, когда элемент достигнет положения в 600px от верха экрана

ставим задержку 0,5 на втором шаге (за это время происходит анимация красного слоя)

оставляем элемент в состоянии 2 шага на 0,5 секунды (за это время будет происходить анимация других слоев. если не поставить, зацикливание будет не коннектиться с остальными слоями)