<div id="wrap">
    <div class="ani ani1">
        <h1 data-role="animation">Animation1</h1>
    </div>
    <div class="ani ani2">
        <h1 data-role="animation">Animation2</h1>
    </div>
    <div class="ani ani3">
        <h1 data-role="animation">Animation3</h1>
    </div>
</div>

html, body {
	padding:0; 
	margin:0;
}
.ani {
	display:flex; 
	justify-content:center; 
	align-items:center; 
	width:100%; 
	height:100vh;
}
h1 {
	font-size:10vw;
	font-weight:bold;
	color: #fff;
}
.ani1 {
	background-color:#26a69a;
}
.ani2 {
	background-color:#cddc39;
}
.ani3 {
	background-color:#f06292;
}

var controller = new ScrollMagic.Controller();

// 변수로 data-role값을 모두 선택
var aniTarget = document.querySelectorAll("#wrap *[data-role='animation']");

// 해당 변수에 기본 값 부여
TweenMax.set(aniTarget, {opacity: 0, y: 100});

// forEach
aniTarget.forEach(function(el){
  var tween1 = new TimelineMax().to(el, 4, {
    opacity: 1, y: 0, ease: Cubic.easeOut
  })

  var scene = new ScrollMagic.Scene({
    triggerElement: el,
    triggerHook: 0.5,
    duration: "60%",
    reverse: true
  })
    .setTween(tween1)
    .addTo(controller);
});