Jump to content
GreenSock

A. Helton

Pin stacking items with scrubbing scrolltrigger to move as one

Recommended Posts

Hey everyone-

 

I have an interesting mockup from my designers and I have racked my brain for weeks on how to accomplish it.  The idea is that there are three sections.,  Each scrolls into the viewport and locks in the middle of the screen.  The next section scrolls into view and then locks at the same position basically overlapping the other div until all items are in the center of the viewport and then scrub up together.  I have been trying to use Pin and potentially the scroller properties on ScrollTrigger but have hit a wall.  Does anyone have advice on how to make this happen?

 

The current problems are that the pinned item begins to move as you continue to scroll which I believe is an issue with my "end" property value or the way I have the parent container setup (sadly I have to use bootstrap on this).  The next issue is that the sections text below the boxes move up into the scrolling boxes as you move down the page.  I have attached a codepen that i hope illustrates the current state of things.  The code was so easy to setup but has been so difficult to get right.

 

Any assistance is appreciated.  Thank you!

See the Pen VwXZJge by ahdrum87 (@ahdrum87) on CodePen

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here are my list of requirements...please show me how to build it" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

There are a bunch of ScrollTrigger demos here

 

And this one seems similar to what you were describing, so maybe it'll help get you moving in the right direction?: 

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

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

There are hundreds of examples on this forum of people asking for help and having people attempt to troubleshoot.  I have gone through the examples as I said but they don't discuss doing anything where items stack and move together.  I'm not asking anyone to do it for me, just asking for direction using your product to solve a specific problem so I detail it out.  This is the second time posting and the second non-answer.  What's the issue?  Why do some people get help and others are told to pay someone else to use your product?

Link to comment
Share on other sites

Hey, @A. Helton. Sorry if you got a negative vibe. Totally not our intention around here. We really aim to be warm and friendly. Let me explain the dilemma: 

 

We spend hundreds of hours every month in these forums trying to help people. Most of them never pay a dime, never join Club GreenSock (which is what allows us to keep the lights on), but we do our best to answer GSAP-related questions. It costs thousands of dollars every month just to keep these forums going this way. It's incredibly time-consuming and complex to field all these questions with custom implementations, logic issues, etc. Most of the time the issue has nothing to do with GSAP at all. We just have to draw the line somewhere in order to keep these forums from turning into an abyss of "here are my requirements...please show me how to do it" requests. Those come in multiple times every day. "I want it to do this...then this...then this...but only when these conditions are met..." or "here's my live project, please troubleshoot and tell me why the 3rd section isn't moving to the right 65px when the pink box rotates to 87 degrees".  :(

 

You were kind enough to provide a minimal demo CodePen - thank you. 

 

Most people want help for free (and fast), yet they're not willing to spend any time helping someone else in the forums. It's a bit discouraging at times. So again, we need to have some boundaries in place to keep from going crazy. Often people don't understand just how much effort it takes to try to wrap your head around someone else's description of a problem, analyze their code, find the problems, craft solutions, etc. 

 

I'm running out the door at the moment, but as a courtesy I'll try to look at your problem and offer more specific advice later. Again, sorry if you got any negative vibe and I hope you understand why the boundaries need to be in place. 

Link to comment
Share on other sites

I appreciate the time and I understand what you're saying. 

 

I feel that by putting that message up it shuts down anyone else from attempting to assist.  People look at the question and see "the person has been told to figure it out" (the post history tells the story when each post is 1-3 replies and the post dies).  It's easier to accept "no one has time, knows how to assist, or they don't understand what you are saying, therefore no one has replied" rather than being told your question is invalid and you can pay someone if you want.  Forums are organic and community driven, right?  There is no need for you to look at it later or a rush even.  It's appreciated but the question isn't to stress anyone.  Just looking for if I'm misusing something or close but need to look at something specific.  I have spent weeks in the examples and documentation creating fun work with GSAP but this has me stumped. 

 

Thank you for the reply and understanding my frustration, Jack.

Link to comment
Share on other sites

9 hours ago, A. Helton said:

I feel that by putting that message up it shuts down anyone else from attempting to assist.  People look at the question and see "the person has been told to figure it out" (the post history tells the story when each post is 1-3 replies and the post dies).

 

Yeah, that's why the response included this: 

9 hours ago, GSAP Helper said:

Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.

 

If we just don't answer (letting others potentially fill the void), the poster may feel ignored. We bend over backwards to make sure every question gets a response, usually within a matter of hours. As stated, the goal was simply to manage expectations. 

 

As to your original question, there are many ways to accomplish it and here's one: 

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

 

Two tricky things to note: 

  • Your scenario is odd because you're technically trying to make earlier ScrollTriggers base their end on a later ScrollTrigger. Since the refresh() procedure must start from the top and work down (primarily because pinned elements higher on the page can push subsequent ones further down, thus affecting their start/end positions), so it's an order-of-operation challenge. I just created another ScrollTrigger that serves the sole purpose of tracking the scroll position where the center of the LAST card hits the center of the screen so we can feed that to the other ScrollTriggers.
  • You had margin-bottom applied to the things you were pinning. In rare cases, you can get margin collapse/contamination, so I'd recommend just wrapping your elements one layer deeper, and apply the margin to the wrapper(s) to avoid that. 

I hope that helps!

Link to comment
Share on other sites

Hey Jack-

 

Your bulleted list and commented code really helps.  I knew I was missing something that was super close.  What I was struggling with the most is that I have three elements that "move as one" (but not really) within outer container.  So i'm using the viewport to tell them to stick at the center but needing the whole container to move when it reaches the bottom.  I didn't know you could nest a scrollTrigger inside a scrollTrigger.  I had been focused on the viewport and using the scroller property to try and do it which just kept giving me weird results like completely losing one of the items or looking at independent triggers and the batch() function to somehow do it.

 

Making the end property a function, I never knew you could get the properties of another scrollTrigger and pass them like that.  This is really cool learning and actually may make some of the other triggers simpler (famous last words I know).

 

The note on margin collapse is great.  I don't know for certain the margin is needed since the items are scrolling, might be worth putting them in a prefers reduced motion query so that when i turn off scrolling it applies them and they just appear as a flat set of spaced divs.

 

Thank you for taking a look.  I'm pushing for our organization to join Club GreenSockMorphSVG and the MotionPathHelper alone look worth the price it's just not a decision I get to make.  Take care.

Link to comment
Share on other sites

3 hours ago, A. Helton said:

I didn't know you could nest a scrollTrigger inside a scrollTrigger.

You can't :)

 

Well, maybe I'm misunderstanding what you mean by that. There's no nesting going on here as far as I can tell. 

 

3 hours ago, A. Helton said:

Making the end property a function, I never knew you could get the properties of another scrollTrigger and pass them like that.  This is really cool learning and actually may make some of the other triggers simpler (famous last words I know).

Yep, it can be a useful strategy. You can even make it depend on the previous ScrollTrigger:

start: self => self.previous().end // start where the previous one ends

Just beware that things get refreshed top-down, so you wouldn't want to make a ScrollTrigger depend on the next() one's positioning because it wouldn't be updated at that point. 

 

3 hours ago, A. Helton said:

I'm pushing for our organization to join Club GreenSockMorphSVG and the MotionPathHelper alone look worth the price it's just not a decision I get to make.

That's great, @A. Helton. Thanks for advocating for GSAP there at your company. 💚 If you need some help justifying the expense, this may help: 

 

 

I'm pretty confident the membership would pay for itself in a matter of weeks and then ultimately make your company more profitable considering all the added capabilities, performance, compatibility, the time it'll save your team, etc. 

 

Good luck! 

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