Skip to main content
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

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

1

Select an Object

Turn on “Select to Edit”, then click the element you want to animate. When the edit toolbar appears, click “Animate”.
Selected page element with the Animate button highlighted
2

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.
Preview is temporary. The animation is not saved until you click “Apply”.
3

Apply the Animation

When you find an animation you like, click “Apply”. Readdy adds the animation to the selected element.

​
Common Use Cases

Use CaseHow Animate Helps
Hero headlineAdd entrance motion to the main message on a page
CTA buttonAdd subtle movement to draw attention to the next action
Feature cardsMake landing page sections feel more polished
ImagesAdd light motion to supporting visuals
IconsHighlight 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

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”.
Reselect the object and click “Animate” again. If the panel still does not open, reload the project and try again.
Preview does not save the effect. Click “Apply” after choosing an animation to add it to the selected element.
Select the correct layer and apply the animation again. For nested sections or stacked elements, use “Select Parent” to target the right wrapper.
Select the element and ask Chat to remove the animation, or open “Code” and edit the element styles directly.

​
Need Help?

If this guide doesn’t resolve your issue, submit a support ticket. We’re here to help!