What works well for zooming out? about easings.net

[samhenrigold]

I built a prototype to test different curves on a zoom animation, here's what I found:

I'm zooming in and out by 10x on a map. If the user directly triggers and controls the zoom level, you'll want to use something that eases out but not in. It gives the illusion of immediate responsiveness. You almost certainly want to use it when a user is directly manipulating the zoom level (double tapping to zoom on mobile, for instance) but you might wanna test how it feels if the zoom level is triggered and controlled by the user but through less direct means (like a Google Maps zoom toggle button). I'm quite satisfied with how easeOutCubic or easeOutQuart looks.

If the zoom is just an animation that is not controlled by the user, I'd go with easeInOutCubic if we're being conservative or easeInOutExpo for something more fun and modern. Hope this helped!

[daveyostcom]

Interesting. Here’s my example.

• zoom out 6x quickly with mouse wheel, zoom in 6x with zoom-to-fit button (ease-out)
• zoom in 9x quickly with mouse wheel, zoom out 9x with zoom-to-fit button (ease-out)

To me the zoom-to-fit zooming in looks smooth, and the zoom-to-fit zooming out looks like it accelerates at the end.

The example uses JavaFX EASE_OUT

zooming-easeout.mov

[daveyostcom]

It occurs to me that zooming (in or out) should progress in the log domain, and for animated zooming, as in zoom-to-fit, easing should be layered on top of log. And it turns out that my scroll wheel code ties wheel movement to a scale factor, so it is effectively log domain. A classic example is the Eames short film, The Powers of Ten, which zooms in the log domain, 10x every 10 seconds. https://m.youtube.com/watch?v=7f5x_dRKIF4

The issue is similar in audio volume knobs, which operate in the log domain.