Jump to content
Search Community

ScrollTrigger multiple simultaneous horizontal pinned animations

PhilippP test
Moderator Tag

Recommended Posts

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 by PhilippP
new version
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...