что такое trigger offset в тильде
Что такое trigger offset в тильде
1. Начнем с настройки Trigger offset / Точки начала анимации.
Точка отсчитывается относительно выбранной нами области, Window center.
Начните с верхнего объекта. Так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимацииточка равна 0px. Это значит, что первый объект залипнет точно по центру экрана.
Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ100px.
2. Настроим Distance / Дистанцию.
Это то расстояние, которое должен пройти объект в режиие фиксирования. Начните настройку анимации с нижнего объекта. Так вам будет удобнее рассчитать расстояние залипания.
Круг. Круг в режиме фиксации на экране проходит расстояние до квадрата. После этого эффект фиксации пропадает и обе фигуры скроллятся как обычно.
По сути, круг должен добраться до положения квадрата, но остановиться выше, чтобы зафиксироваться рядом.
Что такое trigger offset в тильде
1. Начнем с настройки Trigger offset / Точки начала анимации.
Точка отсчитывается относительно выбранной нами области, Window center.
Начните с верхнего объекта. Так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимацииточка равна 0px. Это значит, что первый объект залипнет точно по центру экрана.
Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ100px.
2. Настроим Distance / Дистанцию.
Это то расстояние, которое должен пройти объект в режиие фиксирования. Начните настройку анимации с нижнего объекта. Так вам будет удобнее рассчитать расстояние залипания.
Круг. Круг в режиме фиксации на экране проходит расстояние до квадрата. После этого эффект фиксации пропадает и обе фигуры скроллятся как обычно.
По сути, круг должен добраться до положения квадрата, но остановиться выше, чтобы зафиксироваться рядом.
Zero Block: пошаговая анимация
Внутри Zero Block есть два режима анимации:
1) Basic Animation — простая анимация. Это готовые, самые часто используемые эффекты, например, эффект появления (через прозрачность, снизу вверх, справа налево и т.д.), параллакс и фиксация. Их достаточно в 90% случаев.
2) Step-by-step Animation — пошаговая анимация. Позволяет реализовать яркие, креативные идеи по вашему сценарию.
Как автоматически импортировать макет из Figma в Zero Block
Нажмите «Редактировать блок» в левом верхнем углу блока, чтобы перейти в режим редактирования.
Добавьте новый элемент, выделите его, откройте настройки, пролистайте до раздела Step by Step Animation и нажмите кнопку Add.
У начала анимации есть дополнительные опции Start Trigger, Loop и Trigger Offset.
Первый шаг, задан по умолчанию — это Start. Далее нужно добавлять шаги и на каждом шаге менять свойства элемента. Так элемент будет меняться.
Чтобы добавить шаг, нажмите на кнопку Add Step.
У каждого шага есть набор свойств: Duration, Move, Scale, Opacity, Rotate, Easing и Delay.
Duration — длина анимации в секундах;
Move — координаты, куда передвигается элемент относительно начального расположения. Их можно задать как значениями, так и передвинуть элемент;
Scale — процент увеличения или уменьшения элемента к концу этого шага;
Opacity — значение прозрачности элемента к концу шага;
Rotate — поворот элемента в градусах к концу шага;
Easing — выбор эффекта выполнения анимации: Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;
Delay — задержка перед выполнением анимации.
СБС анимация в Тильде
Содержание
Виды step-by-step анимации в Tilda
В Тильде, есть несколько видов step-by-step анимации. Перечислю их:
Давайте по порядку разберем каждый из видов
Объект анимируется, если находится на экране
Например, вы поставили, что анимация начнет воспроизводиться, когда элемент будет вверху и поставили Trigger Offset на 150, значит анимация сработает, когда предмет будет не в самом верху, а раньше на 150 пикселей
Какие настройки тут есть
Duration — длительность выполнения одного шага в секундах
Move X,Y — на сколько пикселей от стартового положения, будет смещен объект по оси х (первое поле) и по оси у (второе поле)
Scale X, Y — увеличение или уменьшение объекта, 100% реальный размер, в большую или меньшую сторону будет, соответственно, увеличиваться или уменьшаться объект.
Лайфхак. Если нажать мышью на Differ X, Y, то появится еще одно поле, и можно будет регулировать изменение размера разных сторон, то есть не только пропорциональное изменение
Opacity — тут все просто. Этот бегунок меняет прозрачность объекта
Rotate — поворот объекта по часовой или против часовой стрелки
Easing — интересный параметр, он отвечает за замедление темпа и добавляет «хаосности» анимации. (параметр elasticFin)
Delay — это пауза, в сек. То есть задержка в анимации. Если вы поставите этот параметр на 1 секунду, то анимация начнет проигрываться через 1 сек.
Эти настройки относятся только к первому виду анимации «Объект анимируется, если находится на экране»
Второй тип анимации:
Объект анимируется, если мышью нажать/навести на триггер
Вид анимации, когда мы хотим, например, чтобы при нажатии на предмет, происходило что-то на экране. Нажали на шэйп, а он передвинулся в другое место. Тут в принципе ограничивается все только вашей фантазией 🙂 На этой странице, есть пример такой анимации
Теперь по параметрам
Loop — это зацикливание анимации, то есть нужно повторять или нет
Trigger — наиважнейший параметр. Триггером обозначаем тот объект, при клике или наведении на который, у нас будет воспроизводиться анимация.
Триггеров может быть несколько.
Steps — это шаги, их может быть неограниченное кол-во.
Настройки тут такие же, как и в первом типе анимации
Переходим к заключительному виду анимации
Объект анимируется по скроллу
Этот вид анимации, для меня самый интересный. С помощью этого вида, можно сделать эффект горизонтального скролла на сайте. Когда скроллишь сайт и кажется, что все идет не снизу вверх, а справа налево. (про это рассказывать здесь не буду, эта тема достойна отдельного поста.
Расскажу, о более простых вещах. И ниже будет несколько примеров.
Суть анимации, когда скроллишь сайт, происходит анимация нашего предмета. Мы можем делать: перемещение, уменьшение, кручение, менять прозрачность объекта, а также его фиксацию по отношению к другим объектам.
Настройки такие же, кроме пункта Easing, за место него есть Fix, это зафиксировать объект относительно других
Например, у нас есть жирный заголовок слева и немного контента (текст, фото) справа.
Мы хотим сделать, чтобы наш заголовок был справа и когда шел контент, заголовок был зафиксирован, пока идет текст и фотки слева. Легко)
Базовая и пошаговая анимация в Тильда [простым языком]
Привет, друзья! На связи Евгений Тридчиков и в этом видео мы разберем виды анимации в Тильда.
Перемещаемся на тестовую страницу. Во-первых, как видите, у готовых блоков есть базовые настройки анимации. Это простые эффекты для текста, кнопок, которые вы можете изучить на досуге. Не будем на этом останавливаться.
Анимация готового блока Тильда
Переходим в редактирование зеро блока, выделим элемент, опции, скролл вниз. И здесь нас интересует две последние панели настроек. Это базовая и пошаговая анимация.
Базовая и пошаговая анимация в нулевом блоке
Базовая анимация позволяет настроить эффект появления элемента на экране, параллакс эффект и установить фиксированное положение элемента.
Базовая анимация нулевого блока
Среди эффектов появления: слева, справа, снизу, сверху и увеличение. При выборе определенного эффекта появляются дополнительные настройки. Здесь у вас такие возможности, как:
Параллакс
Далее параллакс эффект. Триггером может быть скролл. Здесь мы выбираем скорость движения элемента относительно скорости скролла (в процентах). Триггером может быть и движение курсора. Тогда мы выбираем смещение элемента по оси Х и У относительно местоположения курсора на экране (в пикселях).
Базовая анимация в нулевом блоке Тильда
Фиксирование
Далее фиксация элемента относительно экрана: вверх, центр или низ. Здесь можно добавить расстояние между элементом и выбранным краем экрана. А также указать расстояние в пикселях, которое вы будете скролить и элемент будет сохранять фиксированное положение.
Обратите внимание, что работу параллакса и фиксированной анимации вы не можете проверить в режиме редактирования.
Вам нужно сохраниться, выйти и запустить режим превью. Это хорошо, потому что только попытками вы поймете логику работы.
Пошаговая анимация нулевого блока
Базовая анимация это прикольно, но самые интересные и вау-эффекты достигаются за счет пошаговой анимации. Обратите внимание, что пошаговая анимация замещает базовую.
Триггер пошаговой анимации в Тильда
Жмем добавить и выбираем триггер для начала анимации: появление элемента на экране, появление блока на экране, скролл, ховер, клик.
Далее вы можете уточнить триггер с помощью расстояния до края экрана, выбрать зацикливание анимации, протестировать анимацию. Ниже, собственно, шаги анимации, то есть сам сценарий.
А внизу подсказка о том, что можно изменить состояние элемента по умолчанию с помощью первого шага, где следует задать duration (продолжительность анимации) равным 0.
Жмем добавить первый шаг. Перед вами настройки анимации, среди которых:
Для начала я рекомендую определить сценарий, затем разбить его на шаги, и задать свойства элемента на каждом шаге. А поможет вам в этом супер крутой учебник пошаговой анимации от Тильда.
Здесь представлены пошаговые инструкции около 20 самых популярных сценариев. Тут и ховер для карточек, и зацикленный кораблик на волнах, и сборка композиции из разных элементов – в общем все, что хотите.
Сейчас вам нужно уделить пару часов этим инструкциям, повторить у себя в проекте и буквально за один день вы освоите пошаговую анимацию в Тильда.
Смотреть видео
В следующем уроке мы разберем настройку целей в Яндекс Метрике и Google Analytics для форм на Тильде. Если видео получилось полезным, поделитесь с коллегами. С вами был Евгений Тридчиков, и я желаю вам великолепного дня!