scottib

ScrollTrigger.refresh() is what I was looking for. You've also given me some good ideas on the pin. Thank you very much!

I have a text animation that you can see(the pen at the bottom), which sometimes fails and I think it's the image above that causes this. This makes sense because once it loads, everything gets quickly shoved down. I made another version (the one with the red border) where this image has a fixed height and it seems to solve the problem. https://codepen.io/philabama/pen/vYXbOzw What's the best approach to deal with this? The fixed height feels like a real hack. Maybe load the scrollTrigger bit after the image loads. Thought about a "loading" screen too. Another question: I might like to pin this middle section with the animation while the animation plays but can't seem to wrap my head around that combined with the animation itself. Thanks in advance. This forum and its people are the best.

Thank you so much for the timely response. This should definitely get me started. Thanks again!

So I'm trying to create a slow automatic horizontal scrolling div combined with ScrollTrigger for when the user interacts with scroll. As you can see, for simplicity, I took a very simple existing demo and modified it. The problem is pretty obvious. When the user interacts, it jumps all over the place because the automatic and scroll trigger are unaware of each others current points. Ideally, I'd like it to slow scroll and then when the user scrolls, it can stop the auto scroll altogether but without the jump would be nice. Thanks in advance to anyone who might point me in the right direction.