Jump to content
GreenSock

iammarkmulvey

ScrollTrigger pinning element both top and bottom?

Recommended Posts

Is it possible with ScrollTrigger to assign a pin set for both top and bottom of the viewport?  So when you scroll up the element pins to the top and when you scroll down it pins to the bottom.

 

I tried starting with the elements fixed bottom on load and as soon as you started scrolling removed the sticky class and assigned the ScrollTrigger. That resulted in the elements disappearing.

See the Pen vYLGyqL by markmulvey (@markmulvey) on CodePen

Link to comment
Share on other sites

Hey Mark,

 

This is possible in the latest beta. What sort of effect are you wanting to create though? You have several elements in your page so I'm a bit confused what you want the end goal to be. Maybe remove the irrelevant parts?

Link to comment
Share on other sites

Thanks Zach for your response!

 

I am trying to make it so the "today" header and the "tomorrow" header are fixed to the bottom of the viewport regardless of the viewport height on load. When the user scrolls the "today" header would "unpin" and scroll in position above the "today" content until it reaches the top and "pins" itself just below the nav. As the user continues scrolling the "today" content will continue scrolling until we reach the bottom of the "today" content, at which point the "tomorrow" header would "unpin" and continue to scroll in position above the "tomorrow" content until it reaches the top and pins itself below the nav. Obviously would want everything to work in reverse if the user changes the scroll direction. 

 

Hopefully, that makes sense?

Link to comment
Share on other sites

That does make sense. Just so you know we're still working on multiple pins on one element and this is a good test case for it. We'll update you when we have things working :) 

  • Like 1
Link to comment
Share on other sites

Almost Jack! That is essential the effect but it's a little backwards.

 

Rather than the header divs unpinning from their initial fixed position at the bottom of the related content div they would unpin and be positioned at the top of the content div when scrolling. I tweaked it to get the result I was looking for. Obviously, a key factor is pointing to a different ScrollTrigger JS file. Is that available for me to use?

 

Thank you! Good stuff.

 

See the Pen vYLGyqL by markmulvey (@markmulvey) on CodePen

 

 

 

 

 

 

 

Link to comment
Share on other sites

2 minutes ago, iammarkmulvey said:

Obviously, a key factor is pointing to a different ScrollTrigger JS file. Is that available for me to use?

Sure! Just know that we may still make updates to it before the next version release.

Link to comment
Share on other sites

Quick question? Take a look at the "content" sections.  The Today "content"  at the top is getting cut off and the Tomorrow "content" even more. What do you think is causing that?

 

Thanks again for all you help on this one.

 

See the Pen vYLGyqL by markmulvey (@markmulvey) on CodePen

Link to comment
Share on other sites

7 minutes ago, iammarkmulvey said:

What do you think is causing that?

The way that your content is setup the pinned elements are going to be covering something. Just add some padding to make the content not be cut off.

Link to comment
Share on other sites

I am running into a problem when viewing on a mobile device. Specifically the browser toolbar (both Safari and Chrome) at the bottom that slides in and out on scroll. Because of this the 2 headers that we wanted to appear "pinned" to the bottom "Today" and "Tomorrow" are left hanging in the original "absolute" position when the the page loads, rather than always repositioning to the bottom as desired.

 

Any thoughts on that one?  Is there a way to hide that toolbar at the bottom or something like that?  Also it's hard to replicate in the codepen example because when you view codepen on a mobile device the toolbar at the bottom stays visible and constant the entire time.  How does codepen control the toolbar in mobile view?

Link to comment
Share on other sites

4 minutes ago, iammarkmulvey said:

it's hard to replicate in the codepen example because when you view codepen on a mobile device the toolbar at the bottom stays visible and constant the entire time.

Even in debug mode? Try replacing /pen with /debug in the URL on mobile.

Link to comment
Share on other sites

Ok that makes the toolbar at the bottom in codepen function normally when viewing from my iPhone (learn something new everyday). Browser Tool bar disappears on scroll up and reappears on scroll down and you can see how the "tomorrow" header is a bit buggy and gets stuck hanging. 

 

Thanks for the quick response Zach!

Link to comment
Share on other sites

11 minutes ago, iammarkmulvey said:

Browser Tool bar disappears on scroll up and reappears on scroll down and you can see how the "tomorrow" header is a bit buggy and gets stuck hanging. 

The effect that you're talking about is when you first start scrolling the "Tomorrow" isn't at the bottom of the screen until you let go of the scroll, correct?

 

If so, that's because ScrollTrigger waits to fire its refresh until after the scroll event is done.

 

To work around that, you could fire ScrollTrigger.refresh() on the window's resize event:

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

  • Like 2
Link to comment
Share on other sites

Bingo! That did the trick. Safari mobile is a little on the slow side to refresh so it doesn't look as smooth but works great in the Chrome mobile browser.

 

Thanks again, Zach.

  • Like 1
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.
×