Чтобы увидеть настройки пошаговой анимации, нужно выделить объект и промотать в панели свойств объекта (справа) до раздела "STEP BY STEP ANIMATION"
Чтобы добавить выбранному объекту пошаговую анимацию, нажмите кнопку "ADD".
Обратите внимание, что при настройке пошаговой анимации отменится базовая!
Настройка степ-бай-степ анимации начинается с "EVENT" - это условие (событие), при котором будет начинать работать заданная позже анимация.
- Element on Screen — анимация при появлении элемента на экране;
- Block on Screen — анимация при появлении на экране текущего блока;
- On Scroll — анимация запускается и продолжается во время скролла;
- On Hover — анимация появляется при наведении на объект;
- On Click — анимация начинается при клике на объект (или триггер).
После того, как выбрано условие, можно дополнительно настроить:
Start Trigger — триггер нашей анимации в виде верхней (On Window Top), центра (On Window Center) или нижней границы (On Window Bottom) экрана.
Например, у нас выбрано "element on screen" и "on Window Bottom". Это значит, что, как только анимируемый элемент появится в нижней части экрана, анимация начнется.
Trigger Offset — это смещение начала анимации объекта относительно выбранного Window Top / Window Center / Window Bottom;
Loop — зацикливание анимации.
Далее нужно задать "шаги" для анимации, нажимаем "+Add step".
При помощи "TEST" можно проиграть анимацию, посмотреть, как она работает у одного элемента или у всех в пределах этого блока.
Положение элемента по умолчанию называется Start.
Это нулевой шаг, на нем ничего анимационного не происходит.
При помощи add step мы добавляем шаги, начиная со Step 1, для которых настраиваем анимацию, меняя в специальных полях свойства нашего элемента.
Чтобы объект в самом начале был невидим (Opacity = 0), нужно добавить первый шаг с этим состоянием и длиной (Duration) в 0 секунд.
Duration — длина анимации в секундах;
Move — координаты передвижения элемента относительно начального расположения.
Scale — процент увеличения или уменьшения в размерах элемента к концу этого шага;
Opacity — значение прозрачности элемента к концу шага;
Rotate — поворот элемента в градусах к концу шага;
Easing позволяет выполнять анимацию с определенным эффектом:
Linear — это линейное выполнение анимации,
EaseIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации.
Delay — задержка перед выполнением анимации.