dubfonik

Amazing, Sir Jack. That's exactly what I needed. I'm always amazed by the help & support given by you and your team in this forum.

I have a grid of images on a page that extends past the viewport height. When the user lands on the page, I'd like to randomly stagger (fade in) the images that are visible within the viewport (ie. "above the fold"). Once that stagger has finished, the rest should then be faded in so that when the user scrolls down they are all visible (without any fading). I assume I'd use ScrollTrigger for this, but unsure how best to do it. Would I need to use the standalone ScrollTrigger.create() method for this?

That makes perfect sense now! Thanks a lot @akapowl

If you click the trigger and let the animation play completely there is no problem. However, if you click it again before the animation ends the element gets "stuck" at the point it was retriggered from. This is even more apparent if you click the trigger multiple times fast What would be the best way to fix this?

Thanks @akapowl - this worked. I would never have been able to figure that out! Thanks for your help

Interesting... it seems to work perfectly fine for me on Chrome & Firefox The issue with that ScrollToPlugin method is it clashes with the scroll-behavior: smooth property, and I want to use it across all links on the website - not just ones I tag with a class.

Sorry, not sure why it's doing that. I've just tweaked the original pen to show it more clearly (it didn't translate well in the embed). Ok thank you, I'll give that a go.

I am animating the position of an element which I am also linking to with an anchor link. Since this element is triggered by scrolling to it and starts off the page, this results in a jumpy performance. I understand a workaround could be to create a static container which doesn't move and link to that, but that isn't ideal in my situation. I was wondering if it's possible to link to where the element would finish, instead.