Framer Classic » Draggable layers » Overdrag, Momentum, and Bounce

Overdrag, Momentum, and Bounce

These three together make the layer feel like a real object, an object that you can throw and that will bounce back.

When you don’t need (some of) these simulated physics, you can switch them off.

Overdrag

You can drag a layer beyond its constraints, but once it crosses them, it will move slower. There’s a resistance signaling that it will bounce back.

This resistance is governed by the overdragScale property, and by default, it’s set to 0.5.

This means that a layer will move at only half the dragging speed beyond its constraints, like this:

A layer with default overdrag resistance
Default overdrag resistance (0.5)

When you lower the overdragScale it will feel like the constraints give more resistance:

A layer with stronger overdrag resistance
Stronger overdrag resistance (0.25)
# stronger overdrag resistance
blueSquare.draggable.overdragScale = 0.25
Download Framer project
A layer with overdrag disabled
Overdrag disabled
# Disabling overdrag is as easy as:
blueSquare.draggable.overdrag = no
Download Framer project

Momentum

With overdrag switched off, you cannot drag a layer farther than its constraints—but you can still throw it there.

That speed a layer still has when you toss it is called momentum.

A layer with momentum disabled
Momentum disabled
# disabling momentum
blueSquare.draggable.momentum = no
Download Framer project

You can also tweak the momentum settings.

You can, for example, make a layer feel heavier by giving it more friction.

# The default value for friction is 2.1,
# and for tolerance 0.1 
blueSquare.draggable.momentumOptions =
    friction: 10
    tolerance: 0.1
Download Framer project
A layer with adjusted momentum settings
Momentum with more friction

Bounce

A layer will bounce back when dragged or thrown beyond its constraints.

With ‘bounce’ disabled, the layer will stick to the constraint’s borders when thrown, and when dragged over the edge it will snap back (without animation) upon release.

A layer with bounce disabled
Bounce disabled
# disabling bounce
blueSquare.draggable.bounce = no
Download Framer project

Bounce uses a spring animation, which is apparent when you change the default bounceOptions to something crazy.

# The default values are:
# tension: 200, friction: 40, tolerance: 1
blueSquare.draggable.bounceOptions =
    tension: 1000,
    friction: 10,
    tolerance: 1
Download Framer project
A layer with adjusted bounce settings
Sticky bounce

Leave a Reply