Jump to content

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


  • Content Count

  • Joined

  • Last visited

Everything posted by classikd

  1. Oh ok I understand now, thanks a lot for your help ! I think I am going to try GSAP version 3 ??
  2. Thank you Zach. I though the arguments didn't exist because i have tested the first, and its value were always 0. Is that normal ? https://codepen.io/classikd/pen/dyPMNPb Not the case with gsap 3 apparently
  3. Hello, I am trying to scale list elements depending on their data-attribute, here is what i have : <ul> <li data-percent="50">1</li> <li data-percent="75">2</li> <li data-percent="15">3</li> </ul> let tl = new TimelineMax() tl .staggerFromTo('[data-percent]', 0.25, { scaleX: 0 }, { scaleX: function(){ // i would like to return a dynamic value return 0.5 }}, 0.1); Is there a way to get the data attribute of the current element ? I can't find a solution. Thank you
  4. Thanks a lot Jack you helped me so much. I heard you and I gave up the others methods that i tried above, you made me understand and so I made it with a different approach: Here is a codepen: https://codepen.io/classikd/pen/LqdQWb I could have spent days on it, you saved my life ! Thanks again !!!
  5. Thank you for your answer Jack ! Yes I use top and left percentage values for responsiveness. As i am bad at mathematics I am not able to try your second method, but i tried the first one. Here is a codepen: https://codepen.io/classikd/pen/JxLWej You can see in the console that I give a good progress value for each timeline, but unfortunately they are not equidistant :X How to explain that ? I put linear easing everywhere... i really don't understand
  6. Hello, I would like to make a half circle navigation, for that i made each nav item following a bezier curve, check its left position in the onUpdate callback, and stop it if its limit was reached. My problem is that the items do not stop exactly where they should stop. You can see the console.logs i put for the 3rd item to understand. (also look the css inline, this element should stop exactly at left:50%) Here is the codepen : https://codepen.io/classikd/pen/Zwrrzg I wouldn't have this problem if there were more "OnUpdate" executions, but I think I am goin
  7. Yes it does help me a lot ! And you're right i think i'm going to use a function calling itself when completed instead of using the repeat attribute. Because i encountered another problem, the timelines added after the infinite animation timeline are never played I saw on an other post that using the callback method would solve this problem so i'm going to try that. Thank you PointC.
  8. Thanks for your help PointC. That's definitly better than what i've done. But the problem is that tl.duration() returns a number like 1000000000000 if i set the timeline to repeat:-1. Do you think there is a way to make it working with infinite animation ? http://codepen.io/classikd/pen/BWvKye
  9. Unfortunaly that's not working when i do: tlMain .add(getTl().progress(0.5).play());
  10. I have succeeded in adding a label at half time of my staggerTo animation. In my opinion it's a little bit tricky but i can' t find a better solution. http://codepen.io/classikd/pen/gmZpNp
  11. Hmm. Is it possible to add labels between staggerTo animation steps ? Within a callback ?
  12. Hello, In my master timeline i would like to play child timelines not from the beginning, from the half for instance. I've succeded in using the tweenFromTo() function. But the problem is that i have to set the 2 values in seconds, and let's imagine if later i change the duration values in my timelines i will have to make a calculation again to find the 2 values and then change them. Not a convenient method. Do you know if a better solution exists ? Thanks a lot.
  13. I looked at this codepen and there is no longer flickering for me (FF, Chrome, Opera). I think you believe the flickering problems remain because of the ease you use, try using a linear one.
  14. Hello, Those flickering problems can usually be solved by doing a GPU render using 3d properties on elements (translateZ(0), perspective...). I have added this CSS code and now it looks pretty fine: #banner , #banner *{ backface-visibility: hidden; /* Chrome */ filter: grayscale(0%); /* FF */ } In your case i had to add a filter property for Firefox, i don't know why. Maybe the blur filter you use is the cause of the problem. Of course this is not a good method to use the universal selector, this code is just a test I've done fastly. Moreover maybe you could use the GSAP force3D
  15. Hello I think you should use yoyo and repeat properties : http://codepen.io/classikd/pen/oBVrPe
  16. I think my skill level is too low to investigate with you but i follow the discussion with attention In any case at the moment i leave aside those kind of animation.
  17. Thanks a lot for your helpful advices Jonathan. I recognize that i develop in Chrome by simplicity, it's a little bit faster and i like that each page runs its own process. But is it really worth it... I used to use Firefox many years ago but i gave it up following the "script not responding" errors i had which made me crazy ! Developing in Firefox would have saved my time in this case and it would drive me in the good direction to follow spec, so i'm seriously going to think about it.
  18. PointC, i'd like to animate the shapes within the SVG, not the SVG itself. Well anyways I'll give up 3d animations on SVG shapes, i must read about the browser support i'm not really aware. Indeed I understand your choice not to support browsers deviations you're totally right. I'm a little bit sad but i will find another way to do what i want. Thanks all three for your explainations.
  19. Hello, I'm trying to make rotationX/rotationY transforms on SVG shapes with the last version, GSAP 1.19.1, but it does not work. This is working only with rotation or rotationZ properties. Here you can see that nothing happens on mouseover event: http://codepen.io/classikd/pen/rjPxKr But if i am using GSAP 1.19.0 or lower version everything is working well : http://codepen.io/classikd/pen/NdorKo Is there a bug or do some properties have changed, i have found nothing about it ? Thanks for your help.
  20. That's working perfectly now thanks a lot Carl. I have to go deeper in learning TweenMax, with the experience i have now i think i would never have find this method to solve my problem. I have nested the timeline in another because i tought it was the good way to do, but maybe it's not ? It looks well organized, easily readable... as I will have many others timelines following the closing navigation animation. But i'm pretty new in animation with this tool and maybe you have a better way to teach me Thanks for your help.
  21. Hello, I'm sorry I can't explain very well my issue because I don't know why this behavior happens. In my exemple I would like to understand why as soon as i click a navigation link (home or contact), i get my navigation animations disappear (try opening the navigation again, you'll see the navigation appears without animation) Do yo have any idea ? Thanks a lot.
  22. Hahaha PointC, you're totaly right. I spent many hours trying to understand why i can't achieve what i want and i have a kind of headache now. Following the advice of Jonathan I succeeded in doing staggerTo() on pseudo elements but i had to add ID attributes and changing the selector to target all pseudo elements, not very pratical: http://codepen.io/classikd/pen/VPrbRx It looks like CSS specificity priorities or something like that, but i don't want to understand anymore !! I'm going to do simpler, adding DOM elements will be a better solution indeed. I really want to thank you all
  23. Hello, You're right my example is not good and in this case i should use to() instead. I was trying to show you my problem but forget it Look, in your example if i change the selector to ".box:after" this is no longer working: http://codepen.io/classikd/pen/ygPVgm And in this example too, the staggerTo() on :before elements does not work even if i target all :before elements: http://codepen.io/classikd/pen/egeBWN I really don't understand why :S Do you see what i am doing wrong ? I think it's not a problem for me that :before and :after elements are not in the DOM beca
  24. Hello, Is there a way to do staggerFrom/To animations on pseudo elements ? Thank you