Read this first
How motion actually gets attached in Webflow
Every recipe here lists custom attributes like data-count. On its own, an attribute does nothing at all — it is a label, not an animation. It only means something once a script is on the page looking for it. That is the part that trips everyone, so: the two routes, and which one each interaction needs.
The two routes
they do not mixRoute A — Interactions panel
Designer → right sidebar → Interactions. No code. Works on the free Starter plan. You select the element and animate it directly.
Route A never reads custom attributes. Every data-* in these recipes exists for Route B only.
Route B — custom code
Page settings → Before </body> tag. Paste the recipe’s script. The script queries [data-…], which is where the attributes finally matter.
Custom code is blocked on the free Starter plan — Site settings, Page settings and the Embed element all need a paid plan.
Which route each interaction needs
build order, re-sorted by what you can actually do todayBuildable in the Designer with no code. Custom attributes are not involved — you select the element and animate it directly.
The panel covers some of this. The rest needs the script, which needs a paid plan — build the panel half now, come back for the rest.
The Interactions panel cannot express this one. It needs the script in Page settings → Before </body>, and custom code is blocked on the free Starter plan.
Route A — the Interactions panel, step by step
- 01
Select the element on the canvas or in the Navigator.
- 02
Right sidebar → Interactions tab → +.
- 03
Pick a trigger: Scroll into view · While scrolling in view · Mouse hover · Page load · Mouse move.
- 04
Add an animation, or pick a built-in Animation Preset — Fade in, Slide in up, Stagger fade in.
- 05
Set From = hidden or displaced (Opacity 0, Move Y 30) and To = shown. Do not invert them.
- 06
Duration 0.6–0.8s, easing Power2/3 Out.
- 07
Set conditional playback to No animation for reduced motion. Webflow requires it and it is the easiest accessibility point to lose.
Hover: one timeline — Mouse Enter → Control: Play, Mouse Leave → Control: Reverse. Never build a second “out” animation.
Stagger: select the parent, not the children.
Interactions do not run in the Designer canvas — use Preview, or publish.
Route B — the script, step by step
paid plan- 01
Site settings → GSAP integration — tick the plugins the recipe lists under Plugins. This is what loads the library.
- 02
Add the custom attributes in the Designer (see 05).
- 03
Page settings → Before </body> tag — paste the recipe’s script.
- 04
If the recipe also shows a CSS block, paste that into Page settings → Inside <head> tag.
- 05
Save, then Publish. Custom code does not run in Preview — only on the published site.
Adding a custom attribute
- 01
Select the element in the Navigator — safer than the canvas, because you want the exact node.
- 02
Open Element settings — the gear icon at the top of the right sidebar, or press D.
- 03
Scroll to Custom attributes → click +.
- 04
Type the Name and Value, then save.
If Webflow refuses to save an attribute and you have that page open while something else is editing it, close and reopen the Designer tab. A stale component map rejects attribute writes with a conflict error.