PhilippP

OK wow! Such a simple and elegant solution. And such a quick answer! Thanks a lot! This forum rocks... and GSAP too, of course!

Hi, I have two rows with divs with 50vh and 50vw. When you scroll down and they are both completely in view (row 1 "top top" and row 2 "top center") they should start to scroll horizontally. Row 1 from right to left and row 2 from left to right. During scrolling they should be pinned in place till both are completely on the other side (the wrapper is overflow hidden). In the codepen you can see how far I got. My problem now is, that the second row has a vertical distance to row 1 the moment I use ScrollTrigger and it "waits/scrolls" till row 1 is done... But I want them to scroll simultaneously. Like when you disable the JS, thats the layout how it should look like, but then scroll... Any help is highly appreciated! EDIT: I got closer now with "pinSpacing" set to false on the row 1. But now row 2 doesnt finish at the same time and stays longer pinned. So how do I get them to finish at the same time?