Jump to content
Search Community

Loving ScrollTrigger, but can it do this to pins.

Codetipi test
Moderator Tag

Recommended Posts

15 hours ago, shayan98 said:

but actually no!
you called updateSidebar() in the action function! and it work just for this pen!

in real cases there are over 50 actions in page that can change the height of sticky side bar and its content section! and we can't call updateSidebar() on everywhere in the real usage.

It needs to detect height changes and update itself accordingly

 

We don't typically provide custom "build-to-order" solutions here for free (please read the forum guidelines), but I got curious about this and decided to craft a solution for you as a courtesy

 

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

 

The action() method in my demo now selects a random height, just so you know. 

 

There's no way for it to automatically know when you change the size. That's really on you as the developer to put the proper hooks in your code to update things accordingly. I added an .updateSize() method to the returned ScrollTrigger that you can tap into. This simplifies things. 

 

If you need it to constantly check the size over and over again to notice when it changes, you could certainly do that with a setInterval(). I added an option to this custom function that lets you set watchSize: true (or you can set it to a number of milliseconds for the interval) and it'll do that for you. I just don't like the performance it hit. You'd probably never notice it, but I obsess about performance. The proper way to do it (in my opinion) is to write your code in a way that calls .updateSize() only when appropriate because your code is what's changing it anyway (so it should be easy enough to place the code accordingly). 

 

Again, this custom solution I built for you is a very unusual courtesy - I just want to set expectations properly. I spent several hours on this for you. I hope it helps!

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

First of all, I just want to add my voice in thanks to @GreenSock for the "custom" solution above! Fantastic!

 

I'd also like to add that I personally don't think that this particular use case is actually a "one-off" type that should be considered "built-to-order". From what I've seen, it's actually pops up fairly frequently around the web. Take for example the right sidebar of this Adidas product page (sorry the loading is slow, I linked to the Wayback Machine to try and ensure the link won't break). The sidebar might not have changing height drawers (though if you change the viewport size, it rearranging the shoe size buttons), but otherwise it's essentially exactly what this topic is describing. The page is still using this same implementation at of the time of writing this reply.

 

The sticky-sidebar and sticky-sidebar-v2 packages which attempt to achieve this exact use case get nearly 8,000 weekly downloads combined on NPM. So then, you may wonder, why not just use those? Well I'm using the first of them, and I've found that on some devices the sidebar can "flicker" when scrolling quickly past the end of the "pinned" area, and there are some other issues. The authors did a great job, but I believe the GSAP team has proved themselves the most trustworthy source across the entire web for stuff like this.

 

So, my feedback is that I actually see a huge benefit from officially supporting this, since a basic implementation already exists above.

  • Using ScrollTrigger to pin an element of arbitrary height (could be larger or smaller than the viewport itself)...
  • ...retaining scrolling inside the element while scrolling inside the pinned area (if the element doesn't fit inside the viewport)...
  • ...sticking to each end of the element when it is reached while scrolling inside the pinned area...
  • ...with a way to have the ScrollTrigger(s) watch the height of the element for changes.

I understand the implementation above took some time to put together (again, thank you immensely). Yet the end result is not particularly "custom". I just created a GSAP account for the express purpose of sharing my two cents on this topic. The usages for such a feature are actually quite far and wide, as seen above, not isolated to the 1 or 2 requests of this form. An official "GSAP version" for this feature in the form of a plugin or something would be incredible, even if it was locked behind a paid tier.

 

Thank you so much for all the incredible work you guys do, especially where doing so requires so much research to clean up after browser rendering spaghetti code (looking at you, mobile Safari).

Link to comment
Share on other sites

Welcome to the neighborhood, @Aaron Beaudoin! Very kind of you to chime in here with the favorable comments and suggestions. 💚

 

I'm pretty short on time at the moment, but can you clarify if the solution we provided above delivers everything you need or are you requesting new/different features (or reporting a bug)? I totally get that you're saying there's probably a lot more demand for an "officially supported" tool like this. Gotcha. Will definitely think on that. But I just wanna make sure I'm clear on if something else is needed in the solution itself aside from making it "official" and maybe prettying up the API a bit? 

Link to comment
Share on other sites

Well, one problem is that if I change the CSS a bit to use display: grid; instead of relying on float: left;, everything breaks. That would either need to be fixed, or it would need to be made clear exactly what HTML structure and CSS is required for the pinning to work as expected.

 

See the Pen GRBEpRz by aaronbeaudoin (@aaronbeaudoin) on CodePen

 

Another problem is that it looks like position: sticky; doesn't work properly on children inside the sidebar. This is one of the problems I also ran into with the sticky-sidebar package which I still have yet to find a solution for. If there is no solution to this, perhaps it could instead be done by using a nested ScrollTrigger inside the sidebar for the element I want to be sticky? I didn't actually try that to see it if would work, though.

 

See the Pen vYaZNBV by aaronbeaudoin (@aaronbeaudoin) on CodePen

 

And I'd want to also be sure that this solution would be compatible with all the regular ScrollTrigger options. For example, one that I would probably want to use is anticipatePin because of how the sidebar jitters when it hits the end on my test iPad Mini.

 

I don't intend to load you down with a ton of extra requirements or anything. You asked if there was anything else that would be needed, and these are the items I feel would be worth looking at in order to ensure maximum compatibility.

  • Thanks 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.
×
×
  • Create New...