classikd
Members-
Posts
25 -
Joined
-
Last visited
About classikd
- Birthday 06/13/1985
Profile Information
-
Location
Montpellier, France
Recent Profile Visitors
1,478 profile views
classikd's Achievements
21
Reputation
1
Community Answers
-
Oh ok I understand now, thanks a lot for your help ! I think I am going to try GSAP version 3 ??
-
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
-
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
-
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 !!!
-
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
-
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 going in a bad direction.. I also tried to achieve that with time calculation instead, but as i want the item's easing not to be linear it was too difficult for me to find the exact moment they should stop ? Please how would you solve such a thing, do you have any solution ? Thank you a lot.
-
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.
-
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
-
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
-
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.
-
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.
-
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 property in your JavaScript code instead of CSS. https://codepen.io/classikd/pen/oBRKEo
-
Hello I think you should use yoyo and repeat properties : http://codepen.io/classikd/pen/oBVrPe