[Scrolltrigger Batch error: "TypeError: Cannot read property 'pin' of undefined"]

Hey,

I'm struggling to get this scrollTrigger function to work in a Vue application: 

 

import Vue from "vue";
import { gsap } from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

const app = new Vue({
  el: "#app",
  mounted() {
    ScrollTrigger.batch(".reveal", {
      onEnter: batch => {
        gsap.fromTo(
          batch,
          {
            y: 100
          },
          {
            autoAlpha: 1,
            y: 0,
            ease: "power4",
            duration: 2,
            stagger: 0.2
          }
        );
      },
      start: "20px bottom"
    });
  }
});

 

When the page loads at the top of the viewport, everything works fine. But if I refresh on another point on the page I'm getting the following error:

 

Cannot read property 'pin' of undefined

Why is this happening and what can I do about it?