СБС анимация в Тильде

В конце статьи, для тех, кто дочитал, будет очень мощный совет

В Тильде, есть несколько видов step-by-step анимации. Перечислю их:

1. Объект анимируется, если находится на экране;
2. Объект анимируется, если мышью нажать/навести на триггер;
3. Объект анимируется по скроллу

Что такое триггер?
Триггер — это любой предмет (текст, кнопка, shape, картинка и тд) в зеро-блоке, на который при нажатии или наведении, происходит анимация.

Давайте по порядку разберем каждый из видов

В этом виде анимации, объект будет анимирован, в двух случаях:

1. Если сам объект будет на экране (element on Screen)
2. Если блок, в котором находится объект будет на экране (block on Screen)

То есть нам нужно выбрать element on Screen или block on Screen
Далее, Start Trigger, это когда начнет работать анимация. Когда элемент/блок будет наверху, в центре или внизу и выбрать через какое количество пикселей это сработает, параметр Trigger Offset.

Например, вы поставили, что анимация начнет воспроизводиться, когда элемент будет вверху и поставили Trigger Offset на 150, значит анимация сработает, когда предмет будет не в самом верху, а раньше на 150 пикселей

Duration — длительность выполнения одного шага в секундах
Move X,Y — на сколько пикселей от стартового положения, будет смещен объект по оси х (первое поле) и по оси у (второе поле)
Scale X, Y — увеличение или уменьшение объекта, 100% реальный размер, в большую или меньшую сторону будет, соответственно, увеличиваться или уменьшаться объект.
Лайфхак. Если нажать мышью на Differ X, Y, то появится еще одно поле, и можно будет регулировать изменение размера разных сторон, то есть не только пропорциональное изменение
Opacity — тут все просто. Этот бегунок меняет прозрачность объекта
Rotate — поворот объекта по часовой или против часовой стрелки
Easing — интересный параметр, он отвечает за замедление темпа и добавляет "хаосности" анимации. (параметр elasticFin)
Delay — это пауза, в сек. То есть задержка в анимации. Если вы поставите этот параметр на 1 секунду, то анимация начнет проигрываться через 1 сек.

Эти настройки относятся только к первому виду анимации "Объект анимируется, если находится на экране"

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

Теперь по параметрам

Чтобы выбрать этот тип анимации, нужно выбрать в Even'е - on hover (при наведении) или on click (при клике)

Loop — это зацикливание анимации, то есть нужно повторять или нет

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

Steps — это шаги, их может быть неограниченное кол-во.

Настройки тут такие же, как и в первом типе анимации


Переходим к заключительному виду анимации

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

Расскажу, о более простых вещах. И ниже будет несколько примеров.

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

Настройки такие же, кроме пункта Easing, за место него есть Fix, это зафиксировать объект относительно других

Например, у нас есть жирный заголовок слева и немного контента (текст, фото) справа.
Мы хотим сделать, чтобы наш заголовок был справа и когда шел контент, заголовок был зафиксирован, пока идет текст и фотки слева. Легко)

Берем заголовок
Идем в анимацию и ставим event - On Scroll
Ставим Start Trigger - Top (верх)
Trigger Offset - 200 пикселей
В настройках Fix ставим Fixed, выставляем дистанцию, в моем случае это 850 px. Тут нужно померить, сколько пикселей при прокрутке будет фиксация. Ставим примерно такое же расстояние (чуть меньше), где примерно заканчивается наш контент справа. У меня на 1000 пикселей, заканчивается. Я ставлю 850, чтобы заголовок уходил наравне с текстом справа.

Всё)

Не забудьте включить дополнительно анимацию на мобильных устройствах, если она нужна.
Как включить ее? Выбираем любое разрешение (только не ноутбук) вверху в редакторе Zero-блока, выбираем наш анимированный объект, идем вниз, где включается анимация и нажимаем "Switch On".

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

На самом деле, тут ничего сложного нет. Нужна практика. Но в принципе, в Тильде с приходом СБС анимации все стало реализуемо.

Но все таки, не переиграться.

Спасибо всем за внимание. Надеюсь статья для вас будет полезна. Постарался донести всю суть.

Время просмотра 6 минут