Jaron

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!

Link for code: https://codesandbox.io/s/globe-static-0m8517?file=/index.html Link to sandbox viewing area: https://0m8517.csb.app/ Hi there, I hope everyone is well. I was wondering if somebody may be able to point me in the right direction for an effect I'm trying to achieve. Essentially, on the link above (best if opened in full-screen mode), you can see a globe, and then some text beneath it. What I want to achieve is for the text below to change as the user scrolls, but for the globe to stay pinned / fixed. I have achieved this somewhat in the above, but when the height of the content changes, the effect is quite jarring. Does anybody have any ideas of how I can get around this, so that when the text content beneath changes in height, the globe doesn't jump up and down? Furthermore, and this may not be possible, but is there a way to still have items pinned if the content overflows the height of the screen? I don't necessarily know how high the content may be in this example, but if it is longer, it overflows the screen -- and because we're pinning the items, you can't scroll to see it... Any help would be greatly appreciated!

Thanks Cassie for your CodePen. Its much appreciated. I actually learnt a new thing from your code regarding the 'getProperty' mothod. For reference this is what i had (specific to the question). function bearingDirection(currentBearing, targetBearing) { // Anything negative is anticlockwise, positive is clockwise // see https://math.stackexchange.com/questions/110080/shortest-way-to-achieve-target-angle return ((targetBearing - currentBearing + 540) % 360) - 180; } let currentBearing = gsap.getProperty(".circle-bg-svg", "rotation"); // get current rotation of .circle-bg-svg let targetBearing = 250; // Set new rotation (e.g 250) if (this.bearingDirection(currentBearing, targetBearing) > 0) { console.log("Clockwise"); } else { console.log("Anti-clockwise"); }

Think i figured it out with the help from https://math.stackexchange.com/questions/110080/shortest-way-to-achieve-target-angle

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?

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.

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.

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!

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.

So, in the Codepen we have a fairly simple animation. On click of the button, we animate the <header> and <nav> 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!