framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
23.24k stars 773 forks source link

[FEATURE] Add a "clamp" parameter to Spring animations that stops on overshoot #1475

Open bhollis opened 2 years ago

bhollis commented 2 years ago

Is your feature request related to a problem? Please describe.

I'd like to animate objects and values using spring physics but without any overshoot or bounce.

Describe the solution you'd like

React Spring has a clamp parameter that immediately ends the animation once it overshoots its target, which produces nice crisp stops on animations: https://react-spring.io/common/configs

Describe alternatives you've considered

I've attempted to replicate this using duration and bounce: 0 but the animation always slows down too much around the target, rather than snapping into it.

You can see a comparison here: https://codesandbox.io/s/tender-water-zd3ei?file=/src/App.tsx:672-750

mattgperry commented 1 year ago

The problem with clamp, and this is evident in the linked documentation, is it basically just clips values beyond the target. This is rarely going to feel nice (which is the reason for using spring physics in the first place) and actively feels worse the bouncier the spring.

I could take a quick look at allowing bounce working with stiffness which would effectively clamp the dampingRatio, ignoring damping. This would yield similar results to duration/bounce but would better take into account existing velocity.