en 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 eo eo en en en en en en en en en en en en fa en en en en en en fi hbs_lat en en en en en en en en en de es en en en en de en en en en de 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 ms af nb en ms af en en en en en en en ms af nb en ms af en en en en en en en ms af nb en ms af en en en en en en en en ru en en en en en en ru en en eo en pl en es en fr en nl en fr en en en en en en en hu 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
Yeah, you're right, this more of an issue to resolve with CSS as it is something specific to ScrollTrigger, and absolute seems the way to go. Thanks a lot for the help!
Jaron posted a topic in GSAP
Is there a way to know which direction 'clockwise' or 'anti-clockwise' a rotation is going when using the '_short' option ?
Jaron replied to Jaron's topic in GSAP
Is there a way to know which direction 'clockwise' or 'anti-clockwise' a rotation is going when using the '_short' option ?
Jaron posted a topic in GSAP
I'm currently setting a rotation value on an element and using the "_short" option - so it'll choose the shortest way to rotate to object . I need to alter some animations based on whether it decided to go clockwise or anti-clockwise but struggling to find the best way of finding this out. Any pointers appeciated?
Timeline onStart appears to be firing twice.
Jaron replied to Jaron's topic in GSAP
So I've been looking into this a little more, and I can't appear to get it to error on CodePen, however what is interesting, is that copying that exact code into my site, with all other JS modules I'm aware of commented out / disabled, still appears to cause the issue. It's clearly something within our site that's potentially getting in the way, but given I've removed all other JS modules I'm not sure what at this point. Another strange finding, is that when not paused() by default, it works fine. But having it paused() and then initiating it on click(), is when the error seems to occur. I'm going to keep digging, but does any of that give you any more ideas? I appreciate it's a tough one given the context! Thanks.
Timeline onStart appears to be firing twice.
Jaron replied to Jaron's topic in GSAP
Hi both, Firstly, thanks for the reply and help, it is very much appreciated. I'll be sure to take a look at the side notes too. In the CodePen itself I have not been able to reproduce thus far, but the code is very similar to what we have in real terms. I know it's not ideal though, not being able to reproduce the bug I'm asking about. Even on my local instance, where I can reproduce the bug, it's not consistent. 90% of the time, it's fine, but then on the rare occasion the toggle function will run twice, and I'm not sure why (I only know it runs twice due to it outputting two console.log() statements) It does seem to happen across Chrome, but when testing in IE11, I seem to be able to replicate the bug more often than in any other browser, which is equally baffling, but then, it is IE. Also, we do have quite a lot of other GSAP bits and pieces going off on the site, so your guess about something else potentially getting in the way might not be a bad one. I've just removed all other JS though and the issue still persists... The weird thing is, is that when I removed all other JS modules from the site, and all other non-related JS, the issue happens consistently and I can reproduce it... I will see if I can update the CodePen to at least try and get something you can reproduce, and I'll comment back here once done 🤞 Thanks again, I really appreciate the help.
Timeline onStart appears to be firing twice.
Jaron posted a topic in GSAP
I was hoping somebody might be able to help with a little GSAP issue I'm having 🤞 Essentially, on our site we have a 'Menu and Search' button, that when clicked, will animate in the various parts of the full-screen, takeover menu. As well as this, we also have a separate function which deals with toggling a few classes, etc. This function has been assigned to the onStart callback, and also the onReverseCompleted callback, however it appears that on rare occasions (and I can't seem to create a consistent test case for this) that the onStart is running twice, and therefore breaks our animation. Does anybody have any ideas as to why this may be? I've mocked up a sample CodePen with a general gist of our code, except in a more simple context. Any help would be much appreciated. Thanks!
help Tweaking GSAP values for mobile - reverse() works unexpectedly
Jaron replied to Jaron's topic in GSAP
Hi Zach, Thanks, and thank you very much for the reply. That makes sense. It's always better to know why something is working so appreciate the help in understanding it. Have a good weekend and thanks again for the help.
help Tweaking GSAP values for mobile - reverse() works unexpectedly
Jaron posted a topic in GSAP
So, in the Codepen we have a fairly simple animation. On click of the button, we animate the   and   elements in, and click it again, we animate them out. It's a toggle button. However, on mobile, we don't want to run the animation but instead want things to appear instantly. We have achieved this using calls to progress(0) or progress(1), however, we've noticed that if you first toggle the animation on desktop, and then go to mobile, and toggle it again, that without the calls to tl.reversed(false) or tl.reversed(true), the animation still tries to animate and doesn't work correctly. Does anybody have any ideas why adding those lines would make it work as I would expect it? What am I missing? To reproduce: On desktop, or anything matching the media query in the Pen (1000px), click the 'Play animation' button, then click it again to hide the animation. Reduce your screen size down to trigger the mobile code, and again, toggle the 'Play animation' button. Note: the code in the Codepen works, you'll need to remove calls to tl.reversed() on lines 18 and 21 to see the issue. Any help would be much appreciated!
“I'm always left with my mind blown by the way in which you guys quickly identify the solution and provide answers.”
“Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used.”
“Truly, you folks on this forum are the nicest, least judgmental, helpful people I've ever encountered.”
“GSAP has been absolutely the best experience for me as a newbie. The people in this community take serious time to help you with upcoming issues on real life projects like I've never experienced before.”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“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!”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“It's so correct that GSAP's logo is a superhero. Every time I use GSAP it saves me heaps of time and frustration. Thank god for GSAP honestly.”
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.