Wobbly Slideshow Effect

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.

Please note that this is highly experimental and tested only in the latest versions of modern browsers.

The beautiful icons are from the great free Ballicons 2 icon set created by Pixel Buddha and released on Smashing Magazine.

The markup of the slideshow is a unordered list wrapped by a division:

<div id="slideshow" class="slideshow">
	<ul>
		<li>
			<div class="slide">
				<!-- ... -->
			</div>
		</li>
		<li><!-- ... --></li>
		<li><!-- ... --></li>
		<!-- ... -->
	</ul>
</div>

What we do is to insert an SVG before the slide with a path that is a rectangle. The SVG looks as follows after being inserted:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
	<path d="M33,0C33,0,74,0,74,0C74,0,69,9.871,69,29.871C69,49.871,74,60,74,60C74,60,32.666,60,32.666,60C32.666,60,32.541,60,32.541,60C32.541,60,6,60,6,60C6,60,1,50,1,30C1,10,6,0,6,0C6,0,33,0,33,0" />
</svg>

The three different SVG paths make up the following shapes:

You can also find the SVGs in the image folder.

Depending on where we navigate to, we will either bend the shape to the left or to the right. This animation will make it seem as if the are pulling or pushing an elastic object.

The paths are defined in the slideshow options:

SliderFx.prototype.options = {

	// default transition speed (ms)
	speed : 500,

	// default transition easing
	easing : 'ease',

	// path definitions
	paths : {
		rect : 'M33,0h41c0,0,0,9.871,0,29.871C74,49.871,74,60,74,60H32.666h-0.125H6c0,0,0-10,0-30S6,0,6,0H33',
		curve : { 
			right : 'M33,0h41c0,0,5,9.871,5,29.871C79,49.871,74,60,74,60H32.666h-0.125H6c0,0,5-10,5-30S6,0,6,0H33', 
			left : 'M33,0h41c0,0-5,9.871-5,29.871C69,49.871,74,60,74,60H32.666h-0.125H6c0,0-5-10-5-30S6,0,6,0H33'
		}
	}

}

Here is how we actually control the morphing of the paths when navigating:

SliderFx.prototype._morphSVGs = function( callback ) {

	var self = this,
		speed = this.options.speed,
		pathCurvedLeft = this.options.paths.curve.left,
		pathCurvedRight = this.options.paths.curve.right,
		pathRectangle = this.options.paths.rect,
		dir = this.old < this.curr ? 'right' : 'left';

	// morph svg path on exiting slide to "curved"
	this.items[ this.old ].path.stop().animate( { 'path' : dir === 'right' ? pathCurvedLeft : pathCurvedRight }, speed * .5, mina.easeout );

	// the slider starts a bit later...
	setTimeout(function() { callback.call(); }, speed * .2 );
	
	// change svg path on entering slide to "curved"
	var currItem = this.items[ this.curr ];
	currItem.querySelector('path').setAttribute( 'd', dir === 'right' ? pathCurvedLeft : pathCurvedRight );
	
	// morph svg path on entering slide to "rectangle"
	setTimeout(function() { currItem.path.stop().animate( { 'path' : pathRectangle }, speed * 3, mina.elastic ); }, speed * .5 );

}	

The timing is the most important aspect here. For example, when morphing the SVG path to the right curve, we want to make sure that the morphing takes half as long as the movement of the slides (i.e. speed * .5). This ensures that we still see it getting curved before the slide disappears. We also delay the start of the slider movement a tidbit. The entering slide’s path will be first set to be curved and then we morph it to the rectangle shape. You can change the direction of the curve so that you change the effect to look like the element is being pulled or pushed. Change dir === 'right' to dir === 'left' for the entering slide to see the difference. In the last morph where we set the entering path to become a rectangle, we can play with two durations: the speed of the morphing and the delay. We want the morphing to take longer so that we actually see the incoming shape performing its jell-o show. Play with that value and if you like, the easing, in order to achieve subtle, but impactful effects.

It’s a matter of how you want the effect to appear, so if you play with all those timings, you will see how the movement reflects almost different substances: would you like some pudding or do you prefer some jell-o? 🙂

If you’d like to see another example in action, check it out here: Alternative Wobbly Slideshow Effect

The code here was changed as follows:

// morph svg path on exiting slide to "curved"
this.items[ this.old ].path.stop().animate( { 'path' : dir === 'right' ? pathCurvedLeft : pathCurvedRight }, speed * .7, mina.easeout );

// the slider starts a bit later...
setTimeout(function() { callback.call(); }, speed * .3 );

// change svg path on entering slide to "curved"
var currItem = this.items[ this.curr ];
currItem.querySelector('path').setAttribute( 'd', dir === 'left' ? pathCurvedLeft : pathCurvedRight );

// morph svg path on entering slide to "rectangle"
setTimeout(function() { currItem.path.stop().animate( { 'path' : pathRectangle }, speed * 5, mina.elastic ); }, speed * .8 );	

You can read more about how to use Snap.svg on their website and especially the documentation.

We hope you enjoy this little fun effect and get inspired!