ScrollTrigger in iFrames

[anasuddin]

I am building out ads using GSAP and ScrollTrigger.

The ads are rendered within an iframe (the iframe is not cross domain, it is programmatically generated so no cross domain issues) and I want the ScrollTrigger to use the Parent window to monitor the scrolling action. Is this possible?

 

Here is an example snippet of the code. I have full access to the parent window.

ScrollTrigger.create({

trigger: "#hideme",

scroller: window.parent,

start: "top top",

scrub: 1,

markers: true

})

 

 

[ZachSaucier]

Hey anasuddin and welcome to the GreenSock forums.

 

Can you please create a minimal demo of your situation using something like CodePen?

 

[anasuddin]

Hey Zach, 

Unfortunately I can't get it to work properly in codepen as it won't let me inject a cross domain script into an iFrame. 

I did get it to work by modifying the ScrollTrigger plugin. 

When you pass in the 'scroller' option when initializing the plugin, if you pass in something like

window.parent

it still takes the current window object and not that of the parent. Therefore the scroll gets locked to the iframe window and now the parent window. 

Not sure if there is a proper workaround for this, but I just modified the plugin library and hardcoded it to look at the parent window. Not an ideal solution, but it works.

[ZachSaucier]

A minimal demo outside of CodePen would also be helpful.

[AdMan123]

Hi @anasuddin I'm having exactly the same problem, I want the video to play / pause on scroll in an iFrame (Google Ad Manager tag). How did you resolve it?

[wpsoul]

The same. I have iframe on page and ScrollTrigger doesn't work there properly, it always detects wrong positions

[GreenSock]

@wpsoul we're not aware of any issues with ScrollTrigger having wrong positions in an iframe; please provide a minimal demo that clearly shows the issue (like a CodePen or Stackblitz) and we'd be happy to take a look. Keep in mind that iframes are treated by the browser as entirely different scrolling/window elements. So if you're expecting things inside the iframe to be able to detect positions OUTSIDE the iframe in relation to the (outer) viewport, that's simply impossible (as far as I know). Browsers don't allow that for security reasons. 

[wpsoul]

On 8/11/2023 at 9:33 AM, GreenSock said:

@wpsoul we're not aware of any issues with ScrollTrigger having wrong positions in an iframe; please provide a minimal demo 

 

I have the same problem as mentioned above - I can't make codepen demo because it doesn't allow to inject cross domain iframes

 

So, I have possible two ways of solving.

 

1. Hard coding core GSAP files

2. Modifying trigger to use proper scroller

 

Biggest problem is that my iframe is generated automatically in CMS and scripts are possible to add:

 

1. Outside and inside iframe. In this way GSAP goes crazy and is applying animations twice. Scrolltrigger added also twice, on inner iframe window and on parent window

2. Only outside iframe. In this way animations are correct but ScrollTrigger uses wrong position. I tried to use something like

 

elementDocument.defaultView.frameElement

elementDocument

elementDocument.defaultView

 

where elementDocument is getting from useRef.current.ownerDocument

 

and then attach it to scroller property but it fails in proper detection of scroll position

 

So, the question is - if GSAP scripts are loaded outside iframe and we use React to add animations to iframe, is it possible to dynamically assign proper scroller window to ScrollTrigger?

 

[GreenSock]

44 minutes ago, wpsoul said:

if GSAP scripts are loaded outside iframe and we use React to add animations to iframe, is it possible to dynamically assign proper scroller window to ScrollTrigger?

Sorry, I don't really know what you mean - are you saying that you want to create a ScrollTrigger instance...and then LATER change the "scroller" config property to something else entirely on that same instance? 

 

You'll definitely have a much, much better chance of getting a solid answer here if you provide the most simple minimal demo possible that clearly illustrates the problem. It doesn't need to be CodePen. Stackblitz is good too. Or whatever. 

[wpsoul]

Ok, i tried on all services and they can't have iframes.

 

So, I made on my site. It's simple HTML page so you can copy it to local environment for testing

 

Iframe control for Scrolltrigger

 

See how markers are working for animated object. They are not moving when you scroll down, so I need somehow to keep scroller for block wrapper around Iframe, but still detect animated objects which are inside Iframe

[GreenSock]

I don't have much time at the moment, but from a cursory glance the issue is that you set the scroller incorrectly. You're setting "scroller" to be the ".interface-interface-skeleton__content" <div> which means the ScrollTrigger will watch THAT element for scroll events. In other words, the scrollbar that's moving would have to be the ".interface-interface-skeleton__content" element's. But in your demo, that's not correct - the scrollbar is on the nested <iframe>'s <body>. See what I mean? 

 

So you're telling ScrollTrigger to watch one scrollbar, but using an entirely different one to actually scroll things. 

[wpsoul]

8 hours ago, GreenSock said:

So you're telling ScrollTrigger to watch one scrollbar, but using an entirely different one to actually scroll things. 

yes, and that’s the main problem. When I try to use Iframe object as scroller, it’s completely broken, I don't see scroll markers at all in this case. Without providing scroller, it’s calculating parent window and again it’s broken. So, currently it’s not clear what to set in such scenario 

[wpsoul]

Tried to add additional layer inside iframe and attach scroller there - it doesn't work correctly, everything is moving together. I leave it as is now so you can test

[wpsoul]

On 8/14/2023 at 10:00 AM, GreenSock said:

I don't have much time at the moment, but from a cursory glance the issue is that you set the scroller incorrectly.

 

So, there is no way to use Scrolltrigger for Iframes?

[GreenSock]

This is definitely an edge case, but you could probably wire up a ScrollTrigger.scrollerProxy() to handle this, like: 

ScrollTrigger.scrollerProxy(innerDoc.scrollingElement, {
	scrollTop(value) {
		if (arguments.length) {
			innerDoc.scrollingElement.scrollTop = value; // setter
		}
		return innerDoc.scrollingElement.scrollTop;    // getter
	},
	getBoundingClientRect() {
		return iframe.getBoundingClientRect();
	}
});

innerDoc.addEventListener("scroll", ScrollTrigger.update);

And then make sure you set scroller: innerDoc.scrollingElement on your ScrollTriggers. 

 

The main problem is that inside iframes, the scrollingElement doesn't fire "scroll" events (even though that's the element that's scrolling!) but the root document does. 

 

Does that help? 

[wpsoul]

@GreenSock for the first test - it's working. But I need to test on a real app now. Does it degrade performance?

[GreenSock]

Nah, it shouldn't degrade performance in any noticeable way.