Animation: анимации элементов на лендинге

Анимации добавляют элементам движение, делая страницу более завлекающей и интерактивной. Они привлекают внимание, направляют пользователей и улучшают общее впечатление от страницы.

​

Где это найти

1. Выберите любой элемент (кнопку, изображение, текст и т. д.)
2. Перейдите в правую панель
3. Откройте раздел Animation
4. Нажмите + Add или отредактируйте существующую анимацию

​

Выбор анимации

В панели анимации есть большая библиотека эффектов.

• Прокручивайте список, чтобы посмотреть все доступные варианты
• Используйте строку поиска, чтобы быстро найти нужную анимацию

Анимации также сгруппированы по категориям, например:

• Attention Seekers
• Entrances

👉 Так проще найти подходящий тип анимации под вашу цель

​

Настройки анимации

​

Trigger

Определяет, когда запускается анимация:

• On Load → воспроизводится, когда элемент появляется
• On Hover → воспроизводится при наведении курсора
• On Click → воспроизводится по клику
• On Viewport → воспроизводится непрерывно (если поддерживается)

​

Speed

• Задаёт скорость анимации

​

Delay

• Добавляет паузу перед запуском анимации

​

Repeat

• Задаёт, сколько раз воспроизводится анимация

​

Пример

• Animation: Fade In
• Trigger: On Load
• Speed: Normal
• Delay: 0.3s
• Repeat: 1

👉 Результат: элемент плавно появляется при загрузке страницы

​

Рекомендации

• Делайте анимации деликатными и осмысленными
• Не используйте слишком много анимаций одновременно
• Используйте Entrances, чтобы плавно вводить элементы
• Анимации из категории Attention Seekers применяйте только где нужно