GSAP Scroll-Trigger in vue-project does work properly in dev- server but in production, all animation are on reload page

[Patsch36]

Hello,

 

i used gsap like this:

<script>
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
gsap.core.globals("ScrollTrigger", ScrollTrigger);

export default {
  mounted: function () {
    this.scrollAnimation();
  },
  methods: {
    scrollAnimation() {
      const gs = gsap.timeline({
        scrollTrigger: {
          trigger: ".card",
          start: "-50% bottom",
          toggleActions: "restart none reset none",
        },
      });
      gs.fromTo(".card",
      {
        y: innerWidth * (0.2),
        opacity: 0,
        duration: 0.8,
        stagger: 0.2
      },
      {
        y: innerWidth * (-0.001),
        opacity: 1,
        duration: 0.8,
        stagger: 0.2,
      });
      
      return () => {
        gs.scrollTrigger.kill();
      }
    },
  },
};
</script>

On my npm run serve- server, all the animation work properly when getting on viewport.

 

But if I build the page and put it on github pages, all animation get started when reloading the page.

Is there any solution for this?

[GreenSock]

Welcome to the forums, @Patsch36. It's almost impossible for us to troubleshoot by just looking at a code excerpt - we really need a minimal demo please. 

 

Are you seeing any errors in the console? It sounds like maybe ScrollTrigger isn't getting loaded or registered or something. Or you've got some other JS error that's halting JS execution at a certain spot. 🤷‍♂️