Jump to content
Search Community

Unable to get column to pin after reveal.

hybrid09 test
Moderator Tag

Recommended Posts

Hey everyone,

 

I'm trying to accomplish a simple pinning, it worked initially but after I tried to add a reveal panel the pinning shows weird behavior (will not pin).

After section 3 reveals itself from underneath section 2, I would like the left box to pin itself. This is a basic snippet that I created from my actual project. The pinning and everything else worked fine without the reveal. 

 

Thank you.

See the Pen VwKZBvN by mallabiplav (@mallabiplav) on CodePen

Link to comment
Share on other sites

I'm not sure I understand the desired effect. Based on your code, it seems to be doing what you're asking, but I'm sure I'm misunderstanding something. A few quick notes: 

  1. You're making one of the most common mistakes by not setting all your transforms via GSAP.  I'd add gsap.set(".section3", {yPercent: -100, y: 0});
  2. You're using mis-matched versions of GSAP and ScrollTrigger. I'd definitely recommend using the latest of each. 

So are you saying that you only want the left box to stay pinned while scrolling? And it should stop being pinned when its bottom reaches the bottom of the box on the right (the taller one)?  And how do you expect the transition to be timed with that? Is panel3 getting revealed WHILE the left box is pinned but the right one is scrolling past the whole time? 

  • Like 1
Link to comment
Share on other sites

 

Hey @hybrid09

 

That's a bit tricky in the setup you have.

 

Since you only want to have the .left-panel stay in place after the second section is out of view, it wouldn't make sense to pin the whole section, because none of its contents would be scrolling then (as it is the case in your pen), so you will have to work around that setup of yours. Either pin the whole section and animate the right-panel up on the y axis to fake a scroll, or do something like I did in the following codepen.

 

I got it working as you intend to, by doing this:

 

  1. I got rid of the transform translateY on .section3 altogehter, meaning, it is also not being set via GSAP.
  2. Instead I set the height of .section3 (particularly for this demo in regard to the 'duration' / end of the later mentioned pinning) from your 200vh to 300vh.
  3. Set up two pining scrolltriggers, both starting when section 3 hits the top (which is the same time, section 2 starts being translated up)
  • one of them pins the right panel, but only for the duration it takes section 2 to be translated up ( its end set to '+=100%' ) and after that let the right panel scroll freely
  • the second one pins the left panel ( its end being set to '+=200%'  - thus the section's height of 300vh - if you wanted to change the duration of the pin you'd have to make sure to also change the height of the section respectivelly)

 

See the Pen 73eee041b51e72e091e6088d995a2095 by akapowl (@akapowl) on CodePen

 

 

 

This pretty much does what you described. Note, that i did change the scrub: 1 to scrub: true - just to avoid being able to see any weird movements of the panels behind the curtain (meaning section 2) when scrolling back up for instance and the section has to catch up to the scroll.

 

 

 

And here is a additional pen, to show the longer pinning of the left-panel (and adjusted height of the section).

 

See the Pen 1b2547e5bfc1bf86fa6ae717771e1211 by akapowl (@akapowl) on CodePen

 

 

 

I don't know if this could be done in an even easier way with your setup, but I myself didn't see one for now.

 

Hope this helps.

 

Cheers,

Paul

 

 

  • Like 2
Link to comment
Share on other sites

On 11/26/2020 at 5:36 AM, GreenSock said:

I'm not sure I understand the desired effect. Based on your code, it seems to be doing what you're asking, but I'm sure I'm misunderstanding something. A few quick notes: 

  1. You're making one of the most common mistakes by not setting all your transforms via GSAP.  I'd add gsap.set(".section3", {yPercent: -100, y: 0});
  2. You're using mis-matched versions of GSAP and ScrollTrigger. I'd definitely recommend using the latest of each. 

So are you saying that you only want the left box to stay pinned while scrolling? And it should stop being pinned when its bottom reaches the bottom of the box on the right (the taller one)?  And how do you expect the transition to be timed with that? Is panel3 getting revealed WHILE the left box is pinned but the right one is scrolling past the whole time? 

 

@GreenSock I read the post and even then completely missed the note. This was my bad. That seemed to have been the problem that was messing with the scroll trigger. 

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