Jump to content
GreenSock

krs

Pinning Slides with Overscroll

Recommended Posts

Hello Greenshock forums!

I love all of your products and want to thank you for creating and maintaining them. I don't normally post for help unless I've exhausted my options and would appreciate if anyone can help or even give me some pointers.

 

I am trying to achieve this functionality where I have an x number of sections that the user scroll through. Most sections are 100vh like presentation slides but some are going to be longer in height. As the user scrolls the sections pin themselves and animate which works pretty well so far. However when the sections are longer I need them to pin for longer and scroll until the content inside them scrolls to the end.

 

Because one codepen is equal to 1000 words here is what i am trying to achieve:

 

Thank you!

See the Pen 291e78b4557bcf4a022d094ffea85163 by riginosk (@riginosk) on CodePen

  • Like 1
Link to comment
Share on other sites

Tricky one!

Just popping in to say I'm taking a look into it so you don't think you've been forgotten 🙂

Obviously other people are welcome to help too!

Link to comment
Share on other sites

Thank you so much Cassie for looking into it! It is indeed very tricky.

Link to comment
Share on other sites

Not a solution, but to help illustrate -

See the Pen dyRPoOO?editors=0110 by GreenSock (@GreenSock) on CodePen



When you say 'long and scrollable within' - do you mean native scroll like this, or are you trying to animate the content of that card to simulate scrolling?

*pause over section 2 to scroll it

 

Link to comment
Share on other sites

Have you thought about just making the start: "bottom bottom" and switch height to min-height on .panel so that they can grow if they need to? Here's what I'd probably do:

See the Pen abwzvbJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

That way, you don't make users have to deal with the funky nested scrolling stuff. 

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

Thank you soooo much both of you for all the help! This is exactly what I was looking for. ❤️

  • Like 2
Link to comment
Share on other sites

Great! Glad to hear it was helpful, @krs. Thanks for providing a clear minimal demo; that always makes it so much faster to troubleshoot.

 

Happy tweening/scrolling!

Link to comment
Share on other sites

Hi Greenshock Team, again thank you for your help yesterday.  I managed to merge some of the logic from the examples above and I have come pretty close to the desired result but where I'm stuck is when adding pinSpacing: True. I cannot figure out why the slide 3 is delayed to come into view. Here is a codepen, hopefully that illustrates the issue a bit better.

 

See the Pen e8390293ba7d1cbaff61f3b50c0e8088 by riginosk (@riginosk) on CodePen

Link to comment
Share on other sites

Hm, it doesn't look like you followed my example much at all - most of the code is what you had in there before I fixed it. I'm a bit confused about why you're making all those changes. 

  1. Why are you setting an endTrigger but no end value? Why do you even need an endTrigger at all? 
  2. Why are you adding pinSpacing? What's your goal? 
  3. Why are you reverting to the old syntax (with duration as the 2nd parameter) instead of using the modern GSAP 3 syntax? 
  4. Why are you using labels? 
  5. Why are you animating from y: 0 to y: "0%"? And rotate: 0 to rotateX: "0deg"? 
Link to comment
Share on other sites

Hi Jack, I didn't mean to go rogue from your example I was going to clean some of that stuff up to align to your code, I apologize for posting the pen above while I hadn't cleaned it up. What I realized was that your code did what I needed with the only exception that when the taller sections scale back their content needs to be contained in a panel of the same height. So I think it's inevitable to not have to deal with the funky nested scroll stuff.

So I took some of the logic Cassie provided and tried to create something similar.

See the Pen e8390293ba7d1cbaff61f3b50c0e8088?editors=1010 by riginosk (@riginosk) on CodePen

 

To answer some of your questions

1. My mistake, I wasn't aware I had to provide an end value to endTrigger.

2. The pinSpacing seemed like the only way to allow me to first virtually scroll the content within the panel and then scale it. Without it slide 3 comes into view too soon. But again I'm not sure if there is another way of doing that.

3.  I'm not super familiar with GSAP 3 syntax, noob here

4. I wanted to do some other stuff and was using labels to start some tween at the same time (removed it)

5. Thats just bad code on my end except for the rotate that i thought I read somewhere that it improves performance.

 

Here are some images to try and illustrate:

 

Your demo is super close but the content needs to contained inside the panel

demo_1.jpg.ad447dd92acf4cde2bd0476481ca0da9.jpg

 

So looking to achieve something like this where all the panels have the same ratio 

 

demo.jpg.a8de445bd918a2f83be3f63a4eefcb70.jpg

 

Thank you very much for your time and help!!

 

   

 

Link to comment
Share on other sites

Ah, that's quite a tricky scenario because for that effect you need a custom amount of pinSpacing that's based on the ratio of the overscroll to the window height which also needs to be reflected in the timing of the tweens in your timeline. Regular pinSpacing is based on the entire animation finishing, but you only want PART of the animation (the fake-scrolling part) to finish before the next section starts coming in. 

 

Normally we don't provide custom consulting for logic issues like that, but I was curious and enjoyed the challenge: 

See the Pen bGRdvMy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that more like what you're looking for? 

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

Wow Jack thank you so much this is it! The logic you worked out here, looking at the code is impressive 🤯. I don't think I would've been able to figure this one out without your help!!! I also love how you merged the two timelines into one and added the if statement in the tween level!

Thank you for being so generous ❤️ 💯

  • Like 1
Link to comment
Share on other sites

6 hours ago, krs said:

Wow Jack thank you so much this is it! The logic you worked out here, looking at the code is impressive 🤯. I don't think I would've been able to figure this one out without your help!!! I also love how you merged the two timelines into one and added the if statement in the tween level!

Thank you for being so generous ❤️ 💯

Very happy to hear it helped. Yeah, the logic was a bit tricky but I enjoy challenges like that. It's like solving a riddle. 

 

Happy tweening!

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