Still problems with GSDevTools managing an animation inside an iframe

[Mamorukun]

Hi everyone. I have an animation in a simple html working perfectly (three linear color changes of a div, each of a duration of 4 seconds for a total of 12 seconds). In another hand, I have a controling program which load that html into an iframe, and link the animation to GSDevTools. And I have a really hard time to understand why it is working or why it is not. Here is what I tried so far :

 

let iframeTimeline = document.querySelector('#animationHTML').contentWindow.myTimeLine;
GSDevTools.create({ animation: iframeTimeline, globalSync: false });

 

Doing so, I see the animation inside the iframe, but GSDevTools has absolutely no interraction with it, nor does he know its total duration.

 

let iframeTimeline = document.querySelector('#animationHTML').contentWindow.myTimeLine;
iframeTimeline.pause();
GSDevTools.create({ animation: iframeTimeline, globalSync: false });

 

Now, the iframe animation is paused, so at least, in JS, I can interract with it through the iframe. Now, I've read somewhere that, to permit to GSDevTools to manage an animation inside an iframe, one should create a hook timeline like this:

 

let iframeTimeline = document.querySelector('#animationHTML').contentWindow.myTimeLine;
iframeTimeline.pause();
let iframeTimelineHook = gsap.timeline({ id: "Decli timeline" });
iframeTimelineHook.to(iframeTimeline, { duration: iframeTimeline.totalDuration() })
GSDevTools.create({ animation: iframeTimelineHook, globalSync: false });

 

Now, GSDevTools displays the correct total duration of the iframe animation (notice that I feed it with iframeTimelineHook now), but still cannot interract with it. I can move theGSDevTools animation cursor along the 12 seconds of animation, but the iframe animation is still paused. If I remove the "iframeTimeline.pause()" line, the iframe animations runs in parallel of the GSDevTools cursor, but the two are still not linked (if I pause the GSDevTools, the iframe animation continues). To physically make the two linked, I have to write this:

 

let iframeTimeline = document.querySelector('#animationHTML').contentWindow.myTimeLine;
iframeTimeline.pause();
let iframeTimelineHook = gsap.timeline({ id: "Decli timeline" });
iframeTimelineHook.to(iframeTimeline, { totalProgress: 1, duration: iframeTimeline.totalDuration() })
GSDevTools.create({ animation: iframeTimelineHook, globalSync: false });

 

That "totalProgress: 1" is magic. I really don't know what it does internally, but now when I stop/pause GSDevTools, the iframe starts/pauses ! I would be happy with this, but...

But now, the animation is a little faster than what it should be. It longs the same time (12 seconds), but in place of making the color changes run 3 x 4 seconds, it's 2.20s for the first one, 2.47s for the second one, and 6.53s for the last one. And I have absolutely no clue on why ! Anyone has an idea please, even small one ? Unfortunately, I cannot reproduce it on codepen as I down't know how to include GSDevTools inside it

 

 

 

[Cassie]

Hey Stephane,

I tried looking this up in the forums because I've never dealt with the dev tools inside an iframe before.

I found this example from Blake (in a thread you were in) suggesting a different approach. I assume you've seen this as you were in the thread but linking just in case it helps.

https://codesandbox.io/s/epic-fermi-fkwvg?file=/index.html
 

 

[Mamorukun]

Ho mine, no, I missed it O_O I'll have a look at it right now and come back here with feed back asap, thank you very much Cassie !

[Cassie]

In terms of the duration part - I'm just guessing here - but this sounds like easing.

GSAP uses a default ease of  power1.out so as it's tweening the progress of this timeline, the initial child tweens would be faster and the final ones would be slower.

Try adding ease:'none' to this line.

 

iframeTimelineHook.to(iframeTimeline, { totalProgress: 1, ease: 'none', duration: iframeTimeline.totalDuration() })

 

[Mamorukun]

Ho mine ho mine ho mine ! Cassie, you're just a genius, it works !!! I would have NEVER thought of a default ease which wouldn't be linear ! O_O Setting it to 'none' solved ALL my strange problems. I've spend four hours this morning in this already, and you solved it with a single guess ^^'

 

And regarding the code of Blake, it works, indeed... as long as the GSDevTools is INSIDE the iframe. At my side, I need it OUTSIDE the iframe.

[Cassie]

Hahaha, glad I could help pal! 🥳