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.

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 !

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

What is clear is that, now, I definitively LOVE gsap ❤️ Thank you Jack, that'll clearly make the logic simplier to code, AND the given code simplier to comprehend by my collegues

Yes, you perfectly got my problem ^^ Your case won't happen at my side, because tLB will ALWAYS be splitable in exactly two parts through the presence of a 'split' label (perhaps should I have specified that ealrier). In other words, as explained by the text of the labels of tlB in my codepen, there'll be always a "cut point" in tlB where I'll have to add a gap. So yes, indeed, it's not exactly "stretching" tlB (its tweens won't last longer), but rather making it longer with a programmaticaly specified gap so that, at the end, the two tl matches. With that complement of information, would you say that there is a proper way to do so, or do I have to add a "dummy" tween inside tlB at the split point as I was thinking in the first place ? NB : in case of the answer would be "insert dummy tween", I'd like to ask a bonus question if you don't mind: is there a function of a timeline which would let me know if yes or not it contains a given label (because yes, I didn't specified it yet, but user B has the opportunity to send me his timeline saying: "play everything at start of tlA, I didn't set a 'split' label in it" ?)?

Hi everyone ! as you can see in this simple codepen, let's say I have a user A who sends me his timeline (I don't know its content, just its TotalDuration), and a user B who sends me his own timeline. The problem is that user B would like his timeline to fit the user A timeline, with a part of his own timeline beginning at the start of user A timeline, and another part finishing exactly when user A timeline finishes. In other words, user B would like me to add a delay at a specific point of its timeline so that it will run exactly the same time than timeline A. Is there a simple way to do so ? To sumarize, so far, the only things I am sure t know are timeline A and timeline B durations, and the exact label of timeline B where I should add a delay to achieve the desired result. My first thought was to calculate timelines duration difference (let's say, n), and insert a "dummy" timeline.to("", { duration: n }) at the specified label of timeline B. But that sounds like a trick to me and I was wondering if there was a proper way to achieve the same result. Thank you very much in advance ^^

Aaaaaaaand that's the difference between a newbie like me and a mentor like you ? Thank you very much, I have already bookmarked that last codepen of yours ! EDIT: why a "spin.restart()" and not a "spin.play(0)" ? I am just a little confused to see a "restart" without a corresponding "start" somewhere ?

Thank you Cassie, I think that I will follow your advice and use only on single reversible TL. At the start, I wanted to forsee two different timelines, because I could imagine a given animation for the hover (ie. background colour change) and a different one for the blur (ie. button rotation).

Hello everyone, I want to link two different timelines to mouseenter/mouseleave events, so one can do what animations he wants when those events are fired. To test it, I created in the linked codepen a button which should hover to black background and blur to white. It's working fine... unless you start hovering/blurring faster that the tweens timers, resulting in strange colouring behaviours. Am I doing something wrong, or do I forget to initialize something? Thank you very much in advance.

1. I'm an employee of a Belgian company which is a Club GreenSock member (I'll be glad to communicate you by private message any information you'd need if you want to check), and that's also why I don't have the permission to show more of my code. 2. GSDevTools 3.7.1 3. I like the "previousGSDevTools && previousGSDevTools.kill();". I'm ashame to admit it, but I was not aware that such a writting works on JS. Unfortunately, I may not simplify my code the way you suggest because my globalTimeline is not a "global" JS item ("global" here stands for "globalizing all the sub timelines"). As soon as the GSDevTools is created, I loose the reference of that globalTimeline. That's why I have to retrieve it from GSDevTools when I have to recreate the tools on a new globalTimeline. Nevertheless, don't worry about this. As I wrote in my previous message, it's not a big deal at my side. Perhaps is it simply a side effect of using gsap inside React.

sensible code removed That's the only code I'm allowed to share. I breakpoint on previousGSDevTools.kill() to check the console each time I change the timeline to display (so when I need to kill GSDevToolsprevious instance), thereby my screenshot above.

Hi, after debugging my own even listeners cleanup using Chrome debug console, I noticed that GSDevTools, when killed, forget to clean its own event listeners. For example, in the image bellow I killed/recreated GSDevTools four times (to feed it with different timelines, as there is no functionality to do it without recreating the beast ^^). Are you aware of that? It's not a big deal for me right now though.

Aaaand that's working ! Thank you so much for the setTimeout hint Jack, I wouldn't have thought about it (taking into account that the dev tools UI appears IMMEDIATELY after the create() call). The user can still see a rapid "zero to x" on the timeline (because even with a .1 s of delay, React has the time to update the screen), but it's far better than restarting the animation from start ^^

Hello, in my React application, I have to kill/recreate my GSDevTools. Before killing it, I can retrieve its time position: let previousGSDevToolsTime = myGSDevTools.vars.animation._time; I can then set the inTime of the new created GSDevTools to that time: let newGSDevTools = GSDevTools.create({ ..., animation: myAnimation, inTime: previousGSDevToolsTime }; But I can't find a way to simply make it start at than position without moving the inTime scroller. This doesn't work: newGSDevTools.vars.animation._time = previousGSDevToolsTime; nor (called before OR after OR before and after the new GSDevTools.create()) myAnimation.time(previousGSDevToolsTime); If I don't force inTime scroller, the new GSDevTools instance restarts the animation from start. What am I doing wrong here ?

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

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

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

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 ^^' )

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?

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