> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/theme-settings/animation.md).

# Animation

**Animation** on websites adds motion and engagement. It attracts attention, increases interaction, and enhances user experiences.

<figure><img src="/files/jsRqvJCKoILM7LDvMDvI" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Scroll animation</strong></td><td>There are 3 options: <strong>disable</strong>, <strong>all screens</strong>, <strong>desktop only</strong>.</td></tr><tr><td><strong>Enable image lazy loading</strong></td><td>Improve page speed by delaying the loading of images until they are about to appear on screen.</td></tr></tbody></table>

**Page loading effect**

<figure><img src="/files/NFLRUq9eNjF7SxnYgsqt" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214.5999755859375"></th><th></th></tr></thead><tbody><tr><td><strong>Enable effect</strong></td><td>Activate a visual loading animation that appears while the page content is being loaded, enhancing user experience.</td></tr><tr><td><strong>Background color</strong></td><td>Select the main color of the effect when loading the page.</td></tr><tr><td><strong>Image</strong></td><td>Edit icon on page load.</td></tr></tbody></table>