Jump to content
GreenSock

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

scrollTrigger with smooth-scrollbar

Recommended Posts

Hey there,

 

first off: congrats on and even more, thanks for the scrollTrigger Plugin - it's just awesome.

 

I have been using scrollMagic in a project of mine so far, and been re-writing it to use scrollTrigger instead.

I love it, since in most cases it is way easier to use and wrap my head around what I need to achieve certain sorts of scroll based animations - great job on that!

 

But I have run into an issue, that probably is rather an edge case, since it is concerning the use of scrollTrigger together with idiotwu' smooth-scrollbar plugin.

I know you guys try keeping things in here related to problems related directly to GSAP, but I thought I'd post anyway, since my problem might have something to do with scrollTrigger's performance - not saying it does, though.

It's more likely that I am doing something wrong here, I guess.

 

So, I have sections that are being pinned and their contents transformed on the x-axis to make them appear horizontally scrolling.

I found, that hooking scrollTrigger up to smooth-scrollbar works in just the same way as it works with scrollMagic;

by adding a listener to smooth-scrollbar that refreshes scrollTrigger on the virtual scrolling of smooth-scrollbar.

 

In my project, when I have only one section with that effect, everything runs buttery smooth, but as soon as there is more than one section with the trigger applied, the scrolling suffers drops in fps to below 50 - which makes it pretty much visibly laggy and sort of annoying.

I made a pen with a total of 5 horizontal sections, to show, what I mean.

 

See the Pen 7c21be9a241e0e13b98316c197b617ef by akapowl (@akapowl) on CodePen

 

 

 

This is not the case with scrollMagic - everything staying smooth there.

 

See the Pen 074d0a380e2a0393b13d0fb57b5be166 by akapowl (@akapowl) on CodePen

 

 

 

So, now I am wondering:

 

Since, if I understood correctly, scrollTrigger makes all the heavy requests on refresh, is it not a good idea, to hook the refresh to the virtual scroll?

scrollMagic seems to handle it absolutely fine, so might this be something, scrollTrigger could be improved on?

Or am I maybe doing something totally wrong here?

 

Maybe somebody finds the time to look into this.

Any input appreciated.

 

Cheers

Paul

See the Pen 7c21be9a241e0e13b98316c197b617ef by akapowl (@akapowl) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey Paul.

 

In both cases if you use the smooth scrollbar to try and scroll the horizontal section it breaks the experience because of the conflicting scroll positions. We don't recommend doing that.

 

Instead, I would recommend just implementing your own custom scroll indicator. It's simple to do so and I show how to do that in another thread:

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

  • Like 1
Link to comment
Share on other sites

Hey Zach.

 

Thanks for the quick reply.

 

The horizontal sections are not supposed to be 'scrolled' horizontally at all.

All they are supposed to do, is translate on the x-axis, when scrolling on the y-axis.

I updated the pens, so the scrollbar on the x-axis stays hidden.

Is this what you meant with "breaks the experience"?

 

I get, that this is supposed to be scroll-jacking, and that it breaks the experience and brings a lot of caveats, but I just love the looks and feel of it - especially the way smooth-scrollbar animates the scroll.

 

 

Link to comment
Share on other sites

8 minutes ago, akapowl said:

Is this what you meant with "breaks the experience"?

Yes, that's what I was talking about.

 

.refresh() is only meant to be called when things need to be recalculated so if the scrollbar plugin that you're using's addListener fires every tick then yes, it's quite understandable that it wouldn't perform very well. If you could just run .refresh() at the start and end of the horizontal sections that might perform better.

 

On the ScrollMagic demo if you scroll quickly then at the end of the horizontal sections there is a jump because SM hasn't updated yet.

 

Scroll jacking is error prone - we don't really recommend doing it. That's a big reason why ScrollTrigger doesn't do any scroll jacking :) Again, you could make a custom scrollbar with ST quite easily. @Mamboleoo made this yesterday:

