Mamorukun Posted September 20, 2021 Share Posted September 20, 2021 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 Link to comment Share on other sites More sharing options...
Cassie Posted September 20, 2021 Share Posted September 20, 2021 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 Link to comment Share on other sites More sharing options...
Mamorukun Posted September 20, 2021 Author Share Posted September 20, 2021 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 ! 1 Link to comment Share on other sites More sharing options...
Solution Cassie Posted September 20, 2021 Solution Share Posted September 20, 2021 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() }) 1 1 Link to comment Share on other sites More sharing options...
Mamorukun Posted September 20, 2021 Author Share Posted September 20, 2021 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. 1 Link to comment Share on other sites More sharing options...
Cassie Posted September 20, 2021 Share Posted September 20, 2021 Hahaha, glad I could help pal! 🥳 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