Туториалы1 мин. чтения

Анимация на Хэллоуин в Figma

Для создания анимации на Хэллоуин нам понадобятся различные иллюстрации, которые дополнят нашу зловещую композицию.

Шаг 1

  • Создаём новый фрейм.
  • Добавляем радиальный градиент (#18075C — #0B032D).

Шаг 2

Добавляем текст (T).

Шаг 3

  • Создаём много эллипсов поверх текста.
  • Группируем наши эллипсы (Ctrl + G).
  • Создаём маску между группой с эллипсами и текстом (Ctrl + Alt + M).

Шаг 4

Добавляем зловещий котёл и пугающие глаза.

Шаг 5

Дублируем фрейм.

Шаг 6

  • На копии фрейма немного уменьшаем глаза и выносим их за пределы фрейма.
  • У слоя с котлом ставим непрозрачность «0».

Шаг 7

На копии фрейма выносим эллипсы внутри маски за пределы текста, чтобы он исчез.

Шаг 8

Создаём анимацию между фреймами со следующими настройками:

  • On click
  • Smart animate
  • Ease out — 1500ms.

Готово!

Крутая и зловещая анимация к Хэллоуину готова. Данную анимацию можно использовать на тематических сайтах и приложениях, а так же можно создать гифку и поставить себе на рабочий стол. Trick or treat!

Подписывайся на наш регулярный дайджест

Будем присылать полезные статьи и новости из мира AI, дизайна, технологий и карьерного развитиядизайна и технологий

Более 3000 человек уже получают полезные материалы