> ## Documentation Index
> Fetch the complete documentation index at: https://docs.readdy.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Animate

> Add motion to selected page elements, preview animation effects, and apply them directly in Readdy

Animate helps you add motion to objects on your website, including headings, cards, images, buttons, sections, and icons. Select an element in Preview, open the animation panel, preview an effect, and apply it to the selected object.

With Animate, you can:

* **Bring key sections to life**: Add entrance motion to hero headlines, feature cards, images, and icons.
* **Preview before saving**: Try an animation on the selected element before you apply it.
* **Target nested elements more precisely**: Use **"Select Parent"** when you need to move up to the right layer.

## Before You Start

<Info>
  Animate works after you turn on **"Select to Edit"** and select an element in Preview. If you are new to this workflow, start with [Select to Edit & Quick Edit](/features/select-to-edit-and-quick-edit).
</Info>

Use Animate for focused motion on important elements. Too many animations on one page can distract visitors and make the site feel busy.

## How It Works

<Steps>
  <Step title="Select an Object">
    Turn on **"Select to Edit"**, then click the element you want to animate. When the edit toolbar appears, click **"Animate"**.

    <Frame>
      <img src="https://mintcdn.com/readdy/czLLNNnvvQqR1Ige/images/animate/select-object.png?fit=max&auto=format&n=czLLNNnvvQqR1Ige&q=85&s=22c9f8c352b0f9cb1baa7dad778cacba" alt="Selected page element with the Animate button highlighted" width="1236" height="756" data-path="images/animate/select-object.png" />
    </Frame>
  </Step>

  <Step title="Preview an Animation">
    Click an animation in the panel. The selected object animates in Preview so you can see how the effect looks on the page.

    <Frame>
      <video controls muted playsInline src="https://mintcdn.com/readdy/czLLNNnvvQqR1Ige/images/animate/preview-animation.mp4?fit=max&auto=format&n=czLLNNnvvQqR1Ige&q=85&s=d9a732e3fe25b17a4efd6eafbc9b0b34" aria-label="Animation preview panel showing an effect on the selected page element" data-path="images/animate/preview-animation.mp4" />
    </Frame>

    Preview is temporary. The animation is not saved until you click **"Apply"**.
  </Step>

  <Step title="Apply the Animation">
    When you find an animation you like, click **"Apply"**. Readdy adds the animation to the selected element.
  </Step>
</Steps>

## Common Use Cases

| Use Case      | How Animate Helps                                        |
| ------------- | -------------------------------------------------------- |
| Hero headline | Add entrance motion to the main message on a page        |
| CTA button    | Add subtle movement to draw attention to the next action |
| Feature cards | Make landing page sections feel more polished            |
| Images        | Add light motion to supporting visuals                   |
| Icons         | Highlight key points without changing the layout         |

## Tips

* Use motion sparingly so the page still feels calm and easy to scan.
* Preview each animation before applying it.
* Keep effects subtle on buttons, cards, and text.
* Match the animation style to the page: smoother for professional pages, bolder for creative pages.
* For nested elements, use **"Select Parent"** if the animation targets the wrong layer.

## Troubleshooting

<AccordionGroup>
  <Accordion title="I don't see the Animate button">
    Make sure **"Select to Edit"** is on and an object is selected. If the element is nested, try selecting a parent element with **"Select Parent"**.
  </Accordion>

  <Accordion title="The animation panel didn't open">
    Reselect the object and click **"Animate"** again. If the panel still does not open, reload the project and try again.
  </Accordion>

  <Accordion title="I clicked an animation but nothing changed">
    Preview does not save the effect. Click **"Apply"** after choosing an animation to add it to the selected element.
  </Accordion>

  <Accordion title="The animation was applied to the wrong element">
    Select the correct layer and apply the animation again. For nested sections or stacked elements, use **"Select Parent"** to target the right wrapper.
  </Accordion>

  <Accordion title="How do I remove an animation?">
    Select the element and ask Chat to remove the animation, or open **"Code"** and edit the element styles directly.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!