Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
existentialdread

"Smooth scrolling" on entire page with pinned elements.

Recommended Posts

Building (entirely) from @Ihatetomatoes demo, I was just attempting to apply a similar smooth scrolling effect on a page with pinned elements, but adding pinning seems to create some issues with the positioning of the pinned elements. I'm hoping someone has some experience with this and can point me in the right direction.

See the Pen MWbgRjy by january1979 (@january1979) on CodePen

Link to post
Share on other sites

Hey existentialdread. Thanks for making a demo and for creating a new thread. 

 

For anything other than really basic things, this lightweight smooth scrolling approach probably isn't the way to go. If you need smooth scrolling I recommend using a more full smooth scrolling library. To use it with ScrollTrigger you should make use of .scrollerProxy(). We provide a few demos that use different smooth scrolling libraries in the scrollerProxy docs.

 

Here's an example with your code using Locomotive Scroll:

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

Link to post
Share on other sites
3 hours ago, ZachSaucier said:

Hey existentialdread. Thanks for making a demo and for creating a new thread. 

 

For anything other than really basic things, this lightweight smooth scrolling approach probably isn't the way to go. If you need smooth scrolling I recommend using a more full smooth scrolling library. To use it with ScrollTrigger you should make use of .scrollerProxy(). We provide a few demos that use different smooth scrolling libraries in the scrollerProxy docs.

 

Here's an example with your code using Locomotive Scroll:

 

 

Hey Zach, thanks for getting back to me. I was thinking that was going to be the case. Thanks for your time and help! ScrollTrigger is awesome!

  • Like 1
Link to post
Share on other sites
  • 2 months later...

Is there a reason we ought ought scrollerProxy and a dedicated smooth/momentum scroll library over the default scrub: 1 functionality? Blake's Codepen, attached below, seems to provide the functionality I'm looking for - will additional smoothscroll libraries not create a bigger performance hit?

 

See the Pen 89f1e24fbc30e59edbc186a4c961f35c by osublake (@osublake) on CodePen

Link to post
Share on other sites

It's totally fine it all you need it the smooth scrolling and it works for you. I haven't personally done a deep-dive into all the quirky stuff related to smooth scrolling on various devices but one thing that could definitely throw a curve ball at you is if you try to do pinning in Blake's example. You could set up a scrollerProxy() to sorta make it work, but in my quick tests it was still plagued by some jitters that were likely related to the fact that modern browser handle scrolling on a totally different thread that is NOT synchronized with the main JS thread. 

 

But again, if it works well for you and you don't need advanced stuff, go for it!

Link to post
Share on other sites

Okay, I spent some time refining that demo and creating a helper function that should make this a lot easier for you and it does seem to integrate fine with pinning once I figured out that the jittery behavior was due to the fact that the ScrollTrigger wasn't being updated each time the fake smooth-scrolling tween was moving the content. 

 

So here's a new CodePen that demonstrates what's possible: 

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

 

Does that help? 

  • Like 4
Link to post
Share on other sites

Thanks so much @GreenSock! Your codepen indeed demonstrates almost exactly what I'd want - only I'd change out the "top top" for "center center."

 

Unfortunately - sorry for the little delay in reply, haven't had time to test it out on my end till now - I'm definitely getting stuck porting this to React. Here's my latest sandbox (the code is almost exactly the same as in your codepen.)

 

For some reason I have no difficulty at all pretty much getting horizontal smooth scroll with scrubbing and snapping to work. (The final section in this sandbox). But I've had all kinds of weird problems trying to get something like your linked-to codepen to play nice in React. 

 

I'll triple check the common scroll trigger mistakes page and search around for potentially other React x vertical ScrollTrigger posts in the forum, spend some more time in my codesandbox too, but I'd really appreciate any further help getting something like your codepen off the ground in React.

Link to post
Share on other sites

Yeah I'm just so perplexed as to why this isn't working. Here is another sandbox that to my understanding is close to virtually identical to the codepen below. Can't seem to get any vertical smooth scroll/scrubbing working in React. Horizontal works fine, but not vertical.

 

See the Pen 89f1e24fbc30e59edbc186a4c961f35c by osublake (@osublake) on CodePen

Link to post
Share on other sites

You need some scrollbars first. I see you have overflow hidden on several elements, which will disable scrolling

  • Like 3
Link to post
Share on other sites

