Jump to content
GreenSock

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

Pinning Help with two columns in scrollTriger

Go to solution Solved by OSUblake,

Recommended Posts

Hello All!

I'm trying to recreate this: 

See the Pen YzyqVNe by GreenSock (@GreenSock) on CodePen

 .

But where the left column moves up on scroll then pins, then the right column comes up pins next to it and then scrolls through its content before moving down the page.


simliar to this beautiful page: https://oldspitalfieldsmarket.com/

Any advice or guidance would be appreciated!  
 

See the Pen eYvwjbG by FreddyG87 (@FreddyG87) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Freddie!

 

Your HTML and CSS is probably going to need a little restructuring, but the basic idea is that you need to calculate how long something should be pinned for.

 

See the Pen GRWbbdL by GreenSock (@GreenSock) on CodePen

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

 

Or you could use the endTrigger property alongside the end property.

 

As Blake hinted to, HTML structure and CSS is also key here - something like this could work.

 

See the Pen d1dc3af62223a5032752bf86af7b6bf6 by akapowl (@akapowl) on CodePen

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Shout out to both of you for answering, and guiding me! Re-worked CSS and was able to, get it functioning how I needed!!!! Thanks to both of you!

  • Like 2
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.

×