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

# Animate Page Elements

# Animate Page Elements

Animating page elements is a great way to make your Simplebooklet more engaging and dynamic. Whether you want to draw attention to certain areas, highlight key information, or simply make your booklet feel more interactive, adding animations can enhance the overall experience. Here's how you can animate your page elements.

|| Available on all plans.

### How to Animate Page Elements

1. Open your **Dashboard** and select the Simplebooklet you want to animate.

2. Click the **Edit** tab.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/edit-tab-dashboard-crisp_yodfgk.png)

3. Select the page that contains the element you want to animate (image, text, button, etc.).

4. Click on the element you want to **animate**.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/framegenericlight-2025-05-21t1_5azon.png)

5. This will open up the **Actions Panel** on the left-hand side. Click the **Animate** button.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/framegenericlight-2025-05-21t1_16lxfxu.png)

6. Choose your animation settings:

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/framegenericlight-2025-05-21t1_17zqvif.png)

* **When a reader**: Select the event that triggers the animation (e.g., when the page is opened, when the element is clicked, or when the reader hovers over the element).

* **My element will**: Choose the type of animation you want to apply (e.g., fade, bounce, shake). You can select multiple animations to preview different effects.

* **And when the animation ends**: Decide what happens after the animation completes (e.g., the element disappears, loops, or stays visible).

7. Adjust additional options:

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/framegenericlight-2025-05-21t1_1k72xd8.png)

* **Timing Delay**: Set a delay before the animation starts.

* **Speed**: Adjust how quickly the animation completes.

8. Once you're satisfied with the settings, click on the **X** icon to close the animation settings.

| Your animation changes will be saved automatically. If you want to edit the animation later, simply click on the element again, open the Actions Panel, and click the Animate button to make adjustments.

9. Preview your booklet to see how the animation looks in action.

![](https://storage.crisp.chat/users/helpdesk/website/-/b/a/9/a/ba9a701c45868800/preview-eye-button_crh8q1.png)

10. Your page element is now animated and ready to captivate your audience!