Jump to content


  • Posts

  • Joined

  • Last visited

Demky's Achievements



  1. thank you for all the infos, I will read it ? I tried a lot of google search and never found information about this problem when I tried to fix it ?
  2. wow thank you, I tried to fix it for so many hours ? I will keep the GSAP solution since I already had the CDN on my webpage. ? I don't like to remove backface-visibility: hidden; Maybe I don't understand the definition but it look like it perfectly fit in this situation the translateZ(1px) is so clever ?
  3. Ok so it works perfectly with GSAP. (now i just need to customise the animation) I bet I will never know why the CSS isn't working. ?
  4. Hello, I have a problem not related to GSAP, I don't find any solution, I asked on 3 forums (+stackoverflow) and didn't find any answer. I already used GSAP on my webpage for a small animation and I was wondering if it could help me with this problem or if it would be overkill to use GSAP (performance/ressources). I tried to document my problem on stackoverflow (if someone want to read more details) : https://stackoverflow.com/questions/57784926/why-using-opacity-or-an-absolute-position-ruin-my-transform-rotatey180deg I made a card that can rotate on Y when it's mouse hovered (everything with CSS). the problem is that when I use css to change the opacity (svg flag) or the position of an element (text in my situation) on the back of the card, the rotate animation is buggy and got a delay of +/-1sec to display the back of the card. /!\ the bug occur only once, the first time the rotateY is used; to do it again, you need to reload the page (F5). The bug only apear in Chrome (work perfectly on firefox). If I use GSAP to do the rotation instead of css, should it fix the problem or is the problem from chrome and would still be here with GSAP ? (what would be more logic using GSAP for the rotation on Y or for opacity/text position?) I made a codepen with the problem : https://codepen.io/Demky/pen/pozWZKM -> if you remove the css classes .bottom-right and .changeOpacity there is no more delay. As I said on stackoverflow, if you use the template from w3school and just add an opacity to an element from the back of their card (exemple .flip-card-back), it does the same delay problem so I don't think the error is from my code : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card What would you do in my situation ? I can't believe it's impossible to customise the back of a card that rotate ? I don't really know if I can post my question here but I don't know where to search a solution Let me know if something isn't clear. ---------------------- Edit : looking to test it with gsap to see if it work; found this thread, will try it soon ;
  5. 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
  6. 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; } });
  7. 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.
  8. 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; }
  9. 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
  10. 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
  11. 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.