# How To Add Animation In Webflow

> To add animation in Webflow, select your element and open the Interactions tab on the right sidebar. Choose a trigger type by clicking the plus icon next to Element trigger, select Mouse click, and click Action. Choose or create an animation, adjust settings, and preview the results.

Canonical: https://livedemo.ai/tutorials/how-to-add-animation-in-webflow/
Apps: Webflow
Updated: 2026-10-05
Interactive demo: https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a022a243f01ed60a5016f/preview?step=1

## Steps

1. Begin by selecting an element you wish to add animation to.
2. Go to the Interactions tab on the right sidebar menu.
3. Select a type of trigger for your animation.
4. In this example we'll trigger an animation using a simple click. To do so, select Element trigger using the ( + ) icon next to it.
5. Select Mouse click .
6. Mouse click typically contains two options, what happens on first click and then the second click (usually used to reverse it). Click on Action .
7. Select from any premade animations or create your own.
8. Adjust your animation and click on Preview to see it in action.
9. You can use the Preview mode on the top right to interact with it.
10. You now have an animation on your button that will make it appear on click.