es en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en mr mr en en de en en en en en en en en en en en en en en en it en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en nb en nb en nb en en en en en en en nb en nb en nb en en en en en en en nb en nb en nb en en en en en en en nb en nb en nb en en en en en en en nb en nb en nb en en en en en en en nb en nb en nb en en en en en en en en en nb en en en en en en en en en sv en en nb en en en en en en en en en de en en nb en en en en en en mr en en en en en de en fr en pt en it en de en es en it en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
Staggering elements depending on their data attribute
classikd posted a topic in GSAP
Use css position in onUpdate callback
classikd replied to classikd's topic in GSAP
classikd posted a topic in GSAP
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.
Start nested timeline not from beginning
classikd replied to classikd's topic in GSAP
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.
Start nested timeline not from beginning
classikd replied to classikd's topic in GSAP
Thanks for your help PointC. That's definitely 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
Start nested timeline not from beginning
classikd replied to classikd's topic in GSAP
Unfortunaly that's not working when i do: tlMain .add(getTl().progress(0.5).play());
Start nested timeline not from beginning
classikd replied to classikd's topic in GSAP
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
Start nested timeline not from beginning
classikd replied to classikd's topic in GSAP
Hmm. Is it possible to add labels between staggerTo animation steps ? Within a callback ?
Start nested timeline not from beginning
classikd posted a topic in GSAP
Hello, In my master timeline i would like to play child timelines not from the beginning, from the half for instance. I've succeeded 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.
Micro jumps (antialiasing) at the end of tweens
classikd replied to danissimo's topic in GSAP
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.
Micro jumps (antialiasing) at the end of tweens
classikd replied to danissimo's topic in GSAP
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
TimeLine Reverse & repeat
classikd replied to chilledmonkeybrain's topic in GSAP
Hello I think you should use yoyo and repeat properties : http://codepen.io/classikd/pen/oBVrPe
“GSAP is awesome - I just dropped all my [custom] code, like a thousand lines of code and everything is so so much simpler, smoother and much easier to read for other developers! You have no idea how cool it is to offload that thought process to you guys!”
“If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with.”
“@greensock it’s a great library that many people love, and I know you care deeply about performance :)”
“Truly, you folks on this forum are the nicest, least judgmental, helpful people I've ever encountered.”
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“The best thing about GSAP is that it just works, and it works well. On every single browser I’ve tested.”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
“It's shocking the @w3c didn't use @greensock as a model of how to do animation via code. Did they even ask animators what they use?”
“+1 to GreenSock. It’s just one of the deepest and most reliable javascript libraries I’ve ever used”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.