ScrollTrigger makes section disappear on mobile

[fewture]

Hi Guys,

we have a very strange issue regarding an animation which includes scrollTrigger with pinning and horizontal scrolling.
It works PERFECTLY on desktop, but on mobile it's a catastrophy. The section simply disappears as soon as it should be pinned.
The issue shows up on desktop only, if one resizes from mobiel to desktop view in Google's DevTools. On refresh, the page works nromally again. 

We have tried every solution that we could find since we are searching for a solution since 3 days...

We tried providing a codepen as well, but somehow we can't reproduce it. 

You can have a look for yourself right here:

atz.fewtureservicing.de

 

Here is our ScrollTrigger setup:

 

let st = ScrollTrigger.create({
                                    animation: tl,
                                    trigger: $('.scroll-trigger-references'),
                                    markers: true,
                                    id: "referenceSliderGSAP",
                                    pin: true,   // pin the trigger element while active
                                    start: "top top", // when the top of the trigger hits the top of the viewport
                                    end: "bottom", //tested with "+=6000" earlier
                                    scrub: 1,
  									// reparentPin: true - tested as well
                                });

 

And this is the basic structure of our horizontal scrolling container:

 

<div class="scroll-trigger-references"> 

	<div class="references-loop">

          <div class="background--images">
          </div>

           <div class="reference-tile">
           </div>
			

           <div class="reference-tile reference-last-tile">
           </div>
	</div>

</div>
		

 

With the following CSS:

 

.scroll-trigger-references {
    height: 100vh;
    overflow-x: hidden;
    will-change: transform; //tested as well :(
}

.references-loop {
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.reference-tile {
    width: 100vw;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

 

 

I know, that this is the worst possible way of providing code, but we are stuck with this issue for days now and can't reproduce it on codepen...

We would appreciate any hint or help with our issue!!

Thank you for your great work (Even if we don't get this issue resolved!  )

[Trapti]

Hi, 

 

I checked, and it's working fine for me. You are talking about the pinned horizontal section,  right? 

 

[fewture]

Hi @Trapti and thank you for your fast reply!!

Exactly, that section is the one which is breaking on mobile. 
Are you using a mobile device emulator or a cloud device?

Unfortunately it seems, as if it is not reproducible on emulators...
It's making it even harder for us to debug.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. I know you said you tried providing a CodePen but can't reproduce it there, right? That makes it even harder to diagnose. 

 

One quick suggestion: are you using ScrollSmoother? Did you try setting smoothTouch: 0.1 on your ScrollSmoother instance?  Because by default, it doesn't do any smoothing on touch devices. Maybe the issue is that your ScrollTrigger is using pinType: "transform" or "fixed" instead of the other way around (you could try explicitly setting it, but beware that you'd have to use "transform" if it's inside a transformed element because browsers create a new stacking context in that case). 

 

We really need some kind of minimal demo (CodePen) to help further. Or if you need troubleshooting of a live site like that, you can contact us about paid consulting services or post in the "Jobs & Freelance" forum. 

[akapowl]

7 hours ago, fewture said:

Exactly, that section is the one which is breaking on mobile. 
Are you using a mobile device emulator or a cloud device?

Unfortunately it seems, as if it is not reproducible on emulators...
It's making it even harder for us to debug.

 

Hello @fewture

I can even replicate it on a Desktop device. But without any access to your code to tinker with in an easy way, it is close to impossible to tell what is causing that.

As a starting point for debugging it yourself, here's what I think might be connected to your problem.

When the section is not pinned everything is fine...
 

 

 

...as soon as it gets pinned though, there is a transform on the Y-axis applied to that section, which will cause it to 'dis-appear' - that changed back to 0px in dev-tools would make it 're-appear'. So it looks to me like there might just be something wrong with your setup somewhere in your code, or you have something interfering at some point.

 

But again; without having access to your code in an un-minified format and ideally cut down to the bare minimum, so we can tinker with it, it is close to impossible to tell what that might be - the possibilities are endless.

 

Debugging live-websites also is a bit out of scope for what is expectable from this free support forum, as there is just too much involved outside of GSAP. From having a look at the imprint of your website, it looks like you are located not too far to where I'm from myself - so in case you need some deeper custom consultation on this, I'd like to offer my services.

Feel free to DM me about that, if you're interested, and we'll see how we can work something out.