Jump to content
GreenSock

Mamorukun

Unable to make GSDevTools work on an iframe

By Mamorukun, in GSAP. Views: 607

Moderator Tag
Go to solution Solved by Mamorukun,

Recommended Posts

Posted

Nice to meet you everyone,

 

I spent half a day trying to make GSDevTools manage an simple animation of an extern HTML file displayed in a React iframe. Here is what it looks like:

 

Extern test.html file: 

<head>
      <script type="text/javascript" src="gsap.min.js"></script>
</head>
<body>
      <p id=”test”>text</p>
      <script type=”text/javascript”>
            gsap.to('# test ', { color: "red", duration: 2});
      </script>
</body>

The test text becomes red when I display the HTML in the browser AND in my React iframe, so gsap by itself is working fine.

In react, that is my code to display that external html file: 

import { gsap } from 'gsap'
import GSDevTools from 'gsap/GSDevTools';
gsap.registerPlugin(GSDevTools);

…

useEffect(() => {
      GSDevTools.create(???);
}, []);
return (<iframe id="renderFrame" […] url="test.html" />);

So, here too I can see the text becoming red in the iframe, but I just don’t have a clue how to link that external html animation to my React GSDevTool (thus, the three ???). I thought I succeeded by passing the iframe "renderFrame.contentWindow.TimelineMax” as the “animation” option of GSDevTools.create, but if gave me strange results (longer timeline, with a GSDevTools time scroller going back and forth, and no back interaction between that scroller and the animation).

 

Anyone could please explain me (or at least, point me to a tutorial somewhere) how I could achieve that please ?

 

Thank you VERY much in advance :)

 

EDIT : I succeeded to have my GSDevTools somehow fellow the iframe animation by using this code: 

var frameTl = document.querySelector('#renderFrame').contentWindow.TimelineLite;
var timeline = gsap.timeline({ id: "frameAnim" });
timeline.to(frameTl, { duration: frameTl.length });
GSDevTools.create({ animation: timeline, globalSync: false });

But still, the scroller has no effect on the iframe anitation (with no surprise, as I create a new animation to feed GSDevTools) :( In other words, I'm still lost ^^'

Link to comment
Share on other sites
Posted

If you're trying to use an iframe, it would be best to put your scripts inside the iframe, but maybe I don't understand what you goal is here.

 

For iframe communication, the best way to do that is by firing custom events. That's what I'm doing here control the progress and restart event.

See the Pen WNwGYJP by osublake (@osublake) on CodePen

 

Link to comment
Share on other sites
  • Author
Posted

Thank you for your answer OSUblake, and sorry if I was unclear. To make it simple : I have coworkers who create html files with gsap anims inside and sent those files for review. I created a React program which lets me display those files in an iframe and centralise other data . I juste wanted to add the GSDevTools in that React program so I can go back in animations, in place of refreshing the page each time I want to see the animation again.

 

To sumarize: I have a GSDevTools in React which has to take care of a timeline which is present in a windowContent of an iframe. Is it clearer like this?

Link to comment
Share on other sites
Posted

Sounds just like what my demo does. 

 

The animations in the iframe would probably need to be added to the window.

  

// iframe
window.myAnimation = gsap.timeline()...

 

Then you can access that like this. 

iframe.contentWindow.myAnimation

 

  • Like 1
Link to comment
Share on other sites
  • Author
Posted

Perfect, thank you very much. That is indeed working better now. I have access to the test.html timeline, and succeeded to feed my GSDevTools with its data: 

let activeDecliIFrame = document.querySelector('#activeDecli');
var frameTimeline = activeDecliIFrame.contentWindow.childTL;
var timeline = gsap.timeline({ id: frameTimeline.vars.id });
timeline.to(frameTimeline, { duration: frameTimeline.totalDuration() });
GSDevTools.create({ animation: timeline, globalSync: false });

The only problem left, as I wrote earlier, is that whatever I do with the GSDevTools won't impact the iframe content animation. As if the GSDevTools was not "physically linked" with that animation. Anything in my code above which would explain that behavious? If not, I'll do my best to understand your code (I'm quite new in the JS world ^^' )

Link to comment
Share on other sites
  • Author
Posted

OK, I see what you do with your code: you "ask" the iframe content to do the job itself. At my side, I know that it is possible for GSDevTools to directly control the iframe content without adding event listeners in the said content, because before my React program I was using a similar php program developped but a previous employee that did the job as I try to do it now (thus, whitout the need to add anything in the test.html file). I just need to understand how... and believe me, you'd not want to try to understand that old php code ^^'

Link to comment
Share on other sites
  • Solution
  • Author
  • Solution
Posted

Aaaaand I have it working ! I used a code found in another post: 

let activeDecliIFrame = document.querySelector('#activeDecli');
var timeline = gsap.timeline({ id: "masterTimeline" });
var tl1 = gsap.timeline({ id: "timeline1" });
var contentWindow = activeDecliIFrame.contentWindow;
var tl = contentWindow.childTL;
tl.pause(0);
tl1.to(tl, { totalProgress: 1, duration: tl.totalDuration() })
timeline.add(tl1);
GSDevTools.create({ container: '#GSDevToolsContainer', animation: timeline, globalSync: false });

I don't have a clue (yet) on why this code works and mine not, but god I am happy (I spent more than six hours on this one !). Thank you for your help anyway, it helped me understand a little better what's going on :)

Link to comment
Share on other sites
  • Author
Posted

Here it is, and so far it is working perfectly well :)

 

  • Like 2
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account