Devices with snap

snap.js

var ipad = Snap("#device");

// This is an iPad
var ipad_outter = ipad.path('M296.7,235H9.3 c-4.6,0-8.3-3.7-8.3-8.3V9.3C1,4.7,4.7,1,9.3,1h287.4c4.6,0,8.3,3.7,8.3,8.3v217.4C305,231.3,301.3,235,296.7,235z'), 
	ipad_inner = ipad.rect(27.2, 28, 251.7, 180);
	
// Make the svg just white with black lines.
ipad.attr({
    fill: "#fff",
    stroke: "#000",
    strokeWidth: 3
});

// Animate the fucking iPad to become something else
// Put these into functions so we can repeat the bastards.

var animating = true;

function tabletPhone(){	
	if( animating ) {
		ipad_outter.animate({
			d: "M106.7,185H9.3	c-4.6,0-8.3-3.7-8.3-8.3V9.3C1,4.7,4.7,1,9.3,1h97.4c4.6,0,8.3,3.7,8.3,8.3v167.4C115,181.3,111.3,185,106.7,185z"
		}, 500, mina.elastic) ;
		
		ipad_inner.animate({
			x: 12.4,
			y: 15.8,
			width: 91.2,
			height: 144.4
		}, 500, mina.elastic) ;
	}
}

function phoneTablet(){	
	
	ipad_outter.animate({
		d: "M296.7,235H9.3 c-4.6,0-8.3-3.7-8.3-8.3V9.3C1,4.7,4.7,1,9.3,1h287.4c4.6,0,8.3,3.7,8.3,8.3v217.4C305,231.3,301.3,235,296.7,235z"
	}, 1000, mina.elastic, tabletPhone);
	
	ipad_inner.animate({
		x: 27.2,
		y: 28,
		width: 251.7,
		height: 180
	}, 1000, mina.elastic, tabletPhone);
}

// When you click the svg, it'll change to a mobile phone.
// Then back to a tablet. Little bit fucked at the moment
// though...



ipad.click(
	function() { 
		animating=true; 
		phoneTablet(); },
	function() { 
		animating=false;
	}
);