Scrolling » Changing the scroll behavior

Changing the scroll behavior

Just as with a draggable layer, you can tweak the overdag, momentum and bounce simulated physics.

You’ll have to apply these changes to the content child layer, though, since that’s the one that’s being dragged around.

Disabling overdrag will prevent the content from scrolling past the beginning or end:

# disabling overdrag
scroll.content.draggable.overdrag = no
Download Framer project
A ScrollComponent with overdrag disabled
ScrollComponent with overdrag disabled

Adjusting the bounce: In this example the content appears to stick to the borders as if they were magnetic.

# changing the bounce options
scroll.content.draggable.bounceOptions =
    tension: 500,
    friction: 10,
    tolerance: 1
Download Framer project
A ScrollComponent with adjusted bounce settings
Sticky bounce

To disable bounce:

scroll.content.draggable.bounce = no

You can also change the values for momentum, or even disable it completely. I would advise against changing the momentum settings, though, because it makes the scrolling feel unnatural.

# Change the friction of momentum
scroll.content.draggable.momentumOptions =
    friction: 15
Download Framer project

Here’s how you disable momentum:

# Disable momentum
scroll.content.draggable.momentum = no
A ScrollComponent with adjusted momentum settings
Momentum with more than the default friction