> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Настройки Animation в LanderLab: как выбрать анимацию из библиотеки и задать Trigger, Speed, Delay и Repeat, чтобы привлечь внимание к нужным элементам.

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

## Где это найти

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

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

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

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

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

* Attention Seekers
* Entrances

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

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Cnvtc1TpBSCIUd3d/images/image-17.png?fit=max&auto=format&n=Cnvtc1TpBSCIUd3d&q=85&s=ab72592c91c31fbe3b1262a2491a4a8a" alt="Библиотека анимаций со строкой поиска и категориями" width="664" height="933" data-path="images/image-17.png" />
</Frame>

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

### 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 применяйте только где нужно


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.