Zero Block: пошаговая анимация

Внутри Zero Block есть два режима анимации:

1) Basic Animation — простая анимация. Это готовые, самые часто используемые эффекты, например, эффект появления (через прозрачность, снизу вверх, справа налево и т.д.), параллакс и фиксация. Их достаточно в 90% случаев.

Инструкция по базовой анимации →

2) Step-by-step Animation — пошаговая анимация. Позволяет реализовать яркие, креативные идеи по вашему сценарию.

Страница с примерами возможностей пошаговой анимации https://tilda.cc/ru/lp/step-by-step-animation/

Пошаговая анимация доступна в Zero Block — редакторе для профессиональных дизайнеров. Добавьте его на страницу из библиотеки блоков (в самом низу, после категории «Другое»). Или кликните на иконку Zero Block в меню быстрого добавления блоков внизу страницы.

Нажмите «Редактировать блок» в левом верхнем углу блока, чтобы перейти в режим редактирования.

Добавьте новый элемент, выделите его, откройте настройки, пролистайте до раздела Step by Step Animation и нажмите кнопку Add.

Создание пошаговой анимации отменит все настройки базовой анимации для элемента.

Создание пошаговой анимации начинается с выбора Event — условия, когда начнет проигрываться анимация. Существует пять условий:

• Element on Screen — анимация начинается при появлении элемента на экране;
• Block on Screen — анимация начинается при появлении на экране всего текущего блока;
• On Scroll — анимация запускается и продолжается во время скролла;
• On Hover — анимация появляется при наведении на элемент;
• On Click — анимация начинается при клике на элемент.

У начала анимации есть дополнительные опции Start Trigger, Loop и Trigger Offset.

• Start Trigger — это то, к чему будет привязана анимация или что будет являться ее триггером. Есть выбор из трех областей — верхней границы (On Window Top), центра экрана (On Window Center) и нижней границы (On Window Bottom);
• Trigger Offset — это смещение начала анимации объекта относительно выбранного Window Top / Window Center / Window Bottom;
• Loop — это опция зацикливания анимации.

C помощью опции Test и кнопок Play Element / Play All можно проиграть анимацию этого элемента или всех элементов в блоке.

Первый шаг, задан по умолчанию — это Start. Далее нужно добавлять шаги и на каждом шаге менять свойства элемента. Так элемент будет меняться.

Чтобы добавить шаг, нажмите на кнопку Add Step.

Между шагами можно переключаться. При этом синяя обводка элемента означает стандартное состояние, зеленая — редактирование шага.

У каждого шага есть набор свойств: Duration, Move, Scale, Opacity, Rotate, Easing и Delay.

Duration — длина анимации в секундах;
Move — координаты, куда передвигается элемент относительно начального расположения. Их можно задать как значениями, так и передвинуть элемент;
Scale — процент увеличения или уменьшения элемента к концу этого шага;
Opacity — значение прозрачности элемента к концу шага;
Rotate — поворот элемента в градусах к концу шага;
Easing — выбор эффекта выполнения анимации: Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;
Delay — задержка перед выполнением анимации.

Рассмотрим как сделать так, чтобы желтый квадрат переместился на 550 px вправо и во время движения уменьшился в два раза, а затем вернулся на исходную позицию.

Ниже пошаговая инструкция с комментариями:

Кроме кнопок Play Element и Play All в Тильде есть возможность сразу посмотреть работу анимации в режиме предпросмотра.

Для этого удобно в браузере открыть 2 вкладки: на одной страница, в которой открыт редактор Zero Block, и на второй — та же страница в режиме предпросмотра.

В этом случае при нажатии на кнопку Save в Zero Block изменения будут отображаться на странице предпросмотра после обновления страницы.