Wobbly Slideshow Effect by Codrops

By http://tympanus.net/codrops

Monday 09th, Nov, 2015 | #Plugins #Slider

View More Demo Download

The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.

Today we’d like to share an experimental slideshow effect with you. The idea is based on a Dribble shot called GIF Exercise by Sergey Valiukh where a lot of jell-o-like movements are happening. Navigating from one item to another makes the items move in a wobbly fashion and we thought this might be great to try out on a real slideshow. To achieve this effect we used Snap.svg and animated the slide background SVGs in order to simulate the elastic effect. What happens is that we basically morph an SVG path from a rectangle to a curved shaped; either a right curve or a left curve, depending on where we are navigating to.