[Фича 14] Интересный эффект анимации

Привет, чуваки и чувихи! Искал я вдохновение среди сайтов #madeontilda и наткнулся на очень интересный и очень простой эффект на одном из сайтов.

Сегодня научимся делать его, используем гифку и пошаговую анимацию. Погнали!

Добавляем Zero Block

Наш любимый и родной. Давайте разберёмся какие объекты у нас тут расположены. Я хочу разобрать именно правую часть экрана.

Здесь у нас два объекта. Первый - это обычная фигура, которая должна увеличиваться. Второй - это гифка с перелистыванием экранов.

Слева экрана я просто накинул текст. Можете сделать там что угодно. В уроке мы разбираем именно механику анимации.

Работаем с фигурой.

Нажимаем на "Добавление объекта" и добавляем фигуру. Сразу открываем её настройки.

Добавился жёлтый квадрат, нам нужно сделать круг.
В настройках ищем параметр FIGURE и выбираем CIRCLE.

Цвет круга у меня: #ffd105

У меня размеры круга 148 на 148 пикселей, этой величины достаточно, чтобы круг не вылезал за границы самой гифки (мы будем прятать круг за изображение)

Открываем пошаговую анимацию фигуры.

В настройках идём в Step by step animation.

EVENT: element on screen (анимация воспроизводится когда элемент появляется на экране)

Добавляем первый шаг.

Здесь нам нужно вспомнить, что нам нужно сделать увеличение объекта.
Поэтому в первом шаге ищем параметр Scale и ставим его на 400%.

Я сделал немного нестандартный ход анимации. Ищем пункт easing.

Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;

Я поставил easeInOut.

Нажимаем "Play Element" и смотрим как выглядит наша анимация.

Добавляем гиф анимацию.

Здесь хочется отдать должное сайту https://site.slavnydesign.com/?ref=https://tilda.cc/ru/madeontilda/

Я взял гифку от сюда. Этот сайт выполнили эти ребята: https://slavnydesign.com

Это не реклама. Считаю должным всегда указывать источник от куда взялся контент.

Нажимаем добавление объекта и добавляем изображение.

Загружаем в настройках эту гифку и ищем параметр border. Нам ставим raduis 30, чтобы слегка скруглить края.

Выделяем оба объекта (гифку и фигуру).

Выравниваем их по центру относительно друг друга. Галочку надо поставить на to each other.

Помещаем гифку на верхний план, чтобы круг оказался под ней.

Вот и всё, готово! Крутая анимация получилась?
Ждите новых уроков, всем пис!