How To Animate In Webflow

Quick summary

Webflow's Interactions panel lets you add custom animations to any element using trigger-based controls — no code required. This demo walks through building a multi-step timed animation that rotates an element on page load and returns it to its original position.

Steps

1. Select the element you wish to add an animation to on the canvas.
2. Open the Interactions tab from the right sidebar menu.
3. Choose a trigger method for your animation using the (+) icon next to it.
4. Select the trigger type, such as Page load.
5. Choose an Action based on when you want the animation to trigger.
6. Select Start an animation to create your own custom animation.
7. Click the Add an animation (+) icon next to Timed Animations to create a new one not already in the list.
8. Enter a name for your animation.
9. Select the specific element you wish to animate on the canvas.
10. Click the (+) icon next to Actions with your element selected.
11. Select the action type, such as Rotate.
12. Ensure the correct element or class is selected for the action.
13. Control the rotation axis — for example, set the Z axis to rotate the element in-plane.
14. View a live preview of your animation directly on the canvas.
15. To make the element return to its original position, duplicate the first animation using the right-click menu.
16. Set all axes back to the default position at 0 deg on the duplicated step.
17. Review your completed two-step animation — rotate to 90 deg then return to 0 deg — and click Save.
18. Click the Preview button to see your finished animation in action.