Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PhilippP

ScrollTrigger multiple simultaneous horizontal pinned animations

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

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

 

 

  • Like 2
Link to comment
Share on other sites

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

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.
×