Найти в Дзене

Parallax анимация в Figma за 3 минуты

Простой паралакс в фигма 2020 с помощью Smart Animate за 3 минуты 👍
Логика работы анимации аналогична Adobe XD или Principle (лайк если знаком с ними).
Создаем фрейм с исходным состоянием, создаем следующий фрейм с промежуточным или финальным состоянием анимации.
Простыми словами - на следующем фрейме двигаем то что должно анимироваться.
Переходим на вкладку prototype и тянем стрелки (как на видео)
от первого фрейма к следующему, при этом выбираем Smart animate и выставляем задержку и скорость анимации по вкусу (ага, как солью 🙄) в interactions - выбираем after delay (через время)
Можно выбрать on click - означает что анимация начнется при клике на любой элемент внутри фрейма.
Тыцяем кнопку похожую на play в верхнем правом углу и наслаждаемся😉
Ссылка на файлы для тренировки https://cutt.ly/gdMlQVI
Проще посмотреть видосик 👇 Мой instagram - https://www.instagram.com/shain_di
Мой канал telegram- https://t.me/shain_design
Youtube - https://www.youtube.com/channel/UCRWJDM

Простой паралакс в фигма 2020 с помощью Smart Animate за 3 минуты 👍

Логика работы анимации аналогична Adobe XD или Principle (лайк если знаком с ними).
Создаем фрейм с исходным состоянием, создаем следующий фрейм с промежуточным или финальным состоянием анимации.
Простыми словами - на следующем фрейме двигаем то что должно анимироваться.

Переходим на вкладку prototype и тянем стрелки (как на видео)
от первого фрейма к следующему, при этом выбираем Smart animate и выставляем задержку и скорость анимации по вкусу (ага, как солью 🙄) в interactions - выбираем after delay (через время)

Можно выбрать on click - означает что анимация начнется при клике на любой элемент внутри фрейма.

Тыцяем кнопку похожую на play в верхнем правом углу и наслаждаемся😉


Ссылка на файлы для тренировки
https://cutt.ly/gdMlQVI

Проще посмотреть видосик 👇

Мой instagram - https://www.instagram.com/shain_di
Мой канал telegram-
https://t.me/shain_design
Youtube -
https://www.youtube.com/channel/UCRWJDMQBZ2qBymkp-niqSjw