<h2>Scroll down</h2>

<div class="box played"></div>

<div class="box scrubbed"></div>

<div class="box played"></div>

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

body { 
  font-family: "Signika Negative", sans-serif; 
  font-weight: 300;
  margin: 0;
  padding: 0 20px;
}

h2, .box {
  margin-bottom: 100vh;
}
h2 {
  text-align: center;
}

.box {
  background-color: green;
  width: 100px;
  height: 100px;
}

// Create all the ScrollTriggers that are BEFORE the pinned sections
const played = gsap.utils.toArray('.played');
gsap.to(played[0], { 
  x: 300,
  scrollTrigger: {
    trigger: played[0],
    toggleActions: "play none none reset"
  }
});

// The pinned sections
const scrubbed = gsap.utils.toArray('.scrubbed');
scrubbed.forEach(box => {
  gsap.to(box, { 
    x: 300,
    scrollTrigger: {
      trigger: box,
      scrub: true,
      pin: true,
    }
  });
});

// Create all the ScrollTriggers that are AFTER the pinned sections
gsap.to(played[1], { 
  x: 300,
  scrollTrigger: {
    trigger: played[1],
    toggleActions: "play none none reset"
  }
});