Пошаговая Анимация
в ZERO Bloсk
В настройках есть 2 режима анимации:


basic animation: простая анимация - заранее подготовленные эффекты: эффект появления и др.
step by step animation - пошаговая анимация.
Когда стандартных эффектов недостаточно и хочется больше креатива.
Эффект перехода с поворотом:
Открой zero block и удали всё, оставь только шейп. Его мы будем анимировать.
Выдели шейп и в настройках нажми "add" - добавить пошаговую анимацию.
event - когда анимация начнет проигрываться. Здесь можно выбрать следующее:
element on screen - когда элемент появится на экране.
block on screen - когда появится на экране полностью блок.
on scroll - появится при скроле
on hover - при наведении
on click - при нажатии

1 окно: когда анимация начнет проигрываться?
Выбираем element on screen и переходим в шаги (steps):
Start - начальное положение на экране, которое потом сменится на шаг 1 и т.д.
+Add step - добавить шаг (нажимай)

В каждом шаге есть дополнительные настройки. которые мы будем менять:

duration - длительность анимации

move x/y - смещение по оси Х и У


scale x/y - увеличение

opacity - прозрачность

rotate - поворот

easing - замедление

delay - пауза


- Изменим move x/y на 700 (или перенесем вручную шейп в нужное место).
- Добавим вращение rotate на 90 градусов.
- duration - меняется автоматически на 1 сек. Измени на своё усмотрение.
- Нажми play element чтобы посмотреть результат.
Добавь анимацию для мяча как на экране (start + 5 шагов )
Добавь анимацию для бумеранга как на экране (start + 2 шага )
start trigger - означает когда мы хотим чтобы проигрывался элемент: когда его положение: наверху, в середине или внизу экрана
trigger offset - смещение, то есть анимация начнет проигрывать не сразу при появлении блока, а к примеру когда блок сдвинется на 200 пикселей
loop - зацикливание анимации, сделать анимацию бесконечной

Эффект появления:
старт
1 шаг:
(duration 0)
(opacity 0)


2 шаг:
(duration 1)
(move 700)
(opacity 100)
scale 155

Zero block
Анимация: разлетающиеся буквы:
Оставляем только эту надпись и копируем её
Zero block
На копии ставим
opacity - 10
И закрепляем слой нажав ( lock )
Z
Далее из первой надписи оставляем только Z и перемещаем её на закрепленный слой.

Добавляем пошаговую анимацию:
(event - on scroll)
( distance - 1000)
( move - 340/ 240)
Zero block
e
r
o
b
l
o
c
k
Made on
Tilda