> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Додавання анімацій

Анімації — це простий спосіб зробити ваш сайт більш живим і привабливим для відвідувачів. Завдяки анімованій появі елементів або цілих блоків під час прокручування сторінки, можна акцентувати увагу на важливому контенті, покращити візуальне сприйняття та загальне враження від сайту. 

У цій інструкції ви дізнаєтеся, як легко активувати та налаштувати анімації для окремих елементів (тексту, зображень тощо) та цілих блоків.

**Зміст:**
* [Додавання анімацій до елементів](#1-dodavannya-animacij-do-elementiv)
* [Додавання анімацій до блоків](#1-dodavannya-animacij-do-blokiv)

# Додавання анімацій до елементів

||| ${color}[#f97700](Важливо:) наразі анімації доступні для наступних елементів — Текст, Заголовок, Іконки соцмереж, Зображення, Відео, Кнопка.

1. Відкрийте налаштування елемента та перейдіть до вкладки **Анімації**, де активуйте перемикач навпроти **Динамічна поява елементів при прокручуванні**:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-animacii-ukr-1_kp6t45.png)
Для текстових елементів, натисніть на текстовий рядок та клікніть по **іконці з качкою** у контекстному меню, що зʼявиться: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-animacii-ukr-2_1ocicwd.png)
2. Далі ви можете вибрати вид анімації ①, позицію елемента при її виконанні ② та швидкість анімації ③:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-animacii-ukr-3_1e3zfxu.png)
3. Не забудьте [опублікувати](/uk/article/publikaciya-sajtu-16hom55/) ваш сайт для збереження змін.


# Додавання анімацій до блоків

||| ${color}[#f97700](Важливо:) активована у налаштуваннях блоку анімація буде застосована до всіх доданих елементів блоку.

|| ${color}[#ffa800](Примітка:) якщо у налаштуваннях блоку задано анімацію, але окремий елемент у цьому блоці має власні параметри анімації, то для нього будуть працювати його індивідуальні налаштування.

1. Відкрийте налаштування блоку та перейдіть до вкладки **Анімації**, де активуйте перемикач навпроти **Динамічна поява елементів при прокручуванні**:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-animacii-ukr-4_ldhj4z.png)
2. Далі ви можете вибрати вид анімації ①, позицію елементів блоку при її виконанні ② та швидкість анімації ③:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-animacii-ukr-5_gsrjo9.png)
3. Не забудьте [опублікувати](/uk/article/publikaciya-sajtu-16hom55/) ваш сайт для збереження змін.