See the Pen abdwYaJ by Mamboleoo (@Mamboleoo) on CodePen

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

You certainly shouldn't be calling refresh() on every update. One of the great benefits of ScrollTrigger is its ability to do all the complex calculations up front (on refresh()) to figure out where things are in the natural flow of the document and then while scrolling it ONLY has to look at a single value and do some simple comparisons. That makes it super fast while scrolling. In order to do the up-front calculations properly, it literally has to revert everything ScrollTrigger-related (unwrap the elements, remove the inline styles it applied, unpin things, put the animations back to their start, etc.), then do the measurements, then put things back. Again, that typically only happens when the page loads (and when you resize or activate a tab after it was hidden) so the performance hit is negligible. It's well worth the up-front effort so that it can be crazy fast while your users actually do their scrolling. 

 

So if you're calling refresh() all the time like that, it totally makes sense that performance would bog down. 

 

As far as I know, ScrollMagic doesn't handle all the things ScrollTrigger does like automatically handling resizing, multi-pinning, smooth scrubbing, etc., etc., so that's why it seemed faster. I'm pretty confident that ScrollTrigger is much faster than ScrollMagic overall (when refresh() isn't being abused). 

 

Does that clear things up?

  • Like 2
Link to comment
Share on other sites

1 hour ago, GreenSock said:

Does that clear things up?

 

Sure does! Thanks for your time and the indepth explenation.

 

My issue is sort of related to this post

 

So, in my understanding from both, your answers here and the thread stated above, there really just might not be an easy or really performant way to hook scrollTrigger up to a pre-existing/co-existing smooth-scrolling plugin or function, since it just is not intended for that kind of usage, am I getting that right?

 

 

 

Link to comment
Share on other sites

3 minutes ago, akapowl said:

there really is no easy or really performant way to hook scrollTrigger up to a pre-existing/co-existing smooth-scrolling plugin or function, since it just is not intended for that kind of usage, am I getting that right?

It depends on the implementation of the plugin. If it does scroll jacking, then it is likely not compatible :) If it doesn't scroll jack and uses the regular scroll location then it should work great. If you can disable the scroll jacking and pass in a manual value for it to update to then that could work also.

  • Like 1
Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

It depends on the implementation of the plugin. If it does scroll jacking, then it is likely not compatible :) If it doesn't scroll jack and uses the regular scroll location then it should work great. If you can disable the scroll jacking and pass in a manual value for it to update to then that could work also.

 

Okay, that smooth-scrollbar plugin I want to use is probably off the table for use with scrollTrigger then.

Thanks again for claryfing things @ZachSaucier @GreenSock

 

Link to comment
Share on other sites

I think we may be able to offer some hooks into ScrollTrigger that'd make this kind of thing possible. I've added an experimental feature into the latest beta that'd let you do this: 

// Tell ScrollTrigger to use these proxy getter/setter methods for the "body" element: 
ScrollTrigger.scrollerProxy("body", {
  scrollTop(value) {
    if (arguments.length) {
      bodyScrollBar.scrollTop = value; // setter
    }
    return bodyScrollBar.scrollTop; // getter
  },
  scrollLeft(value) {
    if (arguments.length) {
      bodyScrollBar.scrollLeft = value; // setter
    }
    return bodyScrollBar.scrollLeft; // getter
  }
});

// when your smooth scroller updates, tell ScrollTrigger to update() too. 
bodyScrollBar.addListener(() => {
  ScrollTrigger.update();
});

When I dropped that into your demo it seemed to work okay but I very well may be missing something: 

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

 

Basically you're saying "Hey ScrollTrigger, whenever you want to get or set the scrollTop/scrollLeft on this element (body), use these methods instead" and then you do whatever you want inside those methods. 

 

The preview of the next release is at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Does that help? 

 

I welcome feedback about the API. And I'm not promising this will be in the next release but it seems likely if this works well for you. 

  • Like 4
  • Thanks 2
Link to comment
Share on other sites

