Hover анимация бегущей строки
В этом уроке мы научимся создавать бегущую строку с триггером по ховеру.
Шаг 1
- Создаём новый фрейм.
- Добавляем элементы дизайна и текст.
- Копируем первый текст, убираем заливку и добавляем ему обводку.
Шаг 2
- Копируем слово 7 раз.
- Выравниваем его относительно закрашенного слова.
- Оборачиваем текстовую строку во фрейм (Ctrl+Alt+G).
Шаг 3
- Уменьшаем фрейм с текстом по размерам основного фрейма.
- Поставьте галочку Clip content.
- Выносим фрейм с текстом за пределы фрейма.
- Дублируем фрейм.
- Создаём из фрейма Component Set.
Шаг 4
- Выносим направляющие по краям слова в первом варианте.
- Сдвигаем строку во втором варианте.
- Выравниваем по направляющим, чтобы текст совпадал с первым вариантом.
Шаг 5
Связываем варианты 1–2:
- After delay — 1ms
- Smart animate
- Linear — 5000ms.
Связываем варианты 2–1:
- After delay — 1ms
- Instant.
Шаг 6
Создаём такие Component set для каждого слова в нашем фрейме.
Шаг 7
- Дублируем основной фрейм.
- Переносим первый вариант соответствующего слова во фрейм и выравниваем его относительно текста.
- Непрозрачность у первого текста меняем на 0.
- Повторяем эти действия для всех фреймов.
Шаг 8
Связываем фреймы (от слова к фрейму):
- While hovering
- Instant.
Готово!
Теперь ты умеешь создавать анимацию бегущей строки по ховеру.
Рекомендуем ознакомиться:
3D объекты, не выходя из Figma
Для создания 3D объектов в Figma нам понадобится плагин Fig3D. В этом уроке мы пошагово разберёмся, как его использовать.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
