Конструктор сайтов Tilda выпустил анимацию по шагам

Инструмент для анимации по шагам появился в Zero Block — редакторе для веб-дизайна, встроенном внутри конструктора. Редактор работает на всех планах, включая бесплатный.

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

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

Как это работает

Чтобы на странице появились элементы, которые будут взаимодействовать с пользователем, нужно:

1) Выделить текст, изображение или объект в редакторе Zero Block и открыть пошаговую анимацию в настройках

Конструктор сайтов Tilda выпустил анимацию по шагам

2) Назначить триггер начала анимации: при скролле, при появлении, при клике или при наведении

3) Добавить новый шаг

4) Изменить свойство: траекторию и скорость движения, размер, прозрачность или угол поворота

Примеры анимации:

Появление и движение элементов по скроллу

Посмотреть в действии http://jungle.step-by-step-demo.tilda.ws/

Анимация при наведении или по клику на объект

Посмотреть в действии http://button.step-by-step-demo.tilda.ws/

Бегущая строка

Посмотреть в действии http://newsticker.step-by-step-demo.tilda.ws/

Больше примеров на странице:
https://tilda.cc/ru/lp/step-by-step-animation/

2020 показов
4.6K4.6K открытий
19 комментариев

Очень круто, что теперь столько возможностей для анимации элементов!

Ответить

R.I.P Figma

Ответить
Ответить

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

Ответить

Wow! сайт яндекс станции делали на тильде?

Ответить

Панель со слоями (и элементами) появляется по Cmd+L, направляющие Cmd+H / Cmd+Shift+H

Ответить

Ребята, это невероятно крутая фича! Спасибо!

Ответить