GSAP animation not working on mobile deviecs

[Ram Ji]

I have created a website in React JS with the help of the useGSAP hook and now when I run the website on localhost on mobile/desktop all the animations are working fine but after deploying the website animations are only working on the desktop but on mobile all the animations run on load like, when I load the page all the animations are performed automatically. Please help me I don't wanna use the 'ref' for each element.

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Ram Ji]

It is a big project and I have used many components in it, It would be time-consuming for me to make It from scratch in Stack Blitz. Are there any other solutions? I'll try to build it in Stack Blitz and send you the link when it is done.

[Cassie]

Hi there - I understand that your project has many components, but  the purpose of a minimal demo is to try and recreate the issue with as little code as possible.

 

As the previous answer mentioned -

 

Quote

Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

The process of creating a minimal example will usually surface the issue. I assume that you mean the animations are playing on load rather than on scroll? If so, try to create a minimal demo that shows a simple animation that runs on load but not on scroll, then we can advise. If you can't recreate that, as the advice above states, build up bit by bit until it breaks.

Other advice:

 

If you're using ScrollTrigger, add some markers to see where the animations are being triggered

Check your console for errors

Play "spot the difference" - what's different between local and live? Is something maybe loading in slowly and causing a layout shift? Is there an issue with your deployment process/build tooling? This is probably where I would start if it was working locally but not on prod.

 

[Ram Ji]

Alright, I'll recreate it if I face the issue I'll let you guys know. It may take 2-3 days because I'm in the middle of my exams will you guys respond then?

[Ram Ji]

@Cassie @GSAP Helper hey guys I tried to make some changes and I found out that I was using an image which loads slowly I mean it loads after the component is loaded so all the scroll triggers moves up before the image is loaded and that's why all the animation are playing before their actual positions. Please help me with this how can I load the image before the component and I have also reduced the size of image to around 36kb and using the webp format.

[GreenSock]

Are you lazy-loading the image? I'd recommend not doing that. Or give the image an explicit height/width so that the layout doesn't shift around after it loads. Or make sure that you call ScrollTrigger.refresh() after the image loads. You could add a "load" event listener to the image. There are many ways to accomplish it, but the overall objective is to just make sure ScrollTrigger refreshes after the layout is settled. 

[Ram Ji]

I'm not using lazy-loading, but I have set the opacity of the image to 0 in the animation, can I use the setTimeout to refresh the scrollTrigger after a second maybe? but I guess the animation will be played when the page loads because of the image. Can you tell me how I can check if the image is loaded, I'm new, so can you please provide the code? Thanks .

[Rodrigo]

Hi,

 

An image (as some other HTML element) can have a load event listener attached to it:

 

const myImg = document.querySelector("#myImg");

myImg.addEventListener("load", () => {
  console.log("IMAGE LOADED!");
})

Also you can attach an event handler to the window object as well, but that will have to wait for everything to be loaded:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

 

Hopefully this helps.

Happy Tweening!

[Ram Ji]

Hey, I have tried everything with the image but it's the same problem, I have even tried giving the image an explicit width but it didn't work either. Also, I tried this I loaded the full page after the page was loaded I went to a different route and when I went back to the same page then all animations and scrollTriggers were working fine.

[GreenSock]

4 minutes ago, Ram Ji said:

I have even tried giving the image an explicit width but it didn't work either.

Did you give it an explicit height too? That's even more important. 

 

Did you call ScrollTrigger.refresh() after all the images load? 

 

It's almost impossible for us to troubleshoot without a minimal demo. If you'd like more help, please provide one. 

[Ram Ji]

I didn't give it height just width, yes I refreshed the scrollTrigger.

 

Alright here is a demo but I just copied and pasted it from my actual project so I didn't make any components in it and CSS and GSAP animations may be up and down, one more thing the demo that I have given is working perfectly fine but this issue is occurring on the mobile devices when the project is deployed.

 

https://stackblitz.com/edit/stackblitz-starters-9pcf5f?file=src%2FApp.js

[GreenSock]

A few things I noticed: 

1. You only added a "load" event listener to one image. You should ScrollTrigger.refresh() after ALL of the images are completely done loading (I wouldn't recommend doing it after each and every one loads). Or just set the width and height of all your images so you don't even have to worry about the layout shifting around?
2. You have a typo in your matchMedia(): 

   // bad
   "(max-width: 768px"
   
   // good
   "(max-width: 768px)"

    

3. You're using quite a few useGSAP() calls which is technically fine but it just seems wasteful. Why not just use one?
4. I wouldn't recommend using the very old syntax for easing, like ease: Expo. Use the string-based one instead, like ease: "expo". 
5. You've got a tween with a delay, but it also has a ScrollTrigger that's set to scrub: 0.1 which doesn't make much sense. The delay would be ignored logically if you've got the tween's playhead wired up to the scrollbar position. 
6. You've got tl.current getting set to completely different things in various useGSAP() calls. In some, you're treating it like an Array, like tl.current[1] = gsap.timeline() and then in another place you're setting it directly to a timeline, like tl.current = gsap.timeline(). That looks problematic to me. 

I hope that helps. 

[Ram Ji]

Hey guys I gave height to the photo now it is working all fine.

 

This is another problem that I'm facing so I'm using lenis smooth scroll in my website and the website is build in react so when I scroll on home page I can scroll all the way to bottom but when I change the route and scroll again it gets stuck at the height of home page so It only scroll to the height of the home page is there a solution for this? Please help

[Rodrigo]

Hi,

 

Unfortunately Lenis is not a GSAP product so we can't really support it in these forums. We try to keep our focus on GSAP related issues.

 

This is a specific Lenis issue so you should look for advice in Lenis' support channels, however this might be as simple as destroying the instance of Lenis and creating it again when the route changes. Here is a simple demo of how we handle that with ScrollSmoother (GSAP smooth scrolling plugin):

https://stackblitz.com/edit/stackblitz-starters-9xvpi2?file=src%2Frouter%2Findex.js

 

Good luck with your project.

Happy Tweening!