ScrollMagic animation

by silb3r

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/jquery.ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<div></div>
<h1 id="title">Hello World !</h1>
<div></div>

CSS

body {
  margin: 0;
  padding: 0;
}

div {
  height: 100vh;
  background: skyblue;
}

h1 {
  font-family: "Courgette", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 3em;
  text-align: center;
}

h1 span {
  opacity: 1;
  transform: translateY(0);
}

JavaScript

var controller = new ScrollMagic.Controller();

$('#title').html(
  '<span>' +
  $('#title').html().split('').join('</span><span>') +
  '</span>'
);

var iMax = document.getElementById("title").length;

for (i = 0; i < iMax; i++) {
  var target = document.querySelector("h1").children[i],
    titleTween = new TweenMax.fromTo('#title span:nth-child('+(i+1)+')', i + 1.5, {
      "opacity": 0
    },{
      "opacity": 1,
      "transform": "translateY(100px)",
    });

  new ScrollMagic.Scene({
  		triggerElement: '#title',
      triggerHook: 'onEnter',
  //    duration: 0,
//      offset: 200,
      reverse: true,
    })
    .setTween(titleTween)
    .addIndicators()
    .addTo(controller);
}