<div class="scroller">

  <section class="green">
    <div class="heading">ScrollTrigger & Smooth-Scrollbar</div>
    <!-- <div class="text">Section 1</div> -->
  </section>

  <section class="grey">
    <div class="text">Section 2</div>
  </section>

  <section class="red">
    <div class="text">Section 3</div>
  </section>

</div>

@import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap');

body { 
  font-family: "Signika Negative", sans-serif;
  
  margin: 0;
  padding: 0;
  
  height: 100%;
  width: 100%;
  
  overflow: hidden;
}

.scroller {
  height: 100vh;
}

section {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

section .heading {
  position: relative;
  margin: auto;
  color: darkgoldenrod;
  font-size: 2.5em;
}

section .text {
  position: relative;
  margin: auto;
  color: white;
  font-size: 2em;
}

section.green {
  background: lightblue;
}

section.grey {
  background: grey;
}

section.red {
  background: steelblue;
}

gsap.registerPlugin(ScrollTrigger);

// Setup
const scroller = document.querySelector('.scroller');

const bodyScrollBar = Scrollbar.init(scroller, { damping: 0.1, delegateTo: document, alwaysShowTracks: true });

ScrollTrigger.scrollerProxy(".scroller", {
  scrollTop(value) {
    if (arguments.length) {
      bodyScrollBar.scrollTop = value;
    }
    return bodyScrollBar.scrollTop;
  }
});

bodyScrollBar.addListener(ScrollTrigger.update);

ScrollTrigger.defaults({ scroller: scroller });


// The actual animations and ScrollTriggers
gsap.to('section.grey .text', { 
  rotation: 360,
  scrollTrigger: {
    trigger: "section.grey",
    start: "top top", 
    end: () => "+=" + innerHeight,
    pin: true,
    scrub: true,
    markers: true
  }
});

gsap.from("section.red .text", {
  x: -500,
  opacity: 0,
  scrollTrigger: {
    trigger: "section.red",
    start:"top 50%",     
    toggleActions: "play none none reset",
    // markers:true
  },
});





// Only necessary to correct marker position - not needed in production
if (document.querySelector('.gsap-marker-scroller-start')) {		
  const markers = gsap.utils.toArray('[class *= "gsap-marker"]');	

  bodyScrollBar.addListener(({ offset }) => {  
    gsap.set(markers, { marginTop: -offset.y })
  });
}