iFrame in Pinned element reloading on resize event

[arnespremberg]

Hi GSAP community! What a wonderful tool to work with.

However, I do have a problem I can't seem to solve. Help would be much appreciated.

 

I'm developing a ScrollBased site using a huge iFrame backdrop. It's all working well, however on resize events the iFrame reloads. On desktop this rarely matters, however on mobile, there is basically always a resize event triggered when scrolling down, as the address and menu bars are minimising. This massively breaks the user interaction flow, and is also quite data intensive.

 

To reproduce, please open the Codepen:  and resize once the iframe is loaded.

 

Any help with keeping the iframe from refreshing would be much appreciated! Thanks!

See the Pen WNGrPgz by arnespremberg-the-animator (@arnespremberg-the-animator) on CodePen

[ZachSaucier]

Hey arnespremberg and welcome to the GreenSock forums.

 

First let's understand why this happens: Since you're pinning the container of the iframe, GSAP needs to add a wrapper element (.pin-spacer) to allow pinning to work properly. When ScrollTrigger refreshes, this wrapper element needs to be updated. In order to get the correct measurements, that means the pin-spacer needs to be removed. When an iframe gets moved around in the DOM (even a little bit) browsers force it to refresh (whether or not that's the way it should be is besides the point). Altogether you get the issue that you're seeing.

 

You have two options to work around this issue:

1. Don't put the iframe inside of a pinned element. Perhaps you could do what you need to do with just position: sticky. Otherwise you could try to use transforms to fake pinning but we've found that to not be able to be synced as well as pinning does. As a last resort you could drop the pin type of effect altogether.
2. Turn off automatic refreshing on resize. In the upcoming version of GSAP you can do that using ScrollTrigger.config({autoRefreshEvents: "visibilitychange,DOMContentLoaded,load"}). Beta file for that version: https://assets.codepen.io/16327/ScrollTrigger.min.js. With that being said, it turns off all refreshing on resize (after the initial load) so you might want to implement your own refreshing logic on resize. Applied to your demo:

See the Pen vYXLqdp?editors=0010 by GreenSock (@GreenSock) on CodePen

[arnespremberg]

Hi Zach, thank you so much for your fast reply!

 

It is very helpful indeed, option 2 will need to do the trick for me as I have a long one-page with multiple iframe backdrops going on...

 

Is there any way to install the beta version through npm?

 

Thanks,

Arne

[arnespremberg]

And one more question: Would the following be a functionally implemented custom refresh logic?

 

 

// Store the window width

var windowWidth = window.innerWidth

window.addEventListener("resize", function (e) {

// Check window width has actually changed and it's not just iOS triggering a resize event on scroll

    if (window.innerWidth != windowWidth) {

        windowWidth = window.innerWidth

        ScrollTrigger.refresh();

    } else {

        // prevent default in case resizing was only height

        e.preventDefault();

    }

})

[arnespremberg]

I'm afraid I can't load this version as it throws the following Error:

TypeError: Cannot set property window of #<Window> which has only a getter

[ZachSaucier]

34 minutes ago, arnespremberg said:

Is there any way to install the beta version through npm?

You could load via a script tag before your bundle. Or perhaps @GreenSock can DM you a ZIP file of the modules version.

 

31 minutes ago, arnespremberg said:

Would the following be a functionally implemented custom refresh logic?

Looks pretty good to me upon first glance and not testing it  Though you might want to throttle/debounce how often it runs because a lot of resize events occur when someone is dragging a window. A setTimeout() or gsap.delayedCall() that you clear if another resize event happens would be a good way of doing that.

[GreenSock]

40 minutes ago, ZachSaucier said:

1 hour ago, arnespremberg said:

Is there any way to install the beta version through npm?

You could load via a script tag before your bundle. Or perhaps @GreenSock can DM you a ZIP file of the modules version.

 

Sure, you can get a .tgz of the beta package that you can npm install here: https://assets.codepen.io/16327/gsap-beta.tgz

[arnespremberg]

Thank you all so much!!! Much appreciated!