Конструктор сайтов 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/

2525
19 комментариев

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

2
Ответить

R.I.P Figma

2
Ответить
3
Ответить

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

1
Ответить

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

2
Ответить

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

Ответить

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

1
Ответить