LivContentSlider using SnapSVG

SVGContent.svg

SVGContentSlider.js

var s = Snap("#svg-container");

if(s != null){
	Snap.load("SVGContent.svg", function ( f ) {
	    s.append( f.select("#products-group") );

	    var container = s.select("#products-group"),
	    	products  = container.select("#products");

	    var ispani  = container.select("#ispani"),
	        induct  = container.select("#induct"),
	        ecd     = container.select("#ecd"),
	        eduloan = container.select("#eduloan"),
	        beeHance= container.select("#beehance");

	    var ispaniImg 	= ispani.select("image"),
	    	ecdImg 	  	= ecd.select("image"),
	    	eduloanImg 	= eduloan.select("image"),
	    	inductImg 	= induct.select("image");

	    ecdImg.click(function(){
	    	var openMatrix = new Snap.Matrix();
	        openMatrix.translate(0,500);

	        var closeMatrix = new Snap.Matrix();
	        closeMatrix.translate(0,0);

	        this.toggleClass("open");

	        closeAllButMe('ecd');

	        if(this.hasClass("open")){
	        	moveParentUp();
	        	ispani.animate({ transform: openMatrix },900, mina.easein);
	        	eduloan.animate({ transform: openMatrix },900, mina.easein);
	        	induct.animate({ transform: openMatrix },900, mina.easein);
	        }
	        else{
	        	moveParentDown();
	        	ispani.animate({ transform: closeMatrix },900, mina.easein);
	        	eduloan.animate({ transform: closeMatrix },900, mina.easein);
	        	induct.animate({ transform: closeMatrix },900, mina.easein);
	        }
	    });

	    ispaniImg.click(function(){
	    	var openMatrix = new Snap.Matrix();
	        openMatrix.translate(0,500);

	        var closeMatrix = new Snap.Matrix();
	        closeMatrix.translate(0,0);

	        this.toggleClass("open");

			closeAllButMe('ispani');

	        if(this.hasClass("open")){
	        	moveParentUp();
	        	eduloan.animate({ transform: openMatrix },900, mina.easein);
	        	induct.animate({ transform: openMatrix },900, mina.easein);
	        }
	        else{
	        	moveParentDown();
	        	eduloan.animate({ transform: closeMatrix },900, mina.easein);
	        	induct.animate({ transform: closeMatrix },900, mina.easein);
	        }
	    });

	    eduloan.click(function(){
	    	var openMatrix = new Snap.Matrix();
	        openMatrix.translate(0,500);

	        var closeMatrix = new Snap.Matrix();
	        closeMatrix.translate(0,0);

	        this.toggleClass("open");

	        closeAllButMe('eduloan');

	        if(this.hasClass("open")){
	        	moveParentUp();
	        	induct.animate({ transform: openMatrix },900, mina.easein);
	        }
	        else{
	        	moveParentDown();
	        	induct.animate({ transform: closeMatrix },900, mina.easein);
	        }
	    });

	    induct.click(function(){
	    	

	        this.toggleClass("open");

	        closeAllButMe('induct');

	        if(this.hasClass("open")){
	        	moveParentUp();
	        }
	        else{
	        	moveParentDown();
	        }
	    });

	    function closeAllButMe (name) {
	    	var closeMatrix = new Snap.Matrix();
	        closeMatrix.translate(0,0);

	    	switch (name){
	    		case 'ecd': {
	    			ispani.removeClass("opened");
	    			eduloan.removeClass("opened");
	    			induct.removeClass("opened");

			        ispani.animate({ transform: closeMatrix },900, mina.easein);
			    	eduloan.animate({ transform: closeMatrix },900, mina.easein);
			    	induct.animate({ transform: closeMatrix },900, mina.easein);
	    			break;
	    		}
	    		case 'ispani': {
	    			ecd.removeClass("opened");
	    			eduloan.removeClass("opened");
	    			induct.removeClass("opened");

			        ispani.animate({ transform: closeMatrix },900, mina.easein);
			    	eduloan.animate({ transform: closeMatrix },900, mina.easein);
			    	induct.animate({ transform: closeMatrix },900, mina.easein);
	    			break;
	    		}
	    		case 'eduloan': {
	    			ecd.removeClass("opened");
	    			ispani.removeClass("opened");
	    			induct.removeClass("opened");

			    	eduloan.animate({ transform: closeMatrix },900, mina.easein);
			    	ispani.animate({ transform: closeMatrix },900, mina.easein);
			    	induct.animate({ transform: closeMatrix },900, mina.easein);
	    			break;
	    		}
	    		case 'induct': {
	    			ecd.removeClass("opened");
	    			ispani.removeClass("opened");
	    			eduloan.removeClass("opened");

			        induct.animate({ transform: closeMatrix },900, mina.easein);
			    	ispani.animate({ transform: closeMatrix },900, mina.easein);
			    	eduloan.animate({ transform: closeMatrix },900, mina.easein);
	    			break;
	    		}
	    	}
	    }

	    function moveParentUp() {
	    	var openMatrix = new Snap.Matrix();
	        openMatrix.translate(0,-400);
	        products.animate({ transform: openMatrix },900, mina.easein);   
	    }

	    function moveParentDown() {
	        var closeMatrix = new Snap.Matrix();
	        closeMatrix.translate(0,0);
	        products.animate({ transform: closeMatrix },900, mina.easein);   
	    }
	    // Goto Behance
	    beeHance.click(function(){
	    	win=window.open("https://www.behance.net/infob4a3", '_blank');
			win.focus();
	    });
	} );
}