A little playful interaction idea where we add some bounciness to a draggable element and animate it depending on its position.
Today we’d like to share two tiny fun interaction experiments with you. The first one is inspired by Rally Interactive’s Dribbble shot. We wanted to create a playful dragging interaction that will morph and animate an element depending on its position. If dragged outside of the defined bounds, we will dismiss the element (demo 1), or navigate a gallery (demo 2). If dropped before the bounds we will snap the element back with an elastic effect. We also add some bounciness to inner elements so that everything gets an even more organic feel.