Анимация появления строк текста по очереди в Figma
В этом уроке мы поэтапно разберём, как сделать анимацию текста, чтобы строки появлялись по очереди.
Шаг 1
- Создаём фрейм.
- Добавляем фотографии и текст (T).
- Каждая строка должна быть отдельным текстовым слоем.
Шаг 2
- Оборачиваем каждую строку во фрейм (Ctrl + Alt + G).
- Поставьте галочку Clip content.
- Сдвигаем тексты за пределы созданных фреймов (можно воспользоваться зажатой клавишей Shift и стрелочками).
- У фотографий меняем непрозрачность на 0%.
- Дублируем фрейм.
Шаг 3
- На копии фрейма, непрозрачность фотографии меняем на 100%.
- Достаём первый текст на 30px.
- Дублируем фрейм.
Шаг 4
- Первый текст достаём ещё на 30px.
- Также достаём второй фрейм на 30px.
- Дублируем фрейм.
Шаг 5
- Первый текст достаём ещё на 30px.
- Также достаём второй фрейм ещё на 30px.
- Третий текст достаём на 30px.
- У второй фотографии непрозрачность ставим 100%.
Шаг 6
Продолжаем дублировать фреймы и доставать тексты по 30px. Пока они полностью не станут видны.
Шаг 7
Выбираем все фреймы и создаём анимацию со следующими настройками:
- After delay — 1ms.
- Связываем слои друг за другом.
Шаг 8
Выделяем все фреймы и выбираем следующие настройки анимации:
- After delay — 1ms
- Smart animate
- Ease in — 150ms.
Готово!
Теперь ты умеешь создавать анимацию появления текста по очереди. Эту анимацию можно использовать для заголовков текста на вашем сайте, также она отлично подойдёт для первого экрана.
Рекомендуем ознакомиться:
Как сделать эффект фонарика в Figma
В этом уроке мы поэтапно разберёмся, как создать свечение от фонарика у текста при ховере.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
