GSAP Trigger act different on mobile

Hi.

Set up yesterday a fade animation to blend the body bg and some other elements. The Trigger Selector in Settings is a bricks block (in the footer) and the Scroll Start / End looks good. See Marker screenshots:

It works pretty well on desktop - but with Safari on mobile the animation already starts in the middle of the page blending. Can´t remember right - but maybe this was happening sometimes yesterday in FF on desktop as well. Can´t reproduce it.

You can find the WIP site here : https://karriere.munu-kabel.de

If You need further infos / settings - let me know.

I could reproduce it on desktop… Using PC / Firefox latest - just reload the page with STRG+F5 and You can see the marker wandering up.

But seems only happening on this subsite : Unternehmen – M&N . Karriere

Hi.

Any chance to get some feedback? Can you confirm this, will it be fixed in the next version?

Unfortunately, I cannot reproduce it. On my side, also your site looks good here. The GSAP rules are setup correctly. If you look at the GSAP forums, you’ll find that many have problems with Safari, as things seem to render differently there. This is a typical problem. Nothing could be fixed from Bricksforge’s side.

Can you help me reproduce this? Then I can at least make sure that Bricksforge is not responsible.

Yes - it´s a bit hard to reproduce, but in the whole development process I´ve come over it again and again. And right now it´s not Safari.

I´ll try to get it better reproduced and be back with it…

Ha - I think have it :slight_smile:

See the captures attached and do the following here : https://karriere.munu-kabel.de

All on PC / Firefox / Desktop

Scroll down till the end / scroll up and use the link ‘Unternehmen’ right under the photo / scroll down again. You see the marker changing their positions.

Thanks. I can reproduce it now :slight_smile: Do you have some lazy load in the page? Seems that ScrollTrigger cannot calculate the real height of the document. If you have lazy loading images above, this could cause the issue.

If not: can you send me login data? Would take a look there.

Lazy Load was active from Bricks side - I´ve deactivated it and now it seems to work in quick tests.

But is this a thing that could be managed - even with Layz Load?

1 Like

Not really, because lazy loaded things are just not on the page yet. So ScrollTrigger cannot know about the real height. For GSAP stuff, its always a better practice to disable lazy load :slight_smile: