ScrollTrigger not working on actual device

[ektorp]

Hello team Greensock - I would like to request a possible solution for an issue I am having with general ScrollTrigger use on mobile devices. For example, to demonstrate I have a very basic set up with a simple ScrollTrigger animation as shown below. This works as expected on desktop and mobile with the dev tools device toolbar. But for some reason, viewing this on an actual device, the ScrollTrigger animation does not run. There are no known errors - it simply does not play only on an actual device. Debugging a bit, I find that if I remove the ScrollTrigger from the animation, the gsap animation does then play. But by adding the ScrollTrigger, it doesn’t not start the animation. Adding the ScrollTrigger to the animation prevents the onStart event from being called. I have looked further into other possible solutions but have not found anything. All of the necessary libraries are being loaded and registered with gsap.registerPlugin(ScrollTrigger, SplitText). Again, everything works fine on desktop and small desktop views. It simply does not work on an actual device with all browsers on iOS - Safari., Chrome, Firefox, and Edge. 

 

I unfortunately do not have a codepen to show this but this is the somewhat critical issue I am facing. If it helps, I am using ViteJS as my dev build tool. It may be a possible issue with tree shaking but I have not found a solution for this. I know this may not be a typical issue but I am hoping it may be something simple that I am missing. Any help or suggestions with this would be greatly appreciated.

 

  gsap.to(".hero-img", {

    left: 100,

    

    onStart: function() {

      // This gets called on desktop but not on an actual mobile device

      console.log(“onStart");

    },

 

    // If I remove the ScrollTrigger, the animation does then play

    // But adding this ScrollTrigger prevents the animation with no errors

    scrollTrigger: {

      trigger: ".hero-img",       

      toggleActions: "restart pause resume reverse",

      start: "top 25%",

    },

 

  });

[Toso]

it's hard to imagine everything  without a demo but i would recommend just making it simple first to test it and also use  x,y, xPercent, yPercent and  enable the markers to check the start and end points 

[ektorp]

Thank you @Toso for your response. Yes, I understand that not having a codepen demo makes it difficult to resolve but I unfortunately do not have a codepen for this use case. And yes, as the example I gave shows, I have simplified it as much as possible with one element with a simple position left animation. This simple example works as expected on desktop and desktop reduced browser sizes. It simply does not work on an actual device. It is not an actual code issue as my example could not be more simplified. I believe it is something with tree shaking or with my build system, ViteJS, doing something with ScrollTrigger that needs to get resolved. I am hoping someone else has run into a similar issue with ScrollTrigger not working only on actual device.

[ektorp]

Looking further into this, this appears to be an issue with ScrollTrigger and Vite. In the post below, someone seemed to have a similar issue.

https://github.com/vitejs/vite/issues/12141

He seemed to have resolved and then posted a solution. But his post seems to have been deleted now going to a 404. Has anyone else experienced ScrollTrigger issues with Vite? Again, my example is as simple as possible. ScrollTrigger is simply not being called apparently because of Vite. Any help or support with this would be greatly appreciated.
 

[Toso]

i work with Vite and gsap with vanilla js and react so i don't think there is something with Vite but maybe the import itself? i find ppl usually do the wrong import when they work with a framework 

[Rodrigo]

Hi @ektorp,

 

As @Toso mentions without a demo is hard to get an idea of what could be the issue. I created all the demos in our Stackblitz collection (Vue/Nuxt/React) using Vite and I haven't ran into any issues with ScrollTrigger on devices 🤷‍♂️

 

Are you using a specific UI framework (Vue, Svelte, React, etc) or just bundling a vanilla project with Vite? 

 

You can create a demo of Vanilla JS using Vite for bundling in Stackblitz:

Anything you can create in terms of a demo would be super helpful.

 

Happy Tweening!

[ektorp]

Hi @Toso I am using standard imports as shown below. I believe these are correct. I do believe it is with the way Vite handles plugins which I am further investigating.
 

import { gsap } from "gsap";

import { ScrollTrigger } from "gsap/ScrollTrigger";

Hi @Rodrigo I am using vanilla JS with GSAP and ScrollTrigger and there does appear to be known issues with ScrollTrigger and Vite. This post below is similar to what I am experiencing in what OSUBLAKE states:

"There is definitely something horribly wrong with how SvelteKit and or Vite handles imports. In production is not even importing ScrollTrigger. "

I tried OSUBLAKE's solution but that did not seem to work for me. I am continuing to looks for possible solutions for this is odd use case.

 

[Rodrigo]

Hi,

 

Indeed this sounds like something more related to Vite than GSAP.

 

Have you tried importing GSAP and ScrollTrigger at the top of your entry file and register ScrollTrigger as the first instruction in your code? So the first thing your entire app should run would be GSAP's registerPlugin method, just for testing. If that doesn't work, then I'd look into Vite's configuration next.

 

Happy Tweening!

[ektorp]

Hi @Rodrigo As you suggested, I just tried importing GSAP and ScrollTrigger at the top of the entry file and registering ScrollTrigger and that did not work. Yes, it does appear to be more of an issue with Vite than GSAP. I am continuing to look into this more at the Vite level. Thank you for your response and suggestions.