Как сделать необычную анимацию загрузки страницы в Figma
В данном уроке мы поэтапно разберёмся, как создать анимацию загрузки страницы в Figma, где в качестве шкалы загрузки выступает текст.
Шаг 1
- Создаём фрейм (F).
- Добавляем элементы дизайна, которые будут появляться после загрузки нашей страницы.
Шаг 2
- Группируем элементы (Ctrl + G) в несколько отдельных групп, и выносим их за пределы фрейма.
- Пишем текст, который будет закрашиваться.
Шаг 3
- Дублируем слой с текстом (Ctrl + D).
- На копии слоя меняем цвет текста на более тусклый.
- Слой с закрашенным текстом переносим на передний план и оборачиваем его во фрейм (Ctrl + Alt + G).
- Поставьте галочку Clip content в меню справа.
Шаг 4
- Уменьшаем ширину нашего фрейма.
- Дублируем фрейм.
- На копии фрейма разворачиваем наш фрейм с закрашенным текстом, чтобы он полностью закрывал текст под ним.
- Сдвигаем края фрейма с закрашенным текстом так, чтобы он не перекрывал текст под ним.
Шаг 5
- Дублируем фрейм.
- На копии фрейма разворачиваем наш фрейм с закрашенным текстом, чтобы он полностью закрывал текст под ним.
Шаг 6
Связываем фреймы со следующими настройками:
- After delay — 1 ms
- Smart animate
- Slow — 1500ms.
Шаг 7
- Дублируем фрейм.
- Выделяем фрейм с текстом и текст, который не закрашен, уменьшаем (K) и перемещаем в верхнюю часть страницы.
- Достаём наши элементы дизайна во фрейм.
Шаг 8
Создаём анимацию между нашими фреймами, со следующими настройками:
- After delay — 1ms
- Smart animate
- Slow — 600ms.
Готово!
Необычная анимация для твоих будущих проектов готова. Экспериментируйте со шрифтами, размером и цветом, а также настройками этой анимации для создания интересных прелоадеров для своих проектов.
Рекомендуем ознакомиться:
Как сделать голографический эффект в Figma
В этом уроке мы научимся создавать голографический эффект не используя сторонние плагины и ресурсы.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
