DoneBySimon

Oh, thanks for the input. I did some tweaks on the duration & stagger properties, but never took your approach, nice! I've managed to create the opposite animation by just doing... the opposite https://codepen.io/simonvanherweghe/pen/PoGzYmZ?editors=1010 beauty in simplicity

Tanks for the welcome, amazing library (and community, and support!) I mistakenly assumed that GSAP did a toArray under the hood with a selector like that. I see the difference, thanks. I have some follow-up questions, but to keep things on topic, I've posted them in an other thread

Thank you all for the examples in this thread, very educational I also want to animate child-elements (I initially went with a second scrollTrigger and start & end functions... I took a wrong turn there ) Thanks to this post I went the duration & stagger way, that seems a lot simpler, but I can't get it as tight as I want. I've made a codepen example to illustrate what I mean: https://codepen.io/simonvanherweghe/pen/poEgjwz?editors=1010 What I would like to improve: Watch the black boxes, I would keep them in sync with the snap from the scrollTrigger. Take B for example, that from-animation is already done 'long' before the yellow card has reached the beginning of the screen. When you look at the last one, E, that animation perfectly stops when that red card snaps in place. My train of thoughts is as follow: 5 cards, so a duration of 5 (since we're using scrollTrigger, duration is all relative, right?) When every animation takes exactly 1 and they are all distributed 1 apart from each other, things should be ok. But it isn't, why? Is it the scrub:1 delay? The first one should be already into place, hence the from:1. But that isn't quite the solution. Should I adjust the selector or is there an other way? I want the opposite animation (black box slides in from the left) when we scroll back. This example suggests the use of functions, although I'm not afraid of that, but euhm, is there any other way?

According to the docs (parameters -> targets) it should be possible to target an object for a gsap.to() via a querySelector or via a reference to an element. I'm experiencing different outcomes though. As you can see in the codepen the horizontal scroll behaves differently by using the ".card" syntax (seems ok) than with the cards.forEach(card =>... method (definitely not ok) What's happening? Am I missing something here?