.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);
});