skip to content
HeyBrazadownload →

Webflow logowebflow · HeyBraza shows you

how to make elements appear on scroll in webflow

HeyBraza points at the 'scroll into view' trigger and the initial-state step people skip, so your animation actually plays instead of showing nothing.

scroll-reveal animations in webflow look great but break for one reason: people set the 'animate in' but forget the initial state, so the element is already visible. here's how to set up a clean fade-or-slide on scroll using interactions.

or do it yourself

  1. 1select the element you want to reveal, then open the interactions (lightning bolt) panel.
  2. 2under element trigger, add 'scroll into view'.
  3. 3create an animation for 'when scrolled into view' - add an opacity step from 0 to 100% and a small move/slide.
  4. 4click 'set as initial appearance' (or add an initial step at opacity 0) so the element starts hidden before the scroll.
  5. 5preview and republish - set the same animation on other elements with 'apply animation to other elements' if you want a repeated reveal.

let HeyBraza do this with you

HeyBraza is a tiny on-screen guide that points at the right buttons and talks you through it, on windows and mac.

download

common questions

why does my webflow scroll animation show nothing or flash?

you didn't set the initial state - without an initial step at opacity 0, the element is already visible, so there's nothing to reveal.

where is the scroll-into-view trigger in webflow?

open the interactions panel, select your element, and add an element trigger of 'scroll into view'.

more fixes