framer · HeyBraza shows you
how to add scroll animation in framer
HeyBraza points at the effects panel and the 'overflow visible' setting that makes sticky scroll actually work.
scroll animations make a framer site feel alive - sections fade or slide in as they enter view. the controls live in the effects panel, and sticky scroll has one classic gotcha (overflow) that breaks it for most beginners. here's how to add one that actually works.
or do it yourself
- 1select the layer or section you want to animate in.
- 2open the effects panel on the right and add an 'appear' effect.
- 3choose the animation (fade, slide, scale) and set how far/how fast it travels as it scrolls into view.
- 4for a sticky scroll section, set every parent stack's overflow to 'visible' - sticky breaks if any parent clips it.
- 5preview by scrolling on the canvas or publishing - the effect triggers as the element enters the viewport.
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.
downloadcommon questions
why is my framer scroll animation not working?
most often a parent stack has overflow set to hidden, which breaks sticky/scroll effects - set the parents to overflow visible.
why doesn't the appear effect work on my component?
appear effects don't apply to a component instance the same way - add the effect to a frame wrapping the component, or to the layers inside it.