Zero Block: триггерная (зависимая) анимация
Как настроить анимацию элемента, которая будет вызываться по клику или наведению на другой элемент
Видеоурок
Пошаговая анимация
Обзорная статья по основным возможностям
Статья о работе с контейнерами и созданию «резиновых» элементов
Cписок всех комбинаций для ускорения работы
Справка по простой анимации: фиксации, параллаксу и анимации появления
Статья о сложной пошаговой анимации: основные принципы, настройки и примеры
Как автоматически импортировать макет из Figma в Zero Block
Определяем базовую структуру дизайна и ускоряем работу с макетом
Начало работы с триггерной анимацией
Триггерная анимация доступна в настройках пошаговой анимации Zero Block. Для начала работы с триггерной анимацией нужно изучить основы работы пошаговой анимации по инструкции.
Для того, чтобы анимировать элемент по триггеру, начните настройку пошаговой анимации. Для этого нажмите на кнопку ADD в блоке Step by step animation в настройках элемента в Zero Block.
Выберите тип события, по которому будет начинаться анимация. Триггерная анимация может работать только при наведении (on Hover) или клике (on Click).
В блоке Триггер добавьте элемент, клик на который будет начинать анимацию. Нажмите на Add trigger и кликните на элемент в Zero — он будет триггером.
После выбора триггера добавьте шаги анимации. В нашем примере мы добавим обычное перемещение шейпа на 300 px направо при клике на кнопку.
Другие примеры триггерной анимации
Показываем примеры триггерных анимаций и рассказываем, как их настроить
Проверка работы анимации в браузере
Кроме кнопок Play Element и Play All в Тильде есть возможность сразу посмотреть работу анимации в режиме предпросмотра.
Для этого удобно в браузере открыть 2 вкладки: на одной страница, в которой открыт редактор Zero Block, и на второй — та же страница в режиме предпросмотра.
В этом случае при нажатии на кнопку Save в Zero Block изменения будут отображаться на странице предпросмотра после обновления страницы.
Для этого удобно в браузере открыть 2 вкладки: на одной страница, в которой открыт редактор Zero Block, и на второй — та же страница в режиме предпросмотра.
В этом случае при нажатии на кнопку Save в Zero Block изменения будут отображаться на странице предпросмотра после обновления страницы.
