TweenLite.defaultEase = Linear.easeNone;
var controller = new ScrollMagic.Controller();
var tl = new TimelineMax();
// tl.from("section.panel", 1, { yPercent: 100 });
// tl.from("section.panel.turqoise", 1, { yPercent: 100 });
// tl.from("section.panel.bordeaux", 1, { yPercent: 100 });
// tl.from("section.panel.brown", 1, { yPercent: 100 });
// tl.from("section.panel.green", 1, { yPercent: 100 });
// tl.from("section.panel.blue", 1, { yPercent: 100 });
var slides = document.querySelectorAll("#pinContainer section");
new ScrollMagic.Scene({
triggerElement: "#pinMaster",
triggerHook: "onLeave",
duration: "200%"
})
.setPin("#pinMaster")
.setTween(slides.forEach(el => tl.from(el, 1, { yPercent: 100 })))
.addIndicators({
colorTrigger: "white",
colorStart: "white",
colorEnd: "white",
indent: 40
})
.addTo(controller);