SvgStrikeAnimation.js

$(document).ready(function(){
	var mobi = Snap("#livx-processes-mobi");

	//Load Mobile Processes
	if(mobi != null){
		Snap.load("images/mobile/livx-process-mobile.svg", function ( f ) {
		    mobi.append( f.select("#content") );
		});
	}


	var desktop = Snap("#livx-processes-desktop");

	if(desktop != null){
		Snap.load("images/livx-process-desktop.svg", function ( f ) {
		    desktop.append( f.select("#content") );

		    var process 	   = desktop.select("#livx-proceses"),
		    	processCaption = desktop.select("#livx-process-caption"),
		    	designCaption  = desktop.select("#design-caption"),
		    	consultCaption = desktop.select("#consult-caption"),
		    	developCaption = desktop.select("#develop-caption"),
		    	solutionCaption= desktop.select("#solution-caption"),
		    	greyBg 		   = desktop.select("#grey-bg");

		    var mountain 	= process.select("#mountain"),
		    	polyLines 	= mountain.selectAll('polyline'),
		    	lines 		= mountain.selectAll('line'),
		    	polygons 	= mountain.selectAll('polygon');

		    //icons
		    var consultIcon = desktop.select("#consult-icon"),
		    	developIcon = desktop.select("#develop-icons"),
		    	designIcon = desktop.select("#design-icon"),
		    	solutionIcon = desktop.select("#solutions-icon");

			//design icon
			var ruller = designIcon.select("#ruller"),
				pencil = designIcon.select("#pencil");

			//develop icon
			var squareBlock = developIcon.select("#rect-shape"),
				rectBlock   = developIcon.select("#square-shape");

			//solution icon
			var bottomLines = solutionIcon.select("#bottom-line"),
				topLines    = solutionIcon.select("#top-line"),
				x1		    = solutionIcon.select("#x1"),
				x2		    = solutionIcon.select("#x2"),
				tickMark    = solutionIcon.select("#tick");



		    //Lines
		    var redLine  = desktop.select("#red-line"),
		    	greyLine = desktop.select("#grey-line");

		    // init controller
	        var controller = new ScrollMagic.Controller();
	        var tween = new TimelineMax();
	        var tweenIcons = new TimelineMax();
	        var tweenLongLines = new TimelineMax();

    		var screenWidth		= $(window).outerWidth(),
				smallScreen 	=  800,
				mediumScreen 	=  1024,
				largeScreen 	=  1366,
				xlargeScreen 	=  1280,
				hugeScreen 		=  1440,
				xhugeScreen 	=  1600,
				xxhugeScreen 	=  1920;

			var offsetIcons = 800,
				offsetLines = 600,
				offsetLongLines = 1000;
			if(screenWidth <= largeScreen) {
				
			}else if(screenWidth <= mediumScreen) {
				
			}else if(screenWidth <= largeScreen) {
				
			}else if(screenWidth <= xlargeScreen) {
				
			}else if(screenWidth <= hugeScreen) {
				
			}else if(screenWidth <= xhugeScreen) {

			}else if(screenWidth <= xxhugeScreen) {
				offsetIcons = 1000;
				offsetLines = 900;
			}
		    

			pathStrokePrepare($(greyLine.node), 2000);
			pathStrokePrepare($(redLine.node), 2000);

			tweenLongLines.add(TweenMax.to($(greyLine.node), 3, {strokeDashoffset: 0, ease:Linear.easeIn}));
			tweenLongLines.add(TweenMax.to($(redLine.node), 3, {strokeDashoffset: 0, ease:Linear.easeIn}));

	        //lets start redrawing the shapes
		    polyLines.forEach(function(el) {
		    	lineStrokePrepare($(el.node));

		    	tween.add(TweenMax.to($(el.node), 0.7, {strokeDashoffset: 0, ease:Linear.easeIn}));
            });

            lines.forEach(function(el) {
		    	lineStrokePrepare($(el.node));

		    	tween.add(TweenMax.to($(el.node), 0.7, {strokeDashoffset: 0, ease:Linear.easeIn}));
            });

            polygons.forEach(function(el) {
		    	lineStrokePrepare($(el.node));

		    	tween.add(TweenMax.to($(el.node), 0.7, {strokeDashoffset: 0, ease:Linear.easeIn}));
            });

            // consult icon
            pathStrokePrepare($(consultIcon.node), consultIcon.getTotalLength());
	        tweenIcons.add(TweenMax.to($(consultIcon.node), 1, {strokeDashoffset: 0, ease:Linear.easeIn}));

			//prepare pencil
			tweenIcons.add(TweenMax.to($(pencil.node), 0.9, {rotation:270, svgOrigin:"center", ease:Linear.easeIn}));
			//prepare ruller
			tweenIcons.add(TweenMax.to($(ruller.node), 0.9, {x:+20, svgOrigin:"center", ease:Linear.easeIn}));

			//align 
			tweenIcons.add(TweenMax.to($(designIcon.node), 0.9, {y:25, svgOrigin:"center"}));

			//now for the devs
			tweenIcons.add(TweenMax.to($(developIcon.node), 0.9, {y:10, svgOrigin:"center"}));
			//prepare rect
			tweenIcons.add(TweenMax.to($(rectBlock.node), 0.9, {y:-10, svgOrigin:"center"}));
			//prepare square
			tweenIcons.add(TweenMax.to($(squareBlock.node), 0.9, {x:+20, svgOrigin:"center"}));

			//now for the solution
			// tweenIcons.add(TweenMax.to($(tick.node), 0.9, {drawSVG: "100%", ease:Power1.easeInOut}));

            function lineStrokePrepare ($el) {
	          $el.css("stroke-dasharray", 1000);
	          $el.css("stroke-dashoffset", 1000);
	        }

	        function pathStrokePrepare ($el, size) {
	          $el.css("stroke-dasharray", size);
	          $el.css("stroke-dashoffset", size);
	        }

	        // build scene
	        new ScrollMagic.Scene({triggerElement: "#trigger1",offset: offsetLines, duration: 250, tweenChanges: true})
	                .setTween(tween)
	                .addIndicators() // add indicators (requires plugin)
	                .addTo(controller);

	        new ScrollMagic.Scene({triggerElement: "#trigger1",offset: offsetIcons, duration: 250, tweenChanges: true})
	                .setTween(tweenIcons)
	                .addIndicators() // add indicators (requires plugin)
	                .addTo(controller);

	        new ScrollMagic.Scene({triggerElement: "#trigger1",offset: offsetLongLines, duration: 300, tweenChanges: true})
	                .setTween(tweenLongLines)
	                .addIndicators() // add indicators (requires plugin)
	                .addTo(controller);

		});
	}
});