[Фича 8] Триггерная анимация на Tilda

Привет, братва! Не так давно тильда выкатила обновление, в котором они добавили долгожданную триггерную анимацию. Я просто не мог не рассказать о ней.

Давайте разберёмся, как она работает и как создать анимацию со взаимодействием нескольких объектов. Поехали!

Создаём чистый Zero Block и добавляем объекты

Вот так выглядит рабочая область. Объект который будет выезжать спрятан за пределами рабочей области.

Открываем настройки кнопки и идём в Step by step animation.

Event: при каких условиях будет выполняться действие. Тут у нас два варианта - On click (при нажатии) и on hover (при наведении). Я выберу при нажатии, вы можете выбрать другой вариант.

Чуть ниже у нас появится поле TRIGGER.

Тут мы должны выбрать второй объект (персонажа), с которым происходит само взаимодействие. Нажимаем на +Add trigger и клацаем на изображение с персонажем (на второй объект).

Если вы всё сделали правильно - появится триггер. Таких триггеров вы можете прикрепить неограниченное количество. То есть от одной кнопки мы можем "запитать" целую кучу анимаций. Сейчас мы сделаем только одну.

Переходим к настройкам анимированного объекта (персонажа)

И вновь открываем пошаговую анимацию. Выбираем аналогичный event (click или hover), а зависимости от того, что вы выбрали в кнопке.
Так же добавляем триггер и ТУТ ВЫБИРАЕМ саму кнопку в качестве триггера.

Таким образом, связывая их между собой.

Добавляем шаги анимации

Далее добавляем первый шаг анимации и делаем такие настройки:

Duration: продолжительность (скорость) анимации. Оставлю 1, если хотите, чтобы анимация была быстрой - ставьте показатель меньше, если медленнее - больше.

Move X/Y: у нас персонаж выезжает на экран сверху, поэтому мы регулируем его движение по оси Y. Я отвезу его на 700 пикселей.

У меня настройки выглядят так:

Готово! Теперь закрываем и сохраняем сайт. Публикуем и смотрим результат.
Я ещё не раз затрону варианты такого рода анимаций, это очень крутой апдейт, который обязательно понадобится нам в дальнейшем.

Всем успехов и хороших выходных!