> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.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).

# How to add Animation

# Getting Started

You can add an animation to any component on scroll to your website. Follow all the instructions in this article to learn how to add animation to your website.

---

# Animation on Scroll

To **add animation on scroll** to a component on your website, refer to the steps below:

* Select any component and click on **Edit**

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/fellow-gerladina-ym0ajos7cmsfl_r9jzow.png)
* Go to the **Advanced** tab

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/fellow-gerladina-ym0ajos7cmsfl_16i50fg.png)
* Expand the **Animation on Scroll** option

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/fellow-gerladina-ym0ajos7cmsfl_80dpch.png)
* Choose any **animation type** from the **dropdown menu**

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/fellow-gerladina-ym0ajos7cmsfl_q7venm.png)
* **Configure** the selected animation according to your requirements

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/fellow-gerladina-ym0ajos7cmsfl_ajjer3.png)
* Finally, **Save** and **Publish** the site

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/fellow-gerladina-ym0ajos7cmsfl_1gf8d5i.png)

# Enable Animation on Mobile

By default, Animation on Mobile is turned off. To turn it on, please follow these steps:

* Go to **Global Styles**

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/fellow-gerladina-ym0ajos7cmsfl_s33653.png)

* Expand the **Animation Settings** option

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/fellow-gerladina-ym0ajos7cmsfl_1w64x40.png)
* Switch on the **Enable Animation on Mobile** option

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/fellow-gerladina-ym0ajos7cmsfl_rfi6x0.png)
* Finally, **Save** and **Publish** the site

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/fellow-gerladina-ym0ajos7cmsfl_1jswdxs.png)

||| Please note that, Animation On Scroll can cause performance issues on mobile devices due to frequent scroll event handling and heavy animations, leading to lag, higher CPU usage, and battery drain.

Cheers! 😉
---

---

# Related articles

[Responsive Settings](/en/article/responsive-settings-xwzrzr/)

[Custom CSS](/en/article/custom-css-1rdt5qy/)