Jump to content
Search Community

scrollTrigger not working on mobile

Shanda test
Moderator Tag

Recommended Posts

  • 2 years later...

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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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! 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...