Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

2 Newbie

About Demky

  • Rank
  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
  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);
  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 rea
  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
  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("#whiteCu