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

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

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

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

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

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

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

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/

0
19 комментариев
Написать комментарий...
Yan Ignatovich

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

Ответить
Развернуть ветку
Мурад Магеррамов

R.I.P Figma

Ответить
Развернуть ветку
Artyom Konakov
Ответить
Развернуть ветку
Роман Косов

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

Ответить
Развернуть ветку
Kokoulin Nikolay

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

Ответить
Развернуть ветку
Ira Smirnova
Автор

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

Ответить
Развернуть ветку
Vlad Korobov

нифига себе что узнаю

Ответить
Развернуть ветку
Eugine Dychko

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

Ответить
Развернуть ветку
Alex Antipov

Красиво. Есть вероятность, что это заработает в мобайле?

Ответить
Развернуть ветку
Vlad Korobov

Не очень это в мобайле нужно. В мобайле нужно быстро и по делу. Анимацию ждать люди не готовы.

Ответить
Развернуть ветку
Pavel Osadchuk

Там можно сделать с помощью анимации чат, например как тут https://botsify.com/?

Ответить
Развернуть ветку
Ira Smirnova
Автор

Павел, если вы про иллюстрацию чата, которая на обложке — можно. Чтобы сделать чат как сервис, анимации по шагам недостаточно :(

Ответить
Развернуть ветку
Pavel Osadchuk

Не, именно анимашка интересует. Чат как сервис у нас уже есть
Спасибо, будем изучать

Ответить
Развернуть ветку
Nikita Maskva

sexейно)

Ответить
Развернуть ветку
Роман Овсянников

Моя любимейшая тильда, ты прекрасна! Это очень круто!

Ответить
Развернуть ветку
Ira Smirnova
Автор

Спасибо!

Ответить
Развернуть ветку
Алексей Никифоров

очень сильно не хватает либо функционала, либо уроков (если этот функционал предусмотрен) по парной анимации в Zero Block. Например: мне нужно, чтобы текст увеличился в размере и подчеркивался линией. Мне нужно либо брать уже готовый шаблон, который не всегда подходит под требования, либо выбирать что-то одно из двух. Как я могу сочетать сразу два элемента анимации? И возможно ли это?

Ответить
Развернуть ветку
_ ivanov

Анимация сейчас кому-то вообще нужна?
Исключения: Промо страницы, сайты визитки и лендинги.

Ответить
Развернуть ветку
Yan Ignatovich

Вы не поверите, но она даже на мобильных кому-то нужна :-)

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
16 комментариев
Раскрывать всегда