Knowledge base
Pitfalls
Pages answering "why does this flash, jump, or silently fail", each opening with the symptom rather than the fix; most of these fail silently, which is why the diagnostic order matters more than any individual page.
The knowledge base is published in English only.
Start here if something silently doesn’t work
Most failures in this corpus produce no error at all. First split on one question, because it sends you to different places:
Did it ever work?
- Never worked → It works in the Designer but not live — or the reverse first, then in order:
runs on(does the interaction even load on this page — see Timeline control — control, speed, jump to, delay, repeat), then Target filters — resolving a target relative to the trigger (does the target resolve against this DOM). - Worked, then stopped → A style cleanup deletes the classes your interactions toggle. A deleted animation class is the classic cause of a regression nobody changed anything to cause.
The animation itself is rarely the problem. Check the silent failures first.
By symptom
| Page | The symptom |
|---|---|
| A style cleanup deletes the classes your interactions toggle | An animation that used to work stops, and nothing about it changed |
| It works in the Designer but not live — or the reverse | Works while building and dead live — or looks broken while building and is fine |
| Elements flash before a page-load animation starts | Elements flash in their final state for one frame before a page-load animation starts |
| Reordering in the navigator doesn't change what's on top | Reordering in the navigator doesn’t change what’s on top |
| A full-height overlay is cut off or jumps on mobile | A full-height overlay is cut off or jumps on mobile |
| overflow hidden on the body — right for scroll lock, wrong for clipping | The page stops scrolling — or a wide element still spills sideways |
| Webflow's native Button is wrong for animated controls | Nowhere to nest an icon, or a control announced as a link instead of a button |
| A sticky element ends up in the wrong place after moving or scaling it | A sticky element settles too low, with a gap where it used to be |
| A thin line or sliver appears at the edge of a moving element | A hairline or thin stripe at the edge of a moving element |
Check status: before answering from here
Pitfall pages are the ones most likely to go stale, because the usual reason a pitfall disappears
is that Webflow automated the fix. Several open with a “does this still apply to you?” table —
honour it. superseded means the technique still works but a better path now exists: say both.
Two pages that resolve apparent contradictions
The corpus disagrees with itself in two places, and both are merged here with the rule for choosing rather than left as two authoritative-looking answers:
- overflow hidden on the body — right for scroll lock, wrong for clipping — the marquee lesson calls it “a hard no”; the dialog lessons do it deliberately. The property does one thing, disable page scroll: in one case that’s an unwanted side effect of trying to crop, in the other it’s the entire goal.
- Webflow's native Button is wrong for animated controls — one lesson says use a link block, another says use a real
button. Both reject Webflow’s native Button, for different reasons.
Pitfalls 9
- A full-height overlay is cut off or jumps on mobile
vh is measured against the initial viewport and does not track the mobile browser's UI expanding and collapsing, so a 100vh fixed overlay is taller than the visible area and its bottom is unreachable; use 100dvh, which always matches the real visible height.
- A sticky element ends up in the wrong place after moving or scaling it
A translateY on an element that is also position sticky throws the final layout too low, because the transform moves the painted element without changing the space it reserves; compensate with a bottom margin equal to the scaled height and cancel the gap with a negative top margin on the element below.
- A style cleanup deletes the classes your interactions toggle
A class that exists only to be added by a GSAP set action is applied to no element, so Webflow flags it as unused and any style cleanup deletes it — publishing itself does not strip it, which means this breaks work that was already correct, later, when someone tidies the project; keep an element wearing the class so it is genuinely used and never appears in a cleanup list.
- A thin line or sliver appears at the edge of a moving element
Fractional device pixels mean an element parked at exactly -100% can leave a hairline of itself visible, and two perfectly aligned elements moving together can show an anti-aliasing seam between them; overshoot to -101% in the first case and pull a -1px margin in the second.
- Elements flash before a page-load animation starts
The flash is a one-frame timing gap where the browser paints elements in their final CSS state before GSAP applies the animation's initial values; fix it by hiding the wrapper from the page head, scoped to .w-mod-js so content stays visible when JavaScript is off. Webflow now prevents this automatically for Interactions with GSAP, so the manual fix is only needed for custom-code GSAP.
- It works in the Designer but not live — or the reverse
Custom code, non-standard CSS properties, first-paint flicker, scroll lock and keyboard focus all behave differently in the Designer and in plain preview than on the published site, and the Designer additionally shows you your animations' initial states, so half-hidden content while building is expected rather than broken.
- overflow hidden on the body — right for scroll lock, wrong for clipping
Overflow hidden on the body does exactly one thing — it disables scrolling for the whole page — so using it to crop something that spills sideways breaks the site to fix one section, while using it as an overlay's scroll lock is correct because there disabling scroll is the goal; clip at the container instead, and make sure every close path releases the lock.
- Reordering in the navigator doesn't change what's on top
An absolutely positioned element paints above a static sibling no matter where it sits in the DOM, so reordering does nothing; give the shared parent position: relative so both children keep z-index: auto, and then DOM order decides — the element that comes later renders on top.
- Webflow's native Button is wrong for animated controls
Webflow's native Button element renders as an anchor and cannot nest children, which makes it wrong twice over — semantically wrong for anything that performs an action rather than navigating, and structurally useless for the layered hover effects that need an icon or overlay inside.