en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en es es en en de en en en en en en en en en fa en en en en en en fi hbs_lat en en en en en en en en en de es en en en en en en en en en en fr en en en en en en fr en en en en en fr en en en en en sv en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en es en en en fr en en en de en de en pt en de en hu en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
Still problems with GSDevTools managing an animation inside an iframe
Mamorukun replied to Mamorukun's topic in GSAP
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 !
Mamorukun posted a topic in GSAP
Superpose two timelines with different durations
Mamorukun replied to Mamorukun's topic in GSAP
What is clear is that, now, I definitively LOVE gsap ❤️ Thank you Jack, that'll clearly make the logic simpler to code, AND the given code simpler to comprehend by my colleagues
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" 😅)?
Mamorukun posted a topic in GSAP
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 ^^
Mouseenter/mouseleave with different timelines
Mamorukun replied to Mamorukun's topic in GSAP
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 😊
Mouseenter/mouseleave with different timelines
Mamorukun replied to Mamorukun's topic in GSAP
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).
Mouseenter/mouseleave with different timelines
Mamorukun posted a topic in GSAP
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.
Killed GSDevTools forgets to clean its event listeners?
Mamorukun replied to Mamorukun's topic in GSAP
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.
Killed GSDevTools forgets to clean its event listeners?
Mamorukun replied to Mamorukun's topic in GSAP
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.
Killed GSDevTools forgets to clean its event listeners?
Mamorukun posted a topic in GSAP
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.
Force GSDevTools to start at a given timeline time
Mamorukun replied to Mamorukun's topic in GSAP
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 ^^
Force GSDevTools to start at a given timeline time
Mamorukun posted a topic in GSAP
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 ?
Unable to make GSDevTools work on an iframe
Mamorukun replied to Mamorukun's topic in GSAP
Here it is, and so far it is working perfectly well
Unable to make GSDevTools work on an iframe
Mamorukun replied to Mamorukun's topic in GSAP
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
Unable to make GSDevTools work on an iframe
Mamorukun replied to Mamorukun's topic in GSAP
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 developed 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 ^^'
Unable to make GSDevTools work on an iframe
Mamorukun replied to Mamorukun's topic in GSAP
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 ^^' )
Unable to make GSDevTools work on an iframe
Mamorukun replied to Mamorukun's topic in GSAP
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?
Unable to make GSDevTools work on an iframe
Mamorukun posted a topic in GSAP
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:           text    gsap.to('# test ', { color: "red", duration: 2});     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 ( ); 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 ^^'
“It's crazy awesome. The whole GSAP platform is, far and away, the best out there for dealing with animation of any sort.”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“@greensock it’s a great library that many people love, and I know you care deeply about performance :)”
“I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine.”
“I just tried to animate some objects using vanilla js but it was really laggy- switched to GSAP and now it’s smooth af”
“I can definitely say ever since I started using GSAP, my work exponentially improved. It basically changed my life.”
“It's so correct that GSAP's logo is a superhero. Every time I use GSAP it saves me heaps of time and frustration. Thank god for GSAP honestly.”
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.