> ## 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).

# Adding animations

Animations are a simple way to make your website more lively and attractive to visitors. By animating elements or entire blocks as the page scrolls, you can draw attention to important content, improve visual perception, and enhance the overall impression of the website. 

In this guide, you will learn how to easily activate and configure animations for individual elements (text, images, etc.) and entire blocks.

**Contents:**
* [Adding animations to elements](#1-adding-animations-to-elements)
* [Adding animations to blocks](#1-adding-animations-to-blocks)

# Adding animations to elements

||| ${color}[#f97700](Important:) Animations are currently available for the following elements: Text, Heading, Social Icons, Image, Video, Button.

1. Open the element settings and go to the **Animations** tab, where you can activate the switch next to **Dynamic appearance of elements when scrolling**:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-animacii-angl-1_19rqbzr.png)
For text elements, click on the text line and click on the **duck icon** in the context menu that appears:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-animacii-angl-2_opvoq9.png)
2. Next, you can select the animation type ①, the position of the element when it is performed ②, and the animation speed ③:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-animacii-angl-3_ti66vj.png)
3. Don't forget to [publish](/en-us/article/publishing-a-site-tgxmch/) your site to save the changes.

# Adding animations to blocks

||| ${color}[#f97700](Important:) Animation enabled in the block settings will be applied to all added block elements.

|| ${color}[#ffa800](Note:) If animation is set in the block settings, but a separate element in this block has its own animation parameters, then its individual settings will apply.

1. Open the block settings and go to the **Animations** tab, where you can activate the switch next to **Dynamic appearance of elements when scrolling**:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-animacii-angl-4_rep0jp.png)
2. Next, you can select the animation type ①, the position of the block elements when it is performed ②, and the animation speed ③:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/dodavannya-animacii-angl-5_68xvyl.png)
3. Don't forget to [publish](/en-us/article/publishing-a-site-tgxmch/) your site to save the changes.