Demky

thank you for the information (and the new option) it make sense. tl.reversed(!tl.reversed()) ?? i don't want to waste your time but how should one find this information(reversed:true)? I tried to find the solution and didnt find it ?; did you just knew it or did you read it somewhere ? reading https://greensock.com/docs/TimelineMax to see if I missed it

Hello, Any tips on why when I do use your lane, I need 2 clicks to launch the animation ? (look like the first click do a reverse (?) and then it launch with the second click (?) - once you clicked, you need to refresh the page to see the "bug" again) code pen : https://codepen.io/Demky/pen/aggyme it work fine with a flag but I thought your one-lane was cuter: let isJavaAnimDone = false; $('#javaSpell').on('click', function () { if (!isJavaAnimDone) { javaAnim.play(0); isJavaAnimDone = true; console.log("isJavaAnimDone +++ " + isJavaAnimDone); } else { javaAnim.reverse(); isJavaAnimDone = false; } });

you think too fast ?, I just edited my message with the boolean; edit : thanks for isActive(), I will read the page and think about your solution : tl.reversed() ? tl.play() : tl.reverse(); Edit2 : Wow, I was trying to transform my code to something like your lane with reverse() and bool? aaa : bbb ; I thought the 'reversed' was a typo but in fact that is the answer for doing it with only one lane of code : https://greensock.com/docs/TimelineMax/reversed Thanks.

thank you I will look it ? I'm trying to add a boolean to detect if the click need to launch the rotation or the .reverse() by changing the state of the bool inside the 'animation' I expected it to be like that but it would have been too easy ?: .to("#JavaSpell", 1, {rotation:360, ease:Linear.easeNone}, {"isJavaAnimDone":true}) thanks for your time I will continue ps : one question; why do you use var ? aren't we supposed to use let or const with the new JavaScript rules ? (at least they told us that in school) any particular reason ? edit: finaly I didnt need to change the boolean inside the GSAP animation, I added it inside the function : $('#JavaSpell').on('click', function(){ if (!isJavaAnimDone) { javaAnim.play(0); isJavaAnimDone = true; } else { javaAnim.reverse(); isJavaAnimDone = false; }

Oh thank you, I was looking your codepen, it look so complexe but it's so beautiful? I think I should keep reading the GSAP tutorial

thank you for both answer. I used it like that (before seeing PointC's interesting code): var javaAnim = new TimelineMax({paused: true}); javaAnim .to("#JavaSpell", 1, {rotation:360, ease:Linear.easeNone}) .to("#JavaSpell", 0.5, {rotation:1080, ease:Linear.easeNone}) .to("#JavaSpell", 1, {rotation:1800, ease:Elastic.easeOut}); $('#JavaSpell').on('click', function(){ javaAnim.play(0); }); I don't know if that's really what I had in head; I espected the end to be a bit more elastic but I love it ? I will continue to try to improve it. Do you know if there is a easy way to rewind something with GSAP or should I write the reverse code by hand ? I will search for the answer

Hello, i’m trying to learn how to use GSAP. I want to make a “washing machine” rotation effect : - On click object start rotating slowly for 2seconds - rotate at max speed for 2 seconds - rotate slowly 2 secondes till it’s stop (todo later : stop with ease:Elastic.easeOut effect) I thought I could write the 3 orders one after one but when I do so, GSAP only ‘do the first one’ (i didnt use any duration because i'm trying first to make the 3 speeds working) $('#whiteCube').on('click', function(){ TweenMax.to("#whiteCube", 2, {rotation:360}); TweenMax.to("#whiteCube", 2, {rotation:720}); TweenMax.to("#whiteCube", 2, {rotation:360}); }); I don't know if this question is related to GSAP but, any idea why only the first click is launching the function ? the other clics are detected but doesn't launch the rotation. any tips ? codepen.io/Demky/pen/pXBPGr thank you.