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.

Read next

Animating with React Hooks and RxJS

Are these technologies are a good fit for gesture-based animations?

Oct 29, 2018