Делаем крутую анимацию карточек в Figma
Для создания интересной анимации карточек нам понадобятся изображения без фона (в нашем случае – это мячики).
Шаг 1
- Создаём три фрейма.
- Заливаем их разными цветами: #42CF00, #CF6300, #006CCF.
Шаг 2
- Добавляем надписи и изображения в наши фреймы.
- Непрозрачность у надписи ставим 50%.
- Также добавляем кнопку в каждый фрейм.
- У всех фреймов должна быть нажата галочка Clip content.
Шаг 3
- Создаём новый фрейм.
- Переносим в него один из наших фреймов и выравниваем по левому краю.
Шаг 4
- Добавляем следующий фрейм в пустое пространство, которое не покрыл первый.
- Сворачиваем второй фрейм на половину пустого пространства.
- Меняем непрозрачность у надписи на 0%.
- Вытягиваем мячик, чтобы он был виден, уменьшаем и немного поворачиваем его.
Шаг 5
- Добавляем третий фрейм.
- Также сворачиваем, делаем текст прозрачным, достаём и поворачиваем мячик.
Шаг 6
- Дублируем получившийся фрейм.
- На копии фрейма, сворачиваем первый фрейм и разворачиваем второй.
- Увеличиваем мячик, поворачиваем его в исходное положение, и центрируем его.
- Непрозрачность надписи меняем на 50%.
Шаг 7
- Дублируем фрейм.
- На копии фрейма, сворачиваем второй фрейм и разворачиваем третий.
- Увеличиваем мячик, поворачиваем его в исходное положение, и центрируем его.
- Непрозрачность надписи меняем на 50%.
Шаг 8
Связываем карточки с соответствующими фреймами:
- On click
- Smart animate
- Slow — 600ms.
Готово!
Теперь ты умеешь создавать крутую анимацию карточек. Данную анимацию можно использовать для интересного отображения различных категорий или товаров на сайте.
Рекомендуем ознакомиться:
Бесконечный слайдер в Figma
В этом уроке мы научимся создавать интересный и необычный слайдер в Figma.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
