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

Как настроить продвинутую анимацию в нулевом блоке
Видеоурок
Пошаговая анимация
Посмотрите видеоурок о том, как работать с пошаговой анимацией в 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.
Между шагами можно переключаться. При этом синяя обводка элемента означает стандартное состоянии, зеленая — редактирование шага.
Чтобы изменить начальное состояние объекта, например, чтобы объект в начале был невидим (значение Opacity равное нулю), нужно добавить первый шаг с этим состоянием и длиной (Duration) в 0 секунд.
У каждого шага есть набор свойств: 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 изменения будут отображаться на странице предпросмотра после обновления страницы.
Примеры пошаговой анимации:
Кликните, чтобы перейти на страницу и посмотреть анимацию в действии
Кликните, чтобы перейти на страницу и посмотреть анимацию в действии
Кликните, чтобы перейти на страницу и посмотреть анимацию в действии
Made on
Tilda