Jump to content
GreenSock

OunknownO

ScrollTrigger plugin how to trigger when it's in iframe

Recommended Posts

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

Link to comment
Share on other sites

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'?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Posted (edited)
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 by OunknownO
Found another example
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×