.scroll-body
	.wrap#my-sticky-element
		.box
			p.split1 Art
			p Inspired
			p.split2 Engineering
		.box.hidden
			p.shadow2 Engineering
			p Inspired
			p.shadow1 Art

html, body {
	height: 100%;
	font-family: sans-serif;
	font-weight: 700;
  letter-spacing: 2px;
}

body {
	overflow-x: hidden;
}

.scroll-body {
	height: 400vh;
	
	.wrap {
		top: calc(50vh - 10px);
	}
}

.box {
	top: 0;
	left: 0;
	max-width: 70vw;
	position: absolute;
	font-size: 50px;
	line-height: 60px;
	perspective: 400px;
	.split {
		z-index: 10;
	}
	
	.shadow {
		z-index: -1;
	}
	
	&.hidden {
		opacity: 0;
		z-index: -1;
	}
}

.wrap {
	position: relative;
	top: 50%;
	left: 25%;
	transform: translateY(-50%);
	padding: 30px;
	margin: 0 auto;
}

.source {
	color: skyblue;
	margin: 0 auto;
}

var animationDelay = 5,
		staggerDelay = 0.02,
		animationTime = 1,
		animationEase = SlowMo.ease.config(0.3, 0.7, false),
		animationExplosivity = 90,
		alphaFactor = 0.9,
		scrollDuration = 1600,
		
		text1 = $(".split1"),
		endText1 = $(".shadow1"),
		text2 = $(".split2"),
		endText2 = $(".shadow2"),
		tl,
		
		split1 = new SplitText(text1),
		endSplit1 = new SplitText(endText1),
		split2 = new SplitText(text2),
		endSplit2 = new SplitText(endText2);

startingLocations1 = [];
endingLocations = [];
startingLocations2 = [];
endingLocations.push([],[]);

$(endSplit1.chars).each(function(i){
	endingLocations[0].push({
		y: endSplit1.chars[i].getBoundingClientRect().top,
		x: endSplit1.chars[i].getBoundingClientRect().left
	});
});
$(endSplit2.chars).each(function(i){
	endingLocations[1].push({
		y: endSplit2.chars[i].getBoundingClientRect().top,
		x: endSplit2.chars[i].getBoundingClientRect().left
	});
});
function random(min, max){
	return (Math.random() * (max - min)) + min;
}
function getAnimation(el, starty, startx, word, i) {
	var randomZ = random(animationExplosivity*-1, 		animationExplosivity);
	var tween = new TweenMax.to($(el), animationTime, {
		bezier:{
			type: "thru",
			values: [
				{
					x: random(animationExplosivity*-1, animationExplosivity),
					y: random(animationExplosivity*-1, animationExplosivity),
					z: randomZ,
					autoAlpha: randomZ/animationExplosivity + alphaFactor,
				},
				{
					x: endingLocations[word][i].x - startx,
					y: endingLocations[word][i].y - starty,
					z: 0,
					autoAlpha: 1,
				}
			],
			autoRotate:false,
		},
		ease: animationEase
	});
	
	return tween;
}

function buildTimeline() {
  tl = new TimelineMax({paused: true});
	$(split1.chars).each(function(i, el){
		console.log(el);
		var starty = split1.chars[i].getBoundingClientRect().top,
		    startx = split1.chars[i].getBoundingClientRect().left;
		// tl.add(getAnimation(), i * 0.17);
		
		tl.add(getAnimation(this, starty, startx, 0, i), i * 0.02)
	});
	$(split2.chars).each(function(i){
		var starty = split2.chars[i].getBoundingClientRect().top,
		    startx = split2.chars[i].getBoundingClientRect().left;
		tl.add(getAnimation(this, starty, startx, 1, i), i * 0.02);
	});
}
buildTimeline();

// init controller
var controller = new ScrollMagic.Controller();

// create a scene
var scene = new ScrollMagic.Scene({
        duration: scrollDuration,    // the scene should last for a scroll distance of 1200px
        offset: 50    // start this scene after scrolling for 50px
    })
    .setPin("#my-sticky-element"); // pins the element for the the scene's duration

controller.addScene(scene);
scene.on("progress", function (event) {
    console.log("Scene progress changed to " + event.progress);
		var timeWithDelay = event.progress < 0.2 ? 0 : event.progress - 0.2;
		tl.progress(timeWithDelay*2).timeScale(0);
});