PhilippP Posted October 14, 2021 Share Posted October 14, 2021 (edited) 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? See the Pen wvqKJYy by ppistecky (@ppistecky) on CodePen Edited October 14, 2021 by PhilippP new version Link to comment Share on other sites More sharing options...
Carl Posted October 14, 2021 Share Posted October 14, 2021 hi and welcome to the GreenSock forums. thanks for the demo. if you want no space between the rows and you want them both to be pinned and play simultaneously you can put all the animation in one timeline and use the ".projects" element as the trigger like this See the Pen bGrVrKa?editors=1010 by snorkltv (@snorkltv) on CodePen 2 Link to comment Share on other sites More sharing options...
PhilippP Posted October 14, 2021 Author Share Posted October 14, 2021 OK wow! Such a simple and elegant solution. And such a quick answer! Thanks a lot! This forum rocks... and GSAP too, of course! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now