Как сделать анимацию в тильде

Мастер-класс «Анимация в Zero Block»

00:00 Начало мастер-класса
2:42 Как конвертировать базовый блок в Zero block
4:10 Где найти базовую анимацию элементов
4:50 Какие виды анимации появления есть на Тильде, как их настраивать
8:16 Как посмотреть, как будет выглядеть анимация, без выхода из редактора
8:34 Как работает настройка Delay
10:29 Что такое Trigger Offset
11:55 Как работает Zoom in анимация
13:30 Как настроить анимацию по скроллу
22:23 Как настроить анимацию в зависимости от движения курсора
28:29 Как фиксировать элементы в Zero block
32:47 Как фиксировать фотографию относительно большого количества текста
37:03 Как работает Step-by-Step анимация
42:16 Как зациклить добавленную анимацию
43:45 Какие настройки Step-by-Step анимации существуют
45:41 Как настроить анимацию при наведении (ховер) и клике
52:43 Какую Step-by-Step анимацию по скроллу можно настроить
57:10 Как добавить горизонтальное движение для текста
1:04:20 Как настроить поворот изображения при скролле страницы
1:06:49 Ответы на вопросы

Как сделать пошаговую анимацию в Tilda

Пошаговая анимация в Tilda помогает создавать сложные и уникальные эффекты. Например, движущиеся иллюстрации, текст бегущей строкой или вращающиеся объекты. В этой статье разберемся, какие еще есть виды пошаговой анимации и как с ней работать в Zero Block.

освойте профессию
веб-дизайнер с нуля

Содержание

1. Что такое пошаговая анимация
2. Какие есть виды пошаговой анимации
3. Как сделать пошаговую анимацию в Tilda
4. Примеры пошаговой анимации

Что такое пошаговая анимация

профессия | 7 месяцев
веб-дизайнер

Станьте архитектором веб-пространства. Научитесь создавать удобные сайты.

пройти курс

Пошаговая анимация (или step by step animation) — это движение объекта, где каждый шаг в настройках — это один кадр анимации. Можно сделать более грубую анимацию, состоящую из небольшого количества шагов, а можно более плавную.

С помощью пошаговой анимации можно трансформировать любые элементы на странице. Например, двигать их по разной траектории, менять размер, вращать, делать полупрозрачными, заставлять исчезать и появляться.

профессия | 7 месяцев
веб-дизайнер

Станьте архитектором веб-пространства. Научитесь создавать удобные сайты.

пройти курс

Какие есть виды пошаговой анимации

В Zero Block четыре типа пошаговой анимации:

• анимация по клику;
• анимация по скроллу мыши;
• анимация при наведении курсора на элемент;
• анимация при появлении элемента.

У каждого типа анимации есть множество сценариев использования. Их можно применять в заголовкам и текстам, к иллюстрациям, кнопкам и другим элементам лендинга.

Как сделать пошаговую анимацию в Tilda

1. Выбрать условия начала анимации

Event — это условие, с которого начнется анимация. В Zero Block есть пять условий:

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

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

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

Чтобы посмотреть, как будет выглядеть анимированный элемент или группа элементов на странице, нужно выбрать опцию Test и нажать кнопку Play Element / Play All.

2. Добавить шаги анимации и выбрать свойства

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

У каждого из шагов есть набор свойств:

• Duration — длина анимации
• Move — координаты, куда передвигается элемент относительного того места, где он находится
• Scale — процент увеличения или уменьшения элемента к концу шага
• Opacity — прозрачность элемента к концу шага
• Rotate — градус поворота элемента к концу шага
• Easing — выбор эффекта выполнения анимации. Например, линейное, замедленное или с задержкой.

3. Проверить, как анимация работает в браузере

После того, как мы выбрали условия и настроили шаги, можно перейти в режим предпросмотра и оценить, как анимация выглядит на странице.

Как сделать лендинг на Tilda

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

Посмотрите видеоурок о том, как работать с пошаговой анимацией в Zero Block или прочитайте подробную инструкцию ниже.

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

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

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

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

Обзорная статья по основным возможностям
Статья о работе с контейнерами и созданию «резиновых» элементов
Cписок всех комбинаций для ускорения работы
Справка по простой анимации: фиксации, параллаксу и анимации появления
Справка по сложной триггерной анимации: настройка и примеры

Как автоматически импортировать макет из Figma в Zero Block

Определяем базовую структуру дизайна и ускоряем работу с макетом
Начало работы с пошаговой анимацией

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

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

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

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

• 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 — задержка перед выполнением анимации.

Анимация появления текста в Тильде

Чтобы создать анимацию текста в Тильде, необходимо создать ZeroBlock, и выбрать элемент текст, написать любой текст. Далее потребуется вставить html код в блок Т123 из библиотеки tilda. Публикуем страницу и нажимаем инструменты разработчика, нам нужно найти нужный css класс элемента, скопировать его и подставить в код. Можно проделывать эту операцию для нескольких текстов. Снова публикуем и у нас получилась интересная анимация текста в Тильде. Пользуйтесь в своих проектах!

Инструкция:

Код запускающий эффект текста в тильде