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.

Готово!

Теперь ты умеешь создавать анимацию бегущей строки по ховеру.