СБС анимация в Тильде

Время чтения статьи 10 минут.
Также, после статьи, есть подробная видеоинструкция
Нет времени читать статью?
Но вам нужно создание сайта или интернет-магазина?
Вы можете оставить заявку на создание сайта или разработку интернет-магазина с SEO трафиком.
А также на личное обучение на конструкторе Тильда.
Если вы собираетесь создать сайт самостоятельно, продолжайте чтение статьи
В конце статьи, для тех, кто дочитал, будет очень мощный совет

Содержание

Виды step-by-step анимации в Tilda

В Тильде, есть несколько видов step-by-step анимации. Перечислю их:

  1. Объект анимируется, если находится на экране;
  2. Объект анимируется, если мышью нажать/навести на триггер;
  3. Объект анимируется по скроллу
Что такое триггер?
Триггер — это любой предмет (текст, кнопка, shape, картинка и тд) в зеро-блоке, на который при нажатии или наведении, происходит анимация.

Давайте по порядку разберем каждый из видов

Объект анимируется, если находится на экране

В этом виде анимации, объект будет анимирован, в двух случаях:
  1. Если сам объект будет на экране (element on Screen)
  2. Если блок, в котором находится объект будет на экране (block on Screen)

То есть нам нужно выбрать element on Screen или block on Screen
Далее, Start Trigger, это когда начнет работать анимация. Когда элемент/блок будет наверху, в центре или внизу и выбрать через какое количество пикселей это сработает, параметр Trigger Offset.

Например, вы поставили, что анимация начнет воспроизводиться, когда элемент будет вверху и поставили Trigger Offset на 150, значит анимация сработает, когда предмет будет не в самом верху, а раньше на 150 пикселей
Настройки сбс
Первый вид анимации

Какие настройки тут есть

Duration — длительность выполнения одного шага в секундах
Move X,Y — на сколько пикселей от стартового положения, будет смещен объект по оси х (первое поле) и по оси у (второе поле)
Scale X, Y — увеличение или уменьшение объекта, 100% реальный размер, в большую или меньшую сторону будет, соответственно, увеличиваться или уменьшаться объект.
Лайфхак. Если нажать мышью на Differ X, Y, то появится еще одно поле, и можно будет регулировать изменение размера разных сторон, то есть не только пропорциональное изменение
Opacity — тут все просто. Этот бегунок меняет прозрачность объекта
Rotate — поворот объекта по часовой или против часовой стрелки
Easing — интересный параметр, он отвечает за замедление темпа и добавляет "хаосности" анимации. (параметр elasticFin)
Delay — это пауза, в сек. То есть задержка в анимации. Если вы поставите этот параметр на 1 секунду, то анимация начнет проигрываться через 1 сек.

Эти настройки относятся только к первому виду анимации "Объект анимируется, если находится на экране"
Настройки анимации
Настройки шагов анимации

Второй тип анимации:
Объект анимируется, если мышью нажать/навести на триггер

Вид анимации, когда мы хотим, например, чтобы при нажатии на предмет, происходило что-то на экране. Нажали на шэйп, а он передвинулся в другое место. Тут в принципе ограничивается все только вашей фантазией :) На этой странице, есть пример такой анимации

Теперь по параметрам

Чтобы выбрать этот тип анимации, нужно выбрать в Even'е - on hover (при наведении) или on click (при клике)

Loop — это зацикливание анимации, то есть нужно повторять или нет

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

Steps — это шаги, их может быть неограниченное кол-во.
Лайфхак
Если хотим, чтобы на первом шаге у нас ничего не происходило с объектом, как нулевой шаг, то в первом шаге, ничего не меняя в настройках шага, ставим только длительность Duration на 0. Это работает для всех видов анимации
Настройки тут такие же, как и в первом типе анимации


Переходим к заключительному виду анимации

Объект анимируется по скроллу

