Gsap, smooth scroll for website

[taskemiura]

http://youkon.test.stratosfera.digital/

Hello everyone, please help me make smooth scrolling for this site, I have horizontal blocks and they hack my scroll ... my ass is already burning wildly from this xD
 

[ZachSaucier]

Hey taskemiura and welcome to the GreenSock forums. You can add smooth scrolling to your website using ScrollTrigger's .scrollerProxy() method paired with your favorite smooth scrolling library.

[taskemiura]

1 minute ago, ZachSaucier said:

Hey taskemiura and welcome to the GreenSock forums. You can add smooth scrolling to your website using ScrollTrigger's .scrollerProxy() method paired with your favorite smooth scrolling library.

Hi ZachSaucier! Thx for answer!!!

 

Do you mean that I have to use another plugin that's SmoothScrolling?

Smooth scrolling itself works for me, it's just that I have some blocks shifted through the translate: transform and smooth scrolling only work up to the height where this block starts, and not up to the block itself, before its actual beginning

[ZachSaucier]

13 minutes ago, taskemiura said:

Do you mean that I have to use another plugin that's SmoothScrolling?

ScrollTrigger very purposefully avoids doing any sort of scroll-jacking (which is what smooth scrolling functionality requires). However we allow you to support it through the .scrollerProxy() method. Yes, it requires adding another script. But the ones linked to are pretty small in size so it shouldn't be a performance issue in terms of loading another file.

[taskemiura]

3 minutes ago, ZachSaucier said:

ScrollTrigger very purposefully avoids doing any sort of scroll-jacking (which is what smooth scrolling functionality requires). However we allow you to support it through the .scrollerProxy() method. Yes, it requires adding another script. But the ones linked to are pretty small in size so it shouldn't be a performance issue in terms of loading another file.

Thx! I try to use .scrollerProxy() method

[karaulovskin]

I need help! why gives an error Uncaught TypeError: _ScrollTrigger.default.scrollerProxy is not a function

[ZachSaucier]

Hey @karaulovskin what version of ScrollTrigger are you using? Also please make a minimal demo that recreates the error so that we can see what's going on:

 

[karaulovskin]

using 

"gsap": "^3.3.4",

 

[ZachSaucier]

Again, please make a minimal demo if you'd like help debugging why this is happening. It's very hard for us to help blindly.

[karaulovskin]

1 hour ago, ZachSaucier said:

Hey @karaulovskin what version of ScrollTrigger are you using? Also please make a minimal demo that recreates the error so that we can see what's going on:

 

See the Pen vYGBZex?editors=0010 by Karaulovskiy (@Karaulovskiy) on CodePen

 project http://youkon.test.stratosfera.digital/

[karaulovskin]

tak i ne smog razobrat'sya s

 

28/5000

 

 

 

I could not figure it out with ScrollTrigger.scrollerProxy()

 

[ZachSaucier]

Sorry @karaulovskin, I don't understand what you're trying to accomplish and your demo doesn't show the error you mentioned. Can you better try to explain what's going wrong? 

[GreenSock]

For the record, .scrollerProxy() was added in 3.4.0. If you're using 3.3.4, it won't work

[karaulovskin]

14 hours ago, GreenSock said:

For the record, .scrollerProxy() was added in 3.4.0. If you're using 3.3.4, it won't work

thanks, updated gsap

[karaulovskin]

14 hours ago, ZachSaucier said:

Sorry @karaulovskin, I don't understand what you're trying to accomplish and your demo doesn't show the error you mentioned. Can you better try to explain what's going wrong? 

in this situation I need to add a smooth scrolling of the page, but I can't figure out how to implement it

[karaulovskin]

Help me to understand! i do as in your example 

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

 . I connect a third-party library for smooth scrolling - smooth-scrollbar, https://prnt.sc/tvp5fv 

See the Pen vYGBZex by Karaulovskiy (@Karaulovskiy) on CodePen

 at the time of initialization, the scroll breaks, which comes from GSAP !? On a combat project, in general, all animation breaks http://youkon.test.stratosfera.digital/local/templates/main/frontend/assets/main.html

[akapowl]

 

Hey @karaulovskin

 

Actually, you are not quite doing as what the example shows.

 

First things first: Your body has to be styled a certain way for smooth-scrollbar to work on the page.

That is what makes the scroll "break" - actually not "appear" at all - in your example.

 

 

Secondly: You don't even use ScrollTrigger's .scrollerProxy in your pen.

This part is totally missing in your code:

 

ScrollTrigger.scrollerProxy("body", {
  scrollTop(value) {
    if (arguments.length) {
      bodyScrollBar.scrollTop = value;
    }
    return bodyScrollBar.scrollTop;
  }
});

bodyScrollBar.addListener(ScrollTrigger.update);

 

It tells ScrollTrigger to work with the values of smooth-scrollbar plugin so it is rather important if you want to make ScrollTrigger work with a smooth-scrolling script like smooth-scrollbar.

 

 

Lastly:

It is a little tricky  to guess what exactly you want to achieve. Maybe make a demo of the exact effect you want to get without the use of smooth-scrollbar first. I think that would make it easier for others to help you.

 

 

I made a fork of your pen, that does most likely not show the effect you want to achieve, but it  shows how smooth-scrollbar works, and how to use ScrollTrigger's .scrollerProxy in the first-place, to make ScrollTrigger react to smooth-scrollbar's 'scrolling'.

 

