OunknownO Posted July 12, 2022 Share Posted July 12, 2022 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 More sharing options...
Cassie Posted July 12, 2022 Share Posted July 12, 2022 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 More sharing options...
OunknownO Posted July 12, 2022 Author Share Posted July 12, 2022 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 More sharing options...
GreenSock Posted July 12, 2022 Share Posted July 12, 2022 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 More sharing options...
OunknownO Posted July 12, 2022 Author Share Posted July 12, 2022 (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 July 12, 2022 by OunknownO Found another example Link to comment Share on other sites More sharing options...
GreenSock Posted July 12, 2022 Share Posted July 12, 2022 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 More sharing options...
OunknownO Posted July 12, 2022 Author Share Posted July 12, 2022 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 More sharing options...
GreenSock Posted July 13, 2022 Share Posted July 13, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now