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