scrollTrigger not working on mobile

[Shanda 1 Likes (Newbie)]

My animation appears to work on mobile when I test it with dev tools but does not work on my cellphone. Any ideas or fixes?

See the Pen OJNqrqG by okcwebdev (@okcwebdev) on CodePen

[GreenSock 18,566 Likes (Superhero)]

It's because of a math issue in your code that's causing duration to be negative

 

// if the window is less than 600, duration will flip negative!
let duration = (window.innerWidth - 600) / 250;

Perhaps you meant to wrap it in Math.abs()?

[brennamacquarrie 5 Likes (Newbie)]

Hey @GreenSock how did you find this error (aside from experience/intelligence)? I have a site that works fine on desktop, i don't see any errors, and i can resize and inspect the browser any which way and it's happy (also works on safari & chrome same same). But the site when viewed on my phone does not have any ScrollTrigger action - all other animations work fine but the scroll animations are never activated.... 

Here is the site:

https://blxck.space/

 

(Here is the repo (not asking for code review! just on the off chance it helps)

https://github.com/brennaMacQuarrie/blxck_react/tree/master/src )

 

TYSMIA! Any tips much appreciated!

[GreenSock 18,566 Likes (Superhero)]

Hi @brennamacquarrie. Unfortunately we don't have the resources to weed through all the code in your site for free looking for problems, but if you'd like some help you could either create a minimal demo (here are a

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

and Stackblitz starter templates) and post it here or you could contact us if you'd like paid support options. 

 

It looks like you're using React and you're not following best practices, so I would strongly recommend reading this article:

 

 

I very quickly glanced at one file in your repo and it looks like you're using a single timeline instance and then shoving ALL of your interaction-drive animations into that which is generally not a good idea. You end up with one super long timeline that's storing all of the old tweens, so they're never released for garbage collection. It's just kinda pointless and wasteful. Just create a new tween or timeline on each interaction. Like in your handleOpen() and handleClose() methods for example. This has nothing to do with your animations not working on mobile. You must have something else that's causing that. 

 

You're also defining toggleActions AND scrub: true, but those are mutually exclusive. If you define scrub: true, it'll completely ignore toggleActions, FYI. 

 

In your NavBar, you're creating a ScrollTrigger outside of a useEffect()/useLayoutEffect() and you defined start: "top top" but you didn't define a trigger element. I assume you meant start: 0 (the very top of the page). 

 

Good luck with the project!

[brennamacquarrie 5 Likes (Newbie)]

Hey @GreenSock - first of all thank you for the extended response, not to mention for these forums and the very in depth docs. Im bummed I gave the impression that I expect code review, and should have known better than to post the repo! For opening it at all, you're very patient. 

 

I have definitely been digging thru the react best practices docs but I need to spend more time with them and clean up the - probably many - spots I've missed. In most cases I am working with useLayoutEffect or useEffect and setting and clearing context but honestly it may be that the one or two times I'm not using this, I'm causing issues on mobile scroll, who knows. 

 

The other tips you gave are awesome and I will incorporate all of your suggestions. Thanks again!