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.
short answer
select the layer, open the effects panel and add an 'appear' effect, then set the direction and distance. for sticky scroll sections, every parent stack's overflow must be 'visible' - sticky breaks the moment a parent clips it.
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.
steps last checked
let HeyBraza do this with you
HeyBraza teaches you software while you're using it. hold a key and ask out loud - an ai tutor that sees your screen walks you through every step in real time, pointing and highlighting on your real work, talking you through it as it goes - not someone else's tutorial.
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.
