Gesture-based photo gallery with physics
Apr 23, 2016
When animating elements, I think they should closely resemble phsyical objects from the real world. For this prototype I used spring equations in order to get a natural acceleration and deceleration feeling.
Try the live demo.
I think for animations which are based on single clicks or taps you can get pretty far with CSS transitions. However as soon as a user moves elements via touch gestures you need something much more dynamic. Elements should precisely follow touch movements and if a finger is released in the middle of a pan gesture, the element should continue that motion while a natural friction brings the object to a smooth halt.
There's an animation loop which runs 60 times a second and which incorporates velocity into coordinates of the photos using Hooke's law.
Ralph Thomas got me really interested in using physical models for animations. If you find this interesting, I can't recommend these two articles enough: Creating Animations and Interactions with Physical Models and Towards declarative touch interactions .
The physics utilities for this experiment are based on the implementation of Ralph Thomas.
Check out the code on Github.
Update: There's now a small library called wobble which implements spring physics. If that's all you need, this is your place to go.