# Анимации

> Оживите сайт готовыми эффектами — плавное появление, живые кнопки и карточки, постоянное движение. Выберите элемент, нажмите «Анимация» и посмотрите эффект сразу на странице. Бесплатно.

Движение делает сайт живым: заголовок проступает при загрузке, карточки выезжают по очереди при прокрутке, кнопка откликается на курсор. В Velvio есть библиотека из 41 готового эффекта — они подбираются под тип элемента и ставятся одним кликом, без ИИ и без кредитов.

## Добавить анимацию

1. В редакторе выберите элемент — кнопка **«Выбрать на странице»** в строке чата или **Alt+S**. На планшете дважды коснитесь элемента.
2. На панели над элементом нажмите **«Анимация»**. Слева, на месте чата, откроется окно с живыми примерами эффектов, подходящих именно этому элементу. Примеры повторяются по кругу — можно спокойно рассмотреть.
3. Нажмите на пример — эффект сразу появится на элементе. Наведите мышь на элемент, чтобы увидеть его ещё раз. Не понравился — выберите другой.
4. Можно выбрать другой элемент на странице — окно останется и покажет эффекты для него.
5. Эффект попадёт в **«Правки на странице»** над чатом. Нажмите **«Применить»** — сайт соберётся с анимацией за несколько секунд.

<video src="/docs/video/animate.mp4" poster="/docs/video/animate.jpg" autoplay muted loop playsinline aria-label="Видео: выбрать заголовок, открыть «Анимация» и перебрать эффекты"></video>

![Панель «Анимация» у выбранного заголовка: эффекты появления и постоянные](https://velvio.space/docs/shots/anim-panel.webp)

Перебирать эффекты можно сколько угодно: в правки попадёт только последний выбранный. Отменить выбор — **Ctrl+Z** или **↶**. Закрыть окно — **Esc** или **✕** (невыполненные правки останутся), второй **Esc** снимет выбор с элемента.

На телефоне окно выезжает снизу поверх сайта.

## Какие бывают эффекты

Эффекты разделены на три вида — в панели они так и сгруппированы.

| Вид | Когда работает | Примеры |
|---|---|---|
| **При появлении** | один раз, когда элемент показался на экране | проявление, выезд снизу или сбоку, из размытия, шторка, пружина |
| **Всё время** | постоянно, пока элемент на экране | парение, пульс, блик по кнопке, медленный наезд камеры на фото, переливы по буквам |
| **При наведении** | когда посетитель наводит курсор | приподнять карточку, свечение кнопки, 3D-наклон, подчёркивание ссылки |

Набор зависит от элемента:

- **заголовок и текст** — буквы из разрядки, шторка, переворот, печатная машинка, сборка из букв, расшифровка, волна по буквам, переливы;
- **картинка** — шторка, наезд камеры, парение, лупа, RGB-глитч, приближение и яркость при наведении;
- **кнопка** — пружина, приподнять, свечение, сдвиг, магнит, блик, блик по рамке, сияние, пульс, кольцо света, парение;
- **карточка и блок** — подъём из размытия, с поворотом, содержимое по очереди, луч по рамке, радужная рамка, парение, приподнять и 3D-наклон при наведении, веер для блока с картинками;
- **иконка** — пружина, парение, пульс, покачивание, вращение, магнит.

Появления из первой строки таблицы (проявление, выезды, приближение, из размытия, подъём из размытия) есть у любого элемента.

## Карточки из списка

Если выбрать одну карточку из повторяющихся (услуги, товары, отзывы), эффект получат все карточки этого списка — и появятся они по очереди, «лесенкой». Номер карточки виден на панели, например «2/6».

## Убрать анимацию

Выберите элемент, откройте **«Анимация»** и нажмите **«Без анимации»**, затем **«Применить»**.

## Сложнее, чем готовый эффект

Счётчик цифр, параллакс, движение по сценарию — это уже не готовый эффект. Выберите элемент, нажмите **«Спросить ИИ»** и опишите, что нужно, например «числа в блоке "3 200+ пациентов" отсчитываются при появлении». Готовые формулировки — в разделе [Анимации — готовые запросы](https://velvio.space/docs/tricks/generate-animations).

## Эффекты обновляются сами

Библиотека эффектов подключена к сайту с сервера Velvio. Когда мы улучшаем эффект или добавляем новые, опубликованные сайты получают это сами — пересобирать ничего не нужно.

## Если эффект не поставился

Иногда элемент в коде собран из общего компонента, и прямо на него эффект не поставить. Тогда редактор предложит сделать то же самое через ИИ — **бесплатно**.

## Советы

- Анимируйте два-три главных элемента: первый экран, кнопку заявки, ключевой блок. Когда движется всё, посетитель не понимает, куда смотреть.
- Постоянные эффекты — на одну вещь на экране: блик на главной кнопке или парение иконки, а не всё сразу.
- «Печатная машинка» и «Переливы» — для короткой строки или одного-двух слов.
- У посетителей, которые включили в системе «уменьшить движение», анимации отключаются автоматически: всё просто видно сразу.
- Библиотека эффектов подключается к сайту с сервера Velvio, поэтому скачанный архивом сайт тоже её использует — нужен интернет.