Here is how to animate elements in Webflow:
- Select the element you wish to add an animation to.
- Go to the Interactions tab from the right sidebar menu.
- Choose a trigger method for your animation using the (+) icon next to it.
- Select the type such as on Page load.
- Choose an Action based on when you want it to trigger.
- To create your own animation, select Start an animation.
- To create a new one not already in the list, click on the Add an animation (+) icon next to Timed Animations.
- Enter a name for your animation.
- Now, select the specific element you wish to add an animation to.
- With your element selected, click on the (+) icon next to Actions.
- Select the Type of action such as Rotate.
- Ensure you have the correct element or class selected.
- For our rotate example, control the axis on which you wish to rotate such as Z to rotate in-plane.
- You can view a preview on your animation on your canvas.
- Since we want our element to rotate and then also return to the original position, we can continue adding multiple animations together. To start, we simply duplicate the first animation using the right click menu.
- We set all axes back to default position at 0 deg.
- Now we have a custom animation with two steps on page load. It first will rotate to 90 deg and then return back to 0 deg. Save to continue.
- Use the Preview button to see your animation in action!
