26 Elastic Drag Constraints. 26 of 95.
26/GESTURE PHYSICS/26 of 95
Elastic Drag Constraints
Not every pixel should feel equally movable.
Best experienced with a pointer.
The problem
Unconstrained or hard-clipped drag feels digital — panels overshoot with momentum or slam into walls with no give near important boundaries.
The solution
dragConstraints + dragElastic, momentum off, snap to open/closed with a spring on release.
Experiment
Play with the values
0.08
420
36
How it works
- Drag constraints define the open and closed positions the sheet is allowed to occupy.
- A light elasticity lets the drag pass the edge a little instead of hitting a hard stop.
- Momentum is disabled so a flick does not fling the sheet past the decision.
- On release, the nearest snap point — open or closed — is chosen.
- A spring carries the sheet to that resting point.
Seen in
Bottom sheets
Sheets stretch slightly past open/closed, then settle on a resting height.
Drawer panels
Side drawers resist past the fully open stop instead of sliding away.
Dismissible cards
Cards drag with controlled travel and snap back or away on release.
Media scrubbers
Thumbs approach ends with soft resistance rather than a hard clip.