kf420

I have a similar issue, except the animation inside async is followed by other animations without async, and it throws off my scrollTriggers. Here's a simplified example - https://codepen.io/kf420/pen/poVEjBN?editors=0010 - once the second section (with async) is unpinned, third section jumps up and overlaps it. In production, the code for each section comes from a separate JS file (WordPress block) and I won't be able to consolidate them all inside the async function. Is there another way to update all following scrollTriggers?

Is it possible to pin a section within horizontally scrolling container? I know I can "fake" it with a timeline, but was wondering if there is a more automated way.

Looking for guidance on how to add previous/next navigation to a horizontally scrolling container, like the one in the attached Codepen. I found several examples with multiple links - one for each section within container, but I am looking specifically for previous/next only. In other words, some way to determine which section is in view (with snap enabled), and ability to navigate to next or previous if available, or disabling the button if not.

I have an SVG timeline of sorts consisting of polyline and polygons indicating dates, and would like to animate each polygon into view as it enters the screen. Seems like a no-brainer with scrollTrigger, however it appears that start and end positions for each polygon are calculated incorrectly (as indicated by misaligned markers in CodePen), I'm assuming because the group containing polygons is already being animated in a separate tween with "scrub" setting set to true. Is there any way to get an accurate position of each polygon in this scenario, or do I need to set it up differently?

Any reason why keyboard navigation no longer works on your version?

Thanks, that makes sense. Choosing width/height was intentional because border width must remain the same. Is that possible with scaling? What is the difference between range.myDraggable[0] (line 41 in your code) and what I used - draggable[0]? Also, is there any downside to using pseudo-elements for track and thumb backgrounds? And if not, what would that selector look like inside of .each()? I couldn't figure out how to use variables with CSSRulePlugin.getRule(".range__thumb:before").

I'm trying to create a range input replacement using GSAP Draggable, and can't figure out how to make it responsive. Specifically, how to recalculate X position of draggable relative to new container width. Eventually this will be used in a calculator, so I'd like to avoid resetting draggable and keep whatever values user has entered prior to page resize. Any guidance will be greatly appreciated.

Thank you so much!

I'm trying to change sticky header color based on whether it's over light section or dark. It seems to be working on down scroll and when scrolling up and down over individual sections, but once the page is scrolled all the way to the bottom the header doesn't animate when scrolling back up. What am I doing wrong?