Thanks, @OSUblake - I was just copying the code from the codepens, though, which all had overflow: hidden;
 and position: fixed;  set for the outer most div, and   position: absolute;  and  overflow: hidden; for the immediate child div. 

 

Is there something that codepen does implicitly that I'm missing? In any case, Jack's example is virtually exactly what I'm going for. Are there any examples even remotely like that out there in React? I've looked all over the forums for similar issues raised or demos exhibited, but haven't found any. For whatever reason I can manage horizontal scrollTriggers just fine, but can't manage vertical ones in React.

Link to post
Share on other sites

No, nothing different. In React, you have a root element, so you might need to adjust the css to work with that.

 

Link to post
Share on other sites

Just as a quick sanity check, I add this css to your sandbox, and it was working.

 

body {
  height: 400vh;
}

 

  • Like 2
Link to post
Share on other sites

Thanks! I definitely feel much saner being able to get any kind of vertical smooth scrolling that doesn't screw up layout working for sure. Now it just remains to get something like what Jack linked to in his last message. I think I should be able to manage, will try a little later in the day tomorrow when I'm more rested and have time etc. Thanks again!

Link to post
Share on other sites

Really anxious to get this working and knowing I'd sleep better if I do - but man is this disheartening. One step forward, two back. Here's my latest sandbox aiming for a smooth-scrollified version of this, which is very similar to the codepen Jack linked to in his last post here.

 

I don't understand why I have two scrollbars and get all kinds of glitching when his codepen is smooth-sailing, with very little if any meaningful discrepancies between our code. 

 

And whoever can help, totally do so at your leisure. I'll sleep with or without this working, just I haven't been so mystified struggling to get something so seemingly simple to work like this in a while.

Link to post
Share on other sites

Okay, so this sandbox is the closest I've managed to get. 

 

As you can see, there is an extra scrollbar that doesn't exist in @GreenSock's codepen (I think codesandbox and codepen have different mechanics - how each relates to window or root or something - yet another speedbump in learning Greensock in the context of React unfortunately).

 

If you inspect the HTML, and highlight the div with the class of "inner" and uncheck "overflow: visible scroll" it works exactly as expected - just as Jack's codepen does above

 

Would you maybe be able to take a quick look at this, @Rodrigo? I'd really appreciate any help on this. I see that you're one of the React-savier GSAP-ers in these parts. Totally at your leisure. It's just frustrating feeling like I'm so close yet so far. GSAP is way more powerful and performant than the animation libraries I'm used to (Framer Motion, React Spring), but the API is a lot harder for me to parse. 

Link to post
Share on other sites

Hi,

 

I don't see anything React-related that could be causing this issue.

 

Also @akapowl's solution seems to do the trick, since the source of your problem seems to be the CSS of your app.

 

Happy Tweening!!!

  • Like 4
Link to post
Share on other sites

Ahhh thank you so much @akapowl. And similar to floats, !important I guess is something that I've always either been encouraged not to use to the point of it slipping from my CSS vocabulary or just haven't encountered much of a need for it with the greater flexibility updates to the spec have brought. 

 

Works like a dream here though. Thanks again.

  • Like 2
Link to post
Share on other sites

Hm. Spoke too soon, or partially. 

 

Is there any way of achieving this without explicitly setting the height in CSS? In real world projects - particularly for clients where they have control over the content of pages - how can I proceed with this effect in situations where I can't explicitly say "height: 500vh"? 

Link to post
Share on other sites
6 hours ago, granularclouds said:

Is there any way of achieving this without explicitly setting the height in CSS?

 

Well, that's a matter of setup. For it to work that way, you'd first have to make sure you have scrollable space at all - meaning position absolute would not be the tool of choice for your boxes. Here's a fork of your demo with the boxes positioned relative and changes made to their styling (margin-top instead of top for positioning) and their ScrollTriggers accordingly.

 

https://codesandbox.io/s/cq4tg

 

  • Like 4
Link to post
Share on other sites

Interesting, thanks so much @akapowl. Idiosyncrasies and a variety of ways of accomplishing similar things is very often the sign of a potent tool, even if that results in some pitfalls and challenges while getting going (Framer Motion, for example, is significantly easier for me to grasp and utilize without practically any confusion, but it's quite limited, which is largely why I've landed here). Still definitely struggling to understand scrollTrigger. Hope it comes naturally by just messing around with it over time...

Link to post
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.

×