See the Pen 6f3f9bb9052263468f90f18a0687ccdb by akapowl (@akapowl) on CodePen

 

 

Since this is rather complex in total, I suggest you dig into learning how to properly set up idiotwu's smooth-scrollbar first:

https://idiotwu.github.io/smooth-scrollbar/

 

and then you dig into how to integrate it properly with GSAP's ScrollTrigger via .scrollerProxy:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

 

 

Cheers,

Paul

 

 

[ EDIT: Exchanged codepen-link - now links the pen itself instead of the debug view ]

[karaulovskin]

On 8/7/2020 at 3:45 PM, akapowl said:

 

Hey @karaulovskin

 

Actually, you are not quite doing as what the example shows.

 

First things first: Your body has to be styled a certain way for smooth-scrollbar to work on the page.

That is what makes the scroll "break" - actually not "appear" at all - in your example.

 

 

Secondly: You don't even use ScrollTrigger's .scrollerProxy in your pen.

This part is totally missing in your code:

 

ScrollTrigger.scrollerProxy("body", {
  scrollTop(value) {
    if (arguments.length) {
      bodyScrollBar.scrollTop = value;
    }
    return bodyScrollBar.scrollTop;
  }
});

bodyScrollBar.addListener(ScrollTrigger.update);

 

It tells ScrollTrigger to work with the values of smooth-scrollbar plugin so it is rather important if you want to make ScrollTrigger work with a smooth-scrolling script like smooth-scrollbar.

 

 

Lastly:

It is a little tricky  to guess what exactly you want to achieve. Maybe make a demo of the exact effect you want to get without the use of smooth-scrollbar first. I think that would make it easier for others to help you.

 

 

I made a fork of your pen, that does most likely not show the effect you want to achieve, but it  shows how smooth-scrollbar works, and how to use ScrollTrigger's .scrollerProxy in the first-place, to make ScrollTrigger react to smooth-scrollbar's 'scrolling'.

 

 

 

 

 

Since this is rather complex in total, I suggest you dig into learning how to properly set up idiotwu's smooth-scrollbar first:

https://idiotwu.github.io/smooth-scrollbar/

 

and then you dig into how to integrate it properly with GSAP's ScrollTrigger via .scrollerProxy:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

 

 

Cheers,

Paul

 

 

[ EDIT: Exchanged codepen-link - now links the pen itself instead of the debug view ]

hi bro, i have in code - ScrollTrigger.scrollerProxy("body", {
  scrollTop(value) {
    if (arguments.length) {
      bodyScrollBar.scrollTop = value;
    }
    return bodyScrollBar.scrollTop;
  }
});

 

[karaulovskin]

How the *%$# can I get this garbage to work with each other?

[karaulovskin]

at the moment the animation using gsap is working correctly. 

See the Pen vYGBZex?editors=0010 by Karaulovskiy (@Karaulovskiy) on CodePen

 . Help please screw the smooth scroll

[ZachSaucier]

1 hour ago, karaulovskin said:

at the moment the animation using gsap is working correctly. 
Help please screw the smooth scroll

Here's how you could set it up with ASScroll. All I did was replace your content with the content from the demo in the docs:

See the Pen yLOYbMB?editors=1000 by GreenSock (@GreenSock) on CodePen

 

1 hour ago, karaulovskin said:

How the *%$# can I get this garbage to work with each other?

That's not very professional. If you think ScrollTrigger or GSAP is garbage then why not write your own that's better? Additionally we're helping you for free, so please at least be courteous and professional in the forums.

[karaulovskin]

4 minutes ago, ZachSaucier said:

Here's how you could set it up with ASScroll. All I did was replace your content with the content from the demo in the docs:

 

 

 

That's not very professional. If you think ScrollTrigger or GSAP is garbage then why not write your own that's better? Additionally we're helping you for free, so please at least be courteous and professional in the forums.

thank you bro, I didn't want to offend you in any way. It's just my bad English!

[akapowl]

 

Here is a suggested solution with the use of smooth-scrollbar (see bottom of this post) @karaulovskin

 

The thing with smooth-scrolling libraries, like smooth-scrollbar (don't know about ASScroll - but from what I have read somewhere in this forum, I think it might be easier to handle) is, that they pretty much change everything about the browser-implemented scrolling.

 

That means that you really have to try understanding what they do and how they handle things - otherwise you will run into problems with scroll-based-animations over and over again with no idea how to tackle them. And most of those problems will NOT be related to GSAP or ScrollTrigger at all - just to the way the browser-scrolling is being changed by those libraries. That's why I suggested you dig into how smooth-scrollbar operates and needs to be set-up in the first place.

 

These are the Greensock-Forums after all, and although they truly are SuperHeroes over here, they can't know everything about every JS-Library or plugin out there.

 

Hope the provided example is helpful and makes things bit clearer.

Cheers.

 

 

EDIT: Had a pen up, that showed the example with smooth-scrollbar. But somehow it only worked as intended in debug view with full-window, so I took it down for now - Don't want to spread any confusion

 

EDIT 2: This should be working fine now:

See the Pen 90d2b1ad119fae2d090d050276451896 by akapowl (@akapowl) on CodePen