Implementation of Horizontal ScrollTrigger working for Mac, Windows and ioS, but not Android

[MikeFries78]

Apologies in advance if the codepen isn't scrolling.  I've tried to figure out why this is for an hour, and I'm using the same relevant code I'm using in my next.js app and it's scrolling fine there, but not in codepen.  If someone can advise what I'm doing wrong that preventing the minimal case from working, it would be seriously appreciated.

The issue I'm facing is that horizontal scrolltrigger is working for ioS, mac and windows, but not for android.

Behaviour on android:

- scrolling down doesn't move the view to the right, but into black space below the initial starting point.
- scrolling right will move the view to the right, however it will only be able to scroll for about 4 of the 11 sections and cannot scroll further than that.

Everything is perfect for other device types, I'm guessing it's something to do with 

x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px"

or..

end: () => "+=" + (container.offsetWidth - innerWidth)

and this impacting android differently to other devices somehow.

 

Again, apologies for the codepen, I'm trying to conform to what you guys expect and haven't been able to spot the issue with that rendering correctly.  Thanks kindly for any advice.

See the Pen jOeLzmd by MikeFries (@MikeFries) on CodePen

[GreenSock]

You were loading two totally different versions of GSAP. I think that was the problem in your minimal demo: 

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

 

As for Android, is your device really old? Maybe it doesn't understand arrow functions or display: flex CSS? I'd recommend trying to swap in some standard string values just to see what works/breaks: 

// replace this
end: () => "+=" + (container.offsetWidth - innerWidth)

// with this
end: "+=2000"

Just poke around replacing things until it works. Again, it might be arrow functions or other modern JS that's causing the issue. I doubt it has anything to do with GSAP/Draggable. 

[MikeFries78]

19 hours ago, GreenSock said:

You were loading two totally different versions of GSAP. I think that was the problem in your minimal demo: 

 

 

 

As for Android, is your device really old? Maybe it doesn't understand arrow functions or display: flex CSS? I'd recommend trying to swap in some standard string values just to see what works/breaks: 

// replace this
end: () => "+=" + (container.offsetWidth - innerWidth)

// with this
end: "+=2000"

Just poke around replacing things until it works. Again, it might be arrow functions or other modern JS that's causing the issue. I doubt it has anything to do with GSAP/Draggable. 

Thank you again Jack, this really helped a heck of a lot!

 

If you don't mind one last quick follow up question: when horizontal scrolling, I've got background images for each "section" (view-sized individual section the container is "scrolling" along horizontally"), and right now on some screens/resolutions/browsers, there's a pronounced join line showing between the background images.

Here is a good example of what I'm referring to:
 

https://imgur.com/O4k1NxN

 

Have you ever encountered these kinds of join lines?  The images are pixel perfectly aligned, and in a little over half of the browsers it's totally clear:

 

https://imgur.com/Taj3IqB

 

Thanks again for your help, I know you don't have all of my code to make a full recommendation, but I just wanted to check if off the top of your head you know about this or have encountered it before.  It's the last thing I have to wrap up and my first of many projects with GSAP is a wrap.

[MikeFries78]

For specificity and clarity, it would be like the equivalent of the join line between the pink and black sections in the codepen above, except I'm using background svgs to create one continuous effect to look like a single long background being scrolled along.  There are features like you can see which match between two backgrounds that neighbour each other, and in mac for example it's perfect.  

But for Opera consistently and some cases involving Windows, the join lines clearly show the equivalent of the join between the pink and black area, which I'm attempting to mask.  

Sometimes the lines will only show during scrolling and then will disappear when the horizontal scroll is stagnant.

For scrub: 1 for the scrolling effect, these lines are present in every screen/browser combo.  So I'm using scrub: true, which removes it for most screens, but evidently not all.

[GreenSock]

25 minutes ago, MikeFries78 said:

Thanks again for your help, I know you don't have all of my code to make a full recommendation, but I just wanted to check if off the top of your head you know about this or have encountered it before.  It's the last thing I have to wrap up and my first of many projects with GSAP is a wrap.

That sounds like just a browser rendering thing. Two things to try: 

1. Set will-change: transform in your CSS for the effected elements (and maybe the container too)
2. If that doesn't work, overlap them by 0.5 or 1 px, like with a negative margin.

Good luck!

[MikeFries78]

Jack thank you again, thanks also for building a great community.