<section id="About" class="about">

<div class="about-title">
  <h2>About Us</h2>
</div>

<div class="about-pages">
  <div>
    <h2>About 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi,
soluta ipsam, minima delectus eaque omnis!</p>
  </div>
  <div>
    <h2>About 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi,
soluta ipsam, minima delectus eaque omnis!</p>
  </div>
  <div>
    <h2>About 3</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi,
soluta ipsam, minima delectus eaque omnis!</p>
  </div>
</div>
</section>

function splitScroll() {
const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
  duration: '200%',
  triggerElement: '.about-title',
  triggerHook: 0
})

.setPin('.about-title')
.addTo(controller)

new ScrollMagic.Scene({
    duration: '200%',
    triggerElement: '.services-title',
    triggerHook: 0
  })

  .setPin('.services-title')
  .addTo(controller)

}

splitScroll();