Webflow Cheatsheet

Webfow has 2 modes. Design (edit components and animation), and build where one edits content.

Every animated element has an initial state and end state applied to it. select the element. ensure the layer is named. (it makes it easier especially when you have lots of elements). edit the animation settings which have been applied to the element.

Naming the layers makes it all easy as the animation is broken up into a timeline and you can use the layer names to work out whats going on.

🎬 Basic Webflow Animation Tutorial

This guide walks you through how to create and apply a basic animation to an element in Webflow.

---

1. 🧱 Add an Element

1. Open the Designer.
2. Drag an element (e.g., a Heading, Div Block, or Image) onto the canvas.
3. Give it a class name, like hero-title or fade-box.

---

2. ⚡ Open the Interactions Panel

1. Select your element on the canvas.
2. Click the lightning bolt icon on the right-hand panel → this opens the Interactions (IX2) panel.

---

3. 🎯 Create a Trigger

Choose how the animation starts:

• Page trigger – starts when the page loads or scrolls.
• Element trigger – starts when the element scrolls into view, is hovered, clicked, etc.

Example:

Select Element Trigger → While scrolling into view.

---

4. 🪄 Add an Animation

1. Click + beside the trigger and choose “Start an Animation”.
2. Click “New Timed Animation”.
3. Give it a name (e.g. Fade In Up).

---

5. ⏱️ Add Steps to the Animation

You’re now in the Timeline editor.

1. Click the + button to add an action step.
2. Choose Opacity and set it to 0% (this is the initial state).
3. Click + again → choose Move and drag it down 50px.
4. Click the small blue dot beside the action → set Duration to 0.5s.

Now, add a second step:

1. Set Opacity to 100%.
2. Set Move to 0px (back to normal position).
3. Duration: 0.5s, Easing: “Ease Out”.

---

6. 🔁 Set Initial State

• Check “Set as initial state” on the first step (the one with opacity 0% and move 50px).
• This ensures the element starts hidden.

---

7. 🚀 Preview the Animation

1. Exit the Animation builder.
2. Click the Preview (eye) icon at the top of the Designer.
3. Scroll or load the page to see your animation play!

---

8. ✅ Tips for Success

• Always use classes instead of tags (H1, H2) to target animations.
• Keep your initial states clean (opacity, transforms).
• Use stagger for multiple items → duplicate animation and offset delays.
• To reuse an animation, click “Timed Animations” and apply it to another element.

---

🧩 Example Summary

Step	Action	Value	Duration	Notes
1	Opacity	0%	0s	Set as initial state
2	Move	50px down	0s	Set as initial state
3	Opacity	100%	0.5s	Ease Out
4	Move	0px	0.5s	Ease Out

---

🧠 Key Takeaway

Animations in Webflow rely on Triggers → Timed Animations → Actions. Target by class, not by HTML tag, to keep them stable even if you change headings or elements later.

---

🧰 Editing an Existing Animation in Webflow

This guide explains how to find, open, and edit an animation already applied to an element inside Webflow.

---

1. 🔍 Locate the Animated Element

1. In the Designer, click the element on the canvas that already has the animation.
2. Look for a small blue lightning bolt next to the element’s name in the Navigator panel.
   → This means an interaction or animation is applied.

---

2. ⚡ Open the Interactions Panel

1. With the element still selected, open the Interactions (IX2) panel:
   → Click the lightning bolt icon on the right-hand toolbar.
2. You’ll now see one or more triggers listed, such as:
   • Scroll into view
   • Mouse hover
   • Click
   • Page load

---

3. 🧩 Identify the Trigger You Want to Edit

• Expand each trigger to see what animation it’s linked to.
• You might see something like: