Pin element with ScrollTrigger and ignoreMobileResize inside Instagram app

[ceribbo]

Hi there,

I realized a website for a client with multiple scrolltriggers and pinned sections.

I've managed to successfully run the website on standard browsers, however "embedded" browsers like the one that is opened with the link on an Instagram profile page breaks my layout.

 

You can see the difference between normal safari browser and instagram in-app browser in the attached images.

I tried using the code below in order to don't let the browser recalculate the triggers points based on navigation bar conditions:
 

ScrollTrigger.config({ ignoreMobileResize: true });
ScrollTrigger.config({
	autoRefreshEvents: "DOMContentLoaded,load,visibilitychange" // notice this list doesn't contain "resize"
});

Do you have any other suggestion?

 

Here I leave the link to open the website with normal browser https://www.marinadibardibeach.it/ or with my client instagram page https://www.instagram.com/marinadibardi.official/

 

Thank you in advance for you help.

instagram-browser.jp2 normal-browser.jp2

[Rodrigo]

Hi,

 

Unfortunately I don't use instagram so I can't really tell you, but maybe you could try combining ScrollTrigger's isTouch property with normalizeScroll():

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Something like this:

if (ScrollTrigger.isTouch === 1) {
  ScrollTrigger.normalizeScroll(true); 
}

That would use normalizeScroll only in touch devices. Maybe you could add a URL check and see if there is some instagram referral or add a query to the instagram URL in order to know that the user is coming from instagram and take the corrective measures soto speak.

 

Have you tried this without any GSAP animations in it? Just the Instagram browser, in order to see how the layout and styles work? As far as I can tell this seems more related to a browser specific issue rather than a GSAP one, since we've had no reports, until now regarding something like this.

 

Hopefully this helps.

Happy Tweening!