Виды анимации в базовых и zero-блоках в Tilda

Возможности анимации в Tilda довольно широкие. Если вы собираете сайт в стандартных блоках, по шаблонам, будут доступны готовые эффекты — их можно задать в пару кликов. В zero-блоках, заточенных под кастомные решения, есть более гибкие настройки, они позволят в точности реализовать любую задумку.

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

Анимация в стандартных блоках

Для примера возьмем обложку из базовых блоков, зайдем в ее настройки — они находятся в левом верхнем углу.

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

Найдем в настройках раздел «Анимация». Tilda предлагает анимировать заголовок и описание. Доступный эффект называется «Прозрачность», но по сути — это появление текста через некоторое время. Надпись выплывает сверху, снизу, сбоку или увеличивается.

Выбираем нужный вариант, нажимаем «Сохранить и закрыть» вверху раздела. Нажимаем «Предпросмотр» в меню Tilda и смотрим, что получилось.  

Так выглядит обложка, когда у заголовка задана «Прозрачность (сверху)», а у описания — «Прозрачность (снизу)».

Теперь установим «Прозрачность (увеличение)» на заголовок.

В стандартных блоках с CTA-кнопками, кроме шести видов прозрачности, можно выбрать эффект при наведении курсора: вспышка, рябь или свет.

Чтобы было лучше видно, поменяем цвет кнопки и применим эффект «Вспышка»:

Так выглядит «Рябь»:

А это эффект «Свет»:

Анимация в zero-блоках

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

Базовая

Делится на 3 подвида. Поговорим о каждом из них.

Animation. Это та же самая прозрачность, о которой мы говорили в разделе про стандартные блоки, но с гибкой настройкой.

Откроем нулевой блок, добавим текст, фигуры, изображения, кнопки или любые другие объекты. Найдем раздел Basic Animation на панели справа.

Выделим надпись Zero Block и установим появление справа — Fade in Right. Для этого вида анимации можно настроить:

• Duration — длительность: сколько времени элемент будет появляться в секундах;
• Delay — задержка перед началом анимации в секундах;
• Trigger Offset — триггерный отступ от нижнего края Window-контейнера (границ экрана браузера): анимация будет проигрываться, когда пользователь доскроллит до нужной точки;
• Distance — расстояние, которое проходит блок, когда появляется справа, слева, сверху или снизу.

Под настройками есть две кнопки: «Запустить элемент» и «Запустить все». Их будем использовать для тестирования. Активируем анимацию при стандартных параметрах.

Теперь увеличим длительность до 2 секунд и дистанцию — до 200 px, добавим 2-секундную задержку. Анимация идет заметно дольше.

Чтобы оценить Trigger Offset, уберем задержку, т.к. она может помешать, и воспользуемся предпросмотром. Отступ установим в 500 px — это значит, что анимация запустится, когда до нижнего края окна останется 500 px.

При скролле надпись выплывает, когда доходим до начала следующего блока — он последний на странице.

Parallax. Параллакс — визуальный эффект, при котором кажется, что элементы на переднем плане движутся быстрее, чем фоновые. 

Параллакс может срабатывать при скролле или движении мыши. 

Для параллакс-скроллинга можно настроить скорость элемента.

Для наглядности зададим разную скорость элементам. При Speed больше 100% объекты прокручиваются быстрее, чем экран, и наоборот. Для оранжевых прямоугольников поставим 200%, для заголовка и картинки — 140%, для подзаголовка — 100%, для кнопки — 80%.

Попробуем сбалансировать. Фигуры — 100%, текстовые блоки и кнопка — 90%, изображение — 110%. Будет совсем легкий эффект: вы можете заметить, как тексты и логотип в рамке перемещаются относительно желтых прямоугольников.

Для параллакса при движении мыши можно установить максимальное отклонение объекта по осям X и Y. Это показывает, на сколько пикселей элемент будет отходить от стартовой позиции.

Зададим дистанцию 40 px по обеим осям. Надпись равномерно отклоняется.

Параллакс — важный эффект, он позволяет сделать страницу более «живой» и интересной. Чуть подробнее о нём (и не только) мы рассказали в гайде по элементам в веб-дизайне.

Fixing. Фиксация объекта в какой-либо области экрана. 

