ScrollTrigger plugin how to trigger when it's in iframe

[OunknownO]

This works great when it's not iframe, but when I try to implement it in iframe. it doesn't work. Do anyone knows how to do it?

See the Pen GRxjpME by marko_mlinarevic (@marko_mlinarevic) on CodePen.

[Cassie]

Heya! What do you mean 'implement in an iframe' Are you running JS in the parent webpage and trying to target elements in an iframe?

 

If so that's just a limitation of the web/JS, not ScrollTrigger.

If not could you possibly expand on your question a little more, let us know what you're trying to do and what you mean by 'it doesn't work'?

[OunknownO]

21 minutes ago, Cassie said:

Heya! What do you mean 'implement in an iframe' Are you running JS in the parent webpage and trying to target elements in an iframe?

 

If so that's just a limitation of the web/JS, not ScrollTrigger.

If not could you possibly expand on your question a little more, let us know what you're trying to do and what you mean by 'it doesn't work'?

I figured it out. Because I have to have no scroll on iframe(I need it without scroll, only the parent page should be scrollable). Because gsap can't watch parent(I'm running gsap from inside iframe) only solution I have is intersection observer.

[GreenSock]

I can't imagine a scenario where IntersectionObserver works but ScrollTrigger can't. It sounds like you just need to set the "scroller" to the proper thing so that ScrollTrigger knows what to watch. But beware that iframes typically have security restrictions that don't allow the iframe content to look up to the parent and get any information. Again, that's a security restriction in browsers. 

 

It sounds like you figured out a solution, so that's great. 

[OunknownO]

17 minutes ago, GreenSock said:

I can't imagine a scenario where IntersectionObserver works but ScrollTrigger can't. It sounds like you just need to set the "scroller" to the proper thing so that ScrollTrigger knows what to watch. But beware that iframes typically have security restrictions that don't allow the iframe content to look up to the parent and get any information. Again, that's a security restriction in browsers. 

 

It sounds like you figured out a solution, so that's great. 

Sadly I'm struggling with intersection observer and timings. I have no issues with that it's a solution that will be on the same domain as default page. So I can access "window parent" with no issues. My question is how to point scrollTrigger to look at window.parent body not the one in iframe. Only way that i see is entering in script and hardcoding it. Have no more solutions EDIT: 

 this person had a same issue

Edited July 12, 2022 by OunknownO
Found another example

[GreenSock]

I would assume you could do what I suggested earlier - set the scroller to be the parent, but that's not really something I'd say is "officially" supported. This is a highly unconventional use case. If you try that and it doesn't work, please provide a minimal demo and we'd be happy to take a peek. 

[OunknownO]

  let indexForElements = 0;
  let totalValue = 411;
  ScrollTrigger.create({
    scroller: window.parent,
    trigger: '.paragraph',
    start: 0,
    end: "bottom bottom",
    scrub: 0.8,
    fastScrollEnd: 1000,
    animation:
      gsap.to({}, {
        duration: 1,
        onUpdate() {
          if(indexForElements < totalValue) {
            document.querySelector('#text-highlight-section').contentWindow.document.body.querySelector('.paragraphElement' + indexForElements).style.color = "#0b41cd";
            indexForElements++;
          }
        }
      })
  });
  window.setTimeout(() => {
    ScrollTrigger.refresh();
  }, 200);

In the end I brute forced it, it's not a nice solution but it will work, If you have idea how to improve on it I am all ears(this is called from inside). Only question is now how to connect speed of animation with scroll speed. The only thing comes to mind is either scrolltrigger velocity. and then basing it on that but that introduces whole batch of new problems. Issue is gsap cannot access elements in iframe so only workaround is to point on them and change styles independently of gsap.

[GreenSock]

If you have any GSAP-specific questions you'd like help with, @OunknownO, please make sure you provide a minimal demo that very clearly and succinctly illustrates the problem and we'd be glad to take a look.