[Фича 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 пикселей.
У меня настройки выглядят так:
Готово! Теперь закрываем и сохраняем сайт. Публикуем и смотрим результат.
Я ещё не раз затрону варианты такого рода анимаций, это очень крутой апдейт, который обязательно понадобится нам в дальнейшем.
Всем успехов и хороших выходных!