Анимируем переключение карточек в Figma
Для создания перехода между карточками, чтобы они шли друг за другом, нам понадобятся изображения, которые будут размещены в карточках.
Шаг 1
- Создаём фрейм с цветом 032FC9.
- Создаём Mesh градиент на фоне.
- При помощи плагина Blobs генерируем произвольные фигуры, заливаем их цветом и добавляем Layer blur.
Шаг 2
- Вне фрейма создаём карточки будущего слайдера. Группируем карточки по отдельности (Ctrl + G).
- Переносим карточки во фрейм.
- Добавляем заголовок и кнопки слайдера.
Шаг 3
- Размещаем карточки друг за другом.
- Уменьшаем вторую карточку, непрозрачность карточки ставим 5%, поворачиваем карточку на 2°.
- Уменьшаем третью карточку, непрозрачность карточки ставим 30%, поворачиваем на -2°.
Шаг 4
- Дублируем фрейм.
- Для удобства выравнивания можно вынести направляющие вне фрейма по верхним границам карточек.
- Увеличиваем 2-ю карточку, по размерам 1-й, и сдвигаем её ровно под 1-ю карточку, непрозрачность меняем на 100%, угол наклона 0°.
Шаг 5
- У 3-й карточки меняем непрозрачность на 50%, меняем угол наклона на 2°, увеличиваем и ставим на бывшее место 2-й карточки.
- Увеличиваем 1-ю карточку, и меняем непрозрачность на 0%.
Шаг 6
- Дублируем фрейм.
- Увеличиваем 3-ю карточку по размерам второй, и сдвигаем её ровно под 2-ю карточку, непрозрачность ставим 100%, угол наклона 0°.
- Увеличиваем 2-ю карточку, и меняем непрозрачность на 0%.
Шаг 7
Создаём анимацию (от кнопок к фреймам):
- On click
- Smart animate
- Slow — 600ms.
Готово!
Теперь ты умеешь создавать интересную анимацию переключения карточек. Такая анимация отлично подойдёт практически для всех блоков, где пользователю предоставляется выбор. Это может быть выбор категории, плейлистов и др.
Рекомендуем ознакомиться:
Анимация на Хэллоуин в Figma
Для создания анимации на Хэллоуин нам понадобятся различные иллюстрации, которые дополнят нашу зловещую композицию.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