Этот вид анимации, для меня самый интересный. С помощью этого вида, можно сделать эффект горизонтального скролла на сайте. Когда скроллишь сайт и кажется, что все идет не снизу вверх, а справа налево. (про это рассказывать здесь не буду, эта тема достойна отдельного поста.

Расскажу, о более простых вещах. И ниже будет несколько примеров.

Суть анимации, когда скроллишь сайт, происходит анимация нашего предмета. Мы можем делать: перемещение, уменьшение, кручение, менять прозрачность объекта, а также его фиксацию по отношению к другим объектам.

Настройки такие же, кроме пункта Easing, за место него есть Fix, это зафиксировать объект относительно других

Например, у нас есть жирный заголовок слева и немного контента (текст, фото) справа.
Мы хотим сделать, чтобы наш заголовок был справа и когда шел контент, заголовок был зафиксирован, пока идет текст и фотки слева. Легко)

Берем заголовок
Идем в анимацию и ставим event - On Scroll
Ставим Start Trigger - Top (верх)
Trigger Offset - 200 пикселей
В настройках Fix ставим Fixed, выставляем дистанцию, в моем случае это 850 px. Тут нужно померить, сколько пикселей при прокрутке будет фиксация. Ставим примерно такое же расстояние (чуть меньше), где примерно заканчивается наш контент справа. У меня на 1000 пикселей, заканчивается. Я ставлю 850, чтобы заголовок уходил наравне с текстом справа.
Все)

Не забудьте включить дополнительно анимацию на мобильных устройствах, если она нужна.
Как включить ее? Выбираем любое разрешение (только не ноутбук) вверху в редакторе Zero-блока, выбираем наш анимированный объект, идем вниз, где включается анимация и нажимаем "Switch On".

Теперь анимация включена для всех разрешений. Только не забывайте, что для всех остальных разрешений экранов, нужно настраивать ее отдельно. И помните, анимация сильно увеличивает нагрузку на устройство, поэтому на мобильных с ней осторожно!

На самом деле, тут ничего сложного нет. Нужна практика. Но в принципе, в Тильде с приходом СБС анимации все стало реализуемо.

Но все таки, не переиграться.

Спасибо всем за внимание. Надеюсь статья для вас будет полезна. Постарался донести всю суть.

Пример анимации по скролу

Можно играть на улице
Машинка управляется от пульта управления, который работает на расстоянии около 50 метров (в зависимости от модели машинки), что дает возможность управлять ей на большие расстояния
Не застрянет
Машинка-перевертыш транформируется из гоночной, во внедорожник. Поэтому она проезжает практически по любой поверхности и преодолевает любые препятствия
Ребенок перестанет просить планшет
О таком подарке мечтает любой ребенок. Его перестанут интересовать гаджеты и он больше времени будет проводить на улице.
Не надоест
С машинкой можно играть практически везде. Она вращается на 360 градусов, ездит боком. Управляется жестами. (только модели Skidding Stunt Car и Double Sided)

Пример всех видов анимации

Zero bl
Click „Block Editor” to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
create your own block from scratch
Click „Block Editor” to enter the edit mode.
o
c
k
Нажмите
T
i
l
d
a
Анимация по скроллу
Так мы фиксируем заголовок на определенное количество пикселей. А остальной контент справа, проходит мимо)
Мы можем легко управлять вниманием посетителя. Заставляя читать его нужную нам информацию
Когда мы делаем анимацию, чтобы удобно было ее смотреть и быстро корректировать, нужно на второй вкладке открыть эту страницу в режиме Предпросмотра. Тогда, при внесении каких либо изменений, нажимаете "Ок" в редакторе Зеро-блока не выходя, переключаетесь на вкладку Предпросмотра и обновляете страницу. Все изменения отобразятся на ней!
Обещаный бонус
Еще анимацию можете посмотреть на этой моей работе https://kuhni-kraft.ru/
Время просмотра 6 минут
Рекомендуемые статьи
Видео

Подпишитесь на новые статьи

Нажимая на кнопку, Вы соглашаетесь с политикой конфиденциальности
Made on
Tilda