24 minutes ago, GreenSock said:

Does that help? 

 

If that helps, you ask?!

Man, you have basically just made my day, month, and whole year to come!

This is just awesome. The demo looks super smooth - love it.

 

I really think - all scrolljacking caveats aside - I am most certainly not the only one who'd love to see this implented.

Thanks a million for the effort. Sometimes it's just unbelievable how awesome you guys at Greensock are!

 

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

This is officially in 3.4.0 which is out now. 

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

  • 3 months later...
On 02.07.2020 at 17:16, ZachSaucier said:

Плавная прокрутка с помощью Locomotive Scroll + ScrollTrigger: 

 

 

hey, you know how to turn off the scroll track in this example? i'm testing locomotive + gsap, it's ok, but i can't figure out how to remove this idiotic strip. 

deb6e1fb9e.png

Link to comment
Share on other sites

 

2 hours ago, GeS said:

i can't figure out how to remove this idiotic strip

 

Have you tried setting overflow: hidden on your body and/or whatever element you apply your scroll to?

 

If that don't work, you could try setting 'overflow: hidden !important' to .smooth-scroll.

That did the trick for me in one example.

 

 

  • Like 4
Link to comment
Share on other sites

6 hours ago, akapowl said:

 

 

Have you tried setting overflow: hidden on your body and/or whatever element you apply your scroll to?

 

If that don't work, you could try setting 'overflow: hidden !important' to .smooth-scroll.

That did the trick for me in one example.

 

 

thank you, the decision with important helped

Link to comment
Share on other sites

  • 6 months later...

Hi there,

 

I've just found the horizontal scroll range was not updated when the window width was updated,

and some of the the items were hidden in the following example.

I'm struggling to fix the issue. I'd appreciate if you could advise how to update the horizontal scroll onResize.

Thanks :)

See the Pen 1e42c7a73bfa409d2cf1e184e7a4248d by GreenSock (@GreenSock) on CodePen

 

On 6/27/2020 at 7:48 AM, GreenSock said:

When I dropped that into your demo it seemed to work okay but I very well may be missing something: 

 

 

 

Link to comment
Share on other sites

Sorry mistakenly posted twice. ignore this please!

Edited by mitsuki
Mistake
Link to comment
Share on other sites

2 hours ago, mitsuki said:

I've just found the horizontal scroll range was not updated when the window width was updated,

and some of the the items were hidden in the following example.

I'm struggling to fix the issue. I'd appreciate if you could advise how to update the horizontal scroll onResize.

I just updated the demo. It's just a matter of using function-based values and setting invalidateOnRefresh: true on the ScrollTrigger. 

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

 

Does it work better for you now? 

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

Thank you so much for your quick support! 🙏

  • Like 1
Link to comment
Share on other sites

I can't reproduce that. Is there a secret to making that happen? 

 

To be clear, we really don't support 3rd party libraries like smooth-scrollbar here. We just provided that CodePen as a courtesy to show how it could interact with ScrollTrigger. 

Link to comment
Share on other sites

Going back and force makes it happen.

 

 

33 minutes ago, GreenSock said:

I can't reproduce that. Is there a secret to making that happen? 

 

To be clear, we really don't support 3rd party libraries like smooth-scrollbar here. We just provided that CodePen as a courtesy to show how it could interact with ScrollTrigger. 

 

Link to comment
Share on other sites

I found it happens with Apple's magic mouse.
When I use jumpy scroll wheel, it didn't happen.

Link to comment
Share on other sites

I've just found when it happens when ".pin-spacer" is showing up.

The contents inside pin-spacer is scrolling horizontally and causing the issue.

Link to comment
Share on other sites

1 hour ago, mitsuki said:

I found it happens with Apple's magic mouse.
When I use jumpy scroll wheel, it didn't happen.

I'm using a magic mouse and going back and forth and I cannot seem to reproduce the issue at all. Not even one. Can anyone else? 

 

Do you have browser plugins installed that might be messing with it? 

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