Элемент можно зафиксировать вверху, внизу или по центру экрана. Относительно выбранной области будет оставаться неподвижным при скроллинге. 

Зафиксируем стрелочку по центру, установим Trigger Offset, отступ между объектом и границей экрана, в 50 px. А Distance, расстояние, которое должен пройти элемент, — в 150 px.

При скролле кажется, будто стрелка падает на кнопку.

Пошаговая анимация

Step-by-step Animation — инструмент профессионального уровня, позволяющий управлять элементом на каждом шаге. Можно настраивать траекторию, прозрачность, скорость, задавать конкретные параметры и изменения при клике или наведении.

Переход к пошаговой анимацией находится в настройках в самом низу. Под кнопкой предупреждение: «Не работает вместе с базовой анимацией. Ее настройки будут удалены». 

Сначала нужно выбрать Event — условие, при котором запустится анимация.

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

Element on Screen. Установим триггер для старта по центру экрана (Window Center) и отступ — 500 px. Теперь анимация начнется, когда элемент окажется в центре экрана.

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

Отдельно отметим Easing — это эффект при проигрывании анимации. Среди стандартных вариантов есть линейная анимация, замедление в начале и/или в конце, отскок. Параметры Easing задаются графиком зависимости положения объекта от времени. Можно нажать Edit, открыть редактор, выбрать более сложную опцию из списка или же создать свою, поменяв график.

Начнем настройку первого шага. Сместим заголовок на -120 px по оси X и на -60 px по Y. Уменьшим текст так, чтобы он составлял 66% от исходного и установим прозрачность на уровне 45%. 

Переходим ко второму шагу. Переместим текст на 50 px по X и Y, увеличим размер до 74% и прозрачность — до 75%.

На третьем шаге возвращаемся к исходным настройкам — заголовок встает на прежнее место.

В результате заголовок делает небольшой круг.

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

Теперь попробуем Easing. Для примера возьмем уменьшение размера картинки и Ease Out — замедление в конце.

Благодаря Easing эффекты смотрятся более естественными, они движутся как предметы в реальном мире, с изменением скорости. Работать с настройкой Easing можно также с помощью анимации в Figma. Этот редактор подойдет, если вы заказываете кастомный сайт у программистов. А также из Figma можно сохранить анимацию в формате видео или GIF — такой контент можно будет разместить и на странице Tilda.

Block on Screen. А так выглядит уменьшение картинки и Ease Out, когда анимация активируется при появлении блока на экране.

On Scroll. Посмотрим, как могут меняться объекты при скролле. Настройки те же, что в предыдущих пунктах: можно перемещать, регулировать прозрачность, поворачивать, менять размер.

На первом шаге уменьшим до 80% оранжевые прямоугольники и отодвинем их с поля: один отойдет вправо, второй — вниз. А на втором шаге элементы вернутся на место.

Готовая анимация:

On Hover. Можно установить триггер — элемент, при наведении на который будет срабатывать анимация для другого объекта. Например, картинка будет менять размер и прозрачность, когда мы наведем курсор на кнопку «Узнать». 

Нажимаем Add trigger на панели справа и кликаем на нужный объект.

И вот что получилось.

On Click. Работает так же, как Hover, но нужно кликнуть на объект. Для примера покажем еще один способ «уронить» стрелочку на кнопку. Зайдем в настройки пошаговой анимации для стрелки, сделаем триггером нажатием на кнопку. Добавим смещение по вертикали и эффект замедления в начале и конце.

Результат:

Можем сделать так, чтобы на втором шаге стрелка вернулась в исходное положение. Для этого прописываем стандартные настройки.

Идеи для вашей анимации

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

Перемещение текста при скролле:

Появление карточек при скролле:

Смена формы плитки при наведении: 

Появление GIF при наведении:

Необычный курсор, который меняется при наведении на кликабельные элементы:

Открытие окошка по клику:

Движение элементов при скролле:

Движение элементов по клику:

Синхронное движение иллюстраций при перемещении курсора:

Изменение прозрачности и фиксация при скролле:

Изменение размера при скролле:

Изменение цвета текста при скролле:

Включение музыки и анимации по клику:

Ещё больше идей — в подборке сайтов с классным дизайном.