Infographic ScrollMagic

gistfile1.txt

jQuery(function ($) {

	var windowHeight = $(window).height();
	
	function getChildHeight(parent) {
		var insideparentheight = $( parent + ' .infoslide_inside' ).height();
		$( parent + ' .infoslide_half' ).each(function() {
			
			var infoslidehalfheight = $(this).height();
			
			if (infoslidehalfheight < insideparentheight) {
				var hDiff = (insideparentheight - infoslidehalfheight)/2;
				$(this).css('margin-top', hDiff + 'px');
			}
			
			
		});
	}
	
	function ig_adaptOnResizeAndReady() {
			
		var windowHeight2 = $(window).height();
		var windowWidth = $(window).width();
		$('#browser').html( windowWidth + 'px ' + windowHeight2 + 'px ' );
		
		
		// init controller	
		var controller = new ScrollMagic();
				
		if (document.documentElement.clientWidth >= 769) {
			
			controller = controller.enabled(true);
			
			var slideheight = windowHeight-53;
				
			$('#ig_intro_slide').css('min-height', (slideheight) + 'px');
			$('.page-template-template-acute-php #content').css('min-height', (slideheight) + 'px');
			
			$(window).scroll(function() {

				if ( $(window).scrollTop() >= (slideheight-100) ) {
					$('.page-template-template-acute-php header').css('height', '87px');
					$('.page-template-template-acute-php header h2 a').css({'height': '60px', 'width': '152px', 'background-size': '152px 60px'});
				} else {
					$('.page-template-template-acute-php header').css('height', '135px');
					$('.page-template-template-acute-php header h2 a').css({'height': '100px', 'width': '252px', 'background-size': '252px 100px'});
				}
				
			});
			
			$('.acute_sidenav a').click(function(){
				$('html, body').animate({
					scrollTop: $( $.attr(this, 'href') ).offset().top
				}, 500);
				return false;
			});
			
			//$('#ig_intro_slide').css('height', windowHeight);
			$('.infoslide').css('min-height', (windowHeight*1.2));
			$('#bubbleintro').css('min-height', windowHeight);

			
			$( '.infoslide_inside' ).each(function() {
				var infoslideheight = $(this).height();
				var top_marg = infoslideheight/2;
				$(this).css('margin-top', '-' + top_marg + 'px');
				$(this).css('visibility', 'hidden');
				$(this).css('opacity', '0');
			});
			
			$('.button').click(function(){
				$(this).closest('.infoslide_inside').toggleClass('reveal');
			});
			
			$('.dot').hover(function(){
				$(this).closest('.second li').toggleClass('fadein');
				return false;
			});

			
			var intro_circles = new TimelineMax()
				.add([
					TweenMax.fromTo('#bubbles1', 550, {top: '40%'}, {top: '0'}),
					TweenMax.fromTo('#bubbles2', 950, {top: '100%'}, {top: '5%'}),
					TweenMax.fromTo('#bubbles3', 300, {top: '60%'}, {top: '25%'}),
					TweenMax.fromTo('#bubbles4', 900, {top: '100%'}, {top: '15%'}),
					TweenMax.fromTo('#bubbles5', 900, {top: '100%'}, {top: '15%'}),
					TweenMax.fromTo('#bubbles6', 500, {top: '100%'}, {top: '5%'}),
					TweenMax.fromTo('#bubbles7', 500, {top: '40%'}, {top: '-20%'}),
					TweenMax.fromTo('#bubbles8', 800, {top: '100%'}, {top: '-5%'}),
					TweenMax.fromTo('#bubbles9', 600, {top: '60%'}, {top: '20%'}),
					TweenMax.fromTo('#bubbles10', 900, {top: '90%'}, {top: '80%'}),
					TweenMax.fromTo('#bubbles11', 1000, {top: '120%'}, {top: '75%'}),
					TweenMax.fromTo('#bubbles20', 900, {top: '130%'}, {top: '5%'}),
					TweenMax.fromTo('#bubbles21', 900, {top: '100%'}, {top: '-5%'}),
					TweenMax.fromTo('#bubbles22', 800, {top: '100%'}, {top: '5%'}),
				]);
			var scene1 = new ScrollScene({
				triggerElement: '#bubbleintro',
				duration: 900,
				offset: -150
				})
			.addTo(controller)
			.triggerHook(.3)
			.setTween(intro_circles);
			
			var enviro = new TimelineMax()
				.add([
					TweenMax.to('#environmental .infoslide_inside', 1, {opacity: '1', visibility: 'visible', ease: Linear.easeNone, onStart: getChildHeight('#environmental') })
				]);
			var scene2 = new ScrollScene({
				triggerElement: '#environmental',
				duration: 200,
				})
			.addTo(controller)
			.triggerHook('.7')
			.setTween(enviro);
			
			var enviro2 = new TimelineMax()
				.add([
					TweenMax.to('#environmental .infoslide_inside', 1, { position: 'absolute', ease: Linear.easeNone })
				]);
			var scene3 = new ScrollScene({
				triggerElement: '#culinary',
				duration: 200,
				})
			.addTo(controller)
			.triggerHook('1.1')
			.setTween(enviro2);
			
			var env_bub = new TimelineMax()
				.add([
					TweenMax.fromTo('#bubbles13', 600, {top: '90%'}, {top: '0'}),
					TweenMax.fromTo('#bubbles14', 400, {top: '50%'}, {top: '10%'}),
					TweenMax.fromTo('#bubbles16', 900, {top: '100%'}, {top: '0'}),
				]);
			var scene4 = new ScrollScene({
				triggerElement: '#environmental',
				duration: 900,
				offset: -150
				})
			.addTo(controller)
			.triggerHook('.7')
			.setTween(env_bub);
			
			var env_bub2 = new TimelineMax()
				.add([
					TweenMax.fromTo('#bubbles12', 400, {top: '90%'}, {top: '55%'}),
					TweenMax.fromTo('#bubbles15', 400, {top: '65%'}, {top: '62%'}),
					TweenMax.fromTo('#bubbles23', 1500, {top: '100%'}, {top: '80%'}),
					TweenMax.fromTo('#bubbles24', 1600, {top: '100%'}, {top: '85%'}),
					TweenMax.fromTo('#bubbles25', 1200, {top: '100%'}, {top: '70%'}),
				]);
			var scene5 = new ScrollScene({
				triggerElement: '#environmental',
				duration: 900,
				offset: -150
				})
			.addTo(controller)
			.triggerHook('.2')
			.setTween(env_bub2);
			
			var cul = new TimelineMax()
				.add([
					TweenMax.to('#culinary .infoslide_inside', 1, { opacity: '1', visibility: 'visible', ease: Linear.easeNone, onStart: getChildHeight('#culinary') })
				]);
			var scene6 = new ScrollScene({
				triggerElement: '#culinary',
				duration: 400,
				})
			.addTo(controller)
			.triggerHook('.4')
			.setTween(cul);
			
			var cul2 = new TimelineMax()
				.add([
					TweenMax.to('#culinary .infoslide_inside', 1, { position: 'absolute', ease: Linear.easeNone })
				]);
			var scene7 = new ScrollScene({
				triggerElement: '#flow',
				duration: 200,
				})
			.addTo(controller)
			.triggerHook('1.1')
			.setTween(cul2);
			
			var cul_bub = new TimelineMax()
				.add([
					TweenMax.fromTo('#bubbles26', 500, {top: '8%'}, {top: '2%'}),
					TweenMax.fromTo('#bubbles28', 1100, {top: '100%'}, {top: '10%'}),
				]);
			var scene8 = new ScrollScene({
				triggerElement: '#culinary',
				duration: 900,
				offset: -150
				})
			.addTo(controller)
			.triggerHook('.7')
			.setTween(cul_bub);
			
			var cul_bub2 = new TimelineMax()
				.add([
					TweenMax.fromTo('#bubbles29', 800, {top: '150%'}, {top: '65%'}),
					TweenMax.fromTo('#bubbles30', 1500, {top: '150%'}, {top: '68%'}),
					TweenMax.fromTo('#bubbles31', 700, {top: '100%'}, {top: '10%'}),
				]);
			var scene9 = new ScrollScene({
				triggerElement: '#culinary',
				duration: 900,
				offset: -150
				})
			.addTo(controller)
			.triggerHook('.3')
			.setTween(cul_bub2);
			
			var flow = new TimelineMax()
				.add([
					TweenMax.to('#flow .infoslide_inside', 1, { opacity: '1', visibility: 'visible', ease: Linear.easeNone, onStart: getChildHeight('#flow') })
				]);
			var scene10 = new ScrollScene({
				triggerElement: '#flow',
				duration: 200,
				offset: -150
				})
			.addTo(controller)
			.triggerHook('.2')
			.setTween(flow);
			
			var flow2 = new TimelineMax()
				.add([
					TweenMax.to('#flow .infoslide_inside', 1, { position: 'absolute', ease: Linear.easeNone })
				]);
			var scene11 = new ScrollScene({
				triggerElement: '#engineering',
				duration: 200,
				offset: -150
				})
			.addTo(controller)
			.triggerHook('.95')
			.setTween(flow2);
			
			var eng = new TimelineMax()
				.add([
					TweenMax.to('#engineering .infoslide_inside', 1, { opacity: '1', visibility: 'visible', ease: Linear.easeNone, onStart: getChildHeight('#engineering') })
				]);
			var scene12 = new ScrollScene({
				triggerElement: '#engineering',
				duration: 200,
				offset: -150
				})
			.addTo(controller)
			.triggerHook('.2')
			.setTween(eng);
			
			var eng2 = new TimelineMax()
				.add([
					TweenMax.to('#engineering .infoslide_inside', 1, { position: 'absolute', ease: Linear.easeNone })
				]);
			var scene13 = new ScrollScene({
				triggerElement: '#facilities',
				duration: 200,
				offset: -150
				})
			.addTo(controller)
			.triggerHook('.95')
			.setTween(eng2);
			
			var fac = new TimelineMax()
				.add([
					TweenMax.to('#facilities .infoslide_inside', 1, { opacity: '1', visibility: 'visible', ease: Linear.easeNone, onStart: getChildHeight('#facilities') })
				]);
			var scene14 = new ScrollScene({
				triggerElement: '#facilities',
				duration: 200,
				offset: -150
				})
			.addTo(controller)
			.triggerHook('.2')
			.setTween(fac);
			
			var fac2 = new TimelineMax()
				.add([
					TweenMax.to('#facilities .infoslide_inside', 1, { position: 'absolute', ease: Linear.easeNone })
				]);
			var scene15 = new ScrollScene({
				triggerElement: '#ig_end_slide',
				duration: 200,
				offset: -150
				})
			.addTo(controller)
			.triggerHook('.95')
			.setTween(fac2);

			var end = new TimelineMax()
				.add([
					TweenMax.to('#ig_end_slide .infoslide_inside', 1, { opacity: '1', visibility: 'visible', ease: Linear.easeNone, onStart: getChildHeight('#facilities') })
				]);
			var scene16 = new ScrollScene({
				triggerElement: '#ig_end_slide',
				duration: 200,
				offset: -150
				})
			.addTo(controller)
			.triggerHook('.1')
			.setTween(end);
			
			var end_bub = new TimelineMax()
				.add([
					TweenMax.fromTo('#bubbles33', 500, {top: '-40%', left: '36%'}, {top: '20%', left: '38%', position: 'fixed'}),
					TweenMax.fromTo('#bubbles34', 700, {top: '-70%'}, {top: '25%', position: 'fixed'}),
					TweenMax.fromTo('#bubbles35', 600, {top: '-50%', left: '65%'}, {top: '24%', left: '50%', position: 'fixed'}),
					TweenMax.fromTo('#bubbles36', 400, {top: '-40%'}, {top: '21%', position: 'fixed'}),
					TweenMax.fromTo('#bubbles38', 1200, {top: '120%'}, {top: '44%'}),
					TweenMax.fromTo('#bubbles40', 600, {top: '-50%', left: '70%'}, {top: '20%', left: '60%', position: 'fixed'}),
				]);
			var scene17 = new ScrollScene({
				triggerElement: '#ig_end_slide',
				duration: 900,
				})
			.addTo(controller)
			.triggerHook('.6')
			.setTween(end_bub);
			
		}
		
		if (document.documentElement.clientWidth < 769) {
			
			$('#ig_intro_slide').css('min-height', '');
			$('.page-template-template-acute-php #content').css('min-height', '');
			
			$(window).scroll(function() {

				if ( $(window).scrollTop() >= (slideheight-100) ) {
					$('.page-template-template-acute-php header').css('height', '');
					$('.page-template-template-acute-php header h2 a').css({'height': '', 'width': '', 'background-size': ''});
				} else {
					$('.page-template-template-acute-php header').css('height', '');
					$('.page-template-template-acute-php header h2 a').css({'height': '', 'width': '', 'background-size': ''});
				}
				
			});
			
			$('.infoslide').css('min-height', '');
			$('#bubbleintro').css('min-height', '');

			
			$( '.infoslide_inside' ).each(function() {
				var infoslideheight = $(this).height();
				var top_marg = infoslideheight/2;
				$(this).css('margin-top', '');
				$(this).css('visibility', '');
				$(this).css('opacity', '');
			});
						
			controller = controller.enabled(false);
			controller = controller.destroy(true);
						
		}
		
	}
		
	$(document).on('ready', ig_adaptOnResizeAndReady);
	$(window).on('resize', ig_adaptOnResizeAndReady);
	
	
});