Normalize delta scrollsmoother

[mapo studio srl]

Hi! I do a lot of research but i can't resolve this thing. Maybe it's the delta normalization of smoothscroller. As you can see in my pen if you scroll really fast the animation is not smooth. It is an easier example of a complicated morph particles on scroll in threejs but the fact is the same. I try to use preventOverlaps and fastScrollEnd but maybe i can't understand as they works. If look at this website: https://dnacapital.com/ and try a big scroll it is has a very good normalization of delta. So i think i have 2 problems: 1 is to understand as preventOverlaps and fastScrollEnd works and second the delta of the scroll. Can anyone help me? Thank you

See the Pen vYdwLGQ by aboutluca (@aboutluca) on CodePen

[akapowl]

Hello @mapo studio srl

 

I think it works pretty well, but I also think your markers are not where you actually want them.

 

I don't think you can use vh values with ScrollTrigger and I also don't think something like "top+=100% top" would work - so you could just tap into the window.innerHeight instead.

 

Now because you are mixing "%" and "vh in your code, I think your triggers are just totally out of position and thus causing problems. This here works very smooth e.g.

 

See the Pen poamRwX by akapowl (@akapowl) on CodePen

 

 

 

If you want/need to use vh though, maybe this older thread can help with that

 

 

 

 

Also @GreenSock - little side-question: 

 

The immediateRender: false is on the scrollTrigger here - and I have seen you put it on the ScrollTriggers too, in a different thread.

 

Now I am only used to putting it on the tweens themselves - but is that actually wrong? ...does the immediateRender actually belong on the ScrollTrigger (and is that always the case) ?

 

[GreenSock]

46 minutes ago, akapowl said:

Now I am only used to putting it on the tweens themselves - but is that actually wrong? ...does the immediateRender actually belong on the ScrollTrigger (and is that always the case) ?

ScrollTrigger will look for it in both places. The reason it's not **only** in tweens is because you can put a ScrollTrigger on a timeline too. So that's the primary place, but for convenience it also looks in the tween's vars if the ScrollTrigger is on a tween rather than a timeline. Good question.

[akapowl]

 

I see - thanks for clearing that up

[mapo studio srl]

@akapowl ok sorry i make more real demo, the first example was too far from it. First: i write fast the code so the step as you suggested was already used on the real one. I use immediate render false because of if you moving particles without it you loose the position reached in other animatios.

 

Here you can find the pen updated. As you can se if you scroll fast the particles moving too fast.

 

 

 

[akapowl]

 

I'm actually not sure what it is you are asking, sorry.

 

2 hours ago, mapo studio srl said:

Here you can find the pen updated. As you can se if you scroll fast the particles moving too fast.

 

If you want them to move slower, increase the distance to scroll, as that will be what determines the 'speed' of the animation, since the animation will get spread out between start and end of a scrubbing ScrollTrigger.

 

If you mean that the 'transitions' in between the different tweens are to hard, then I'm pretty sure that this is not related to ScrollSmoother's delta, but rather to the easing on the tweens - GSAP by default adds a a power1.out ease to tweens - so most often for scrubbin it would be best to set ease: 'none' to the tweens.    

 

See the Pen KKQLByY by akapowl (@akapowl) on CodePen

 

 

 

But since from what I understand, you want things to blend together smoother in between, just play with the easing of the tweens - here is an alternative with 'power1.inOut' set to both tweens, so you can see the difference.

 

See the Pen xxYNzvb by akapowl (@akapowl) on CodePen

 

 

 

Also, I just want to mention, that the website you linked probably isn't a good reference for what you are trying to do, because as it looks to me they are just continuously rotating those helixes in one direction over the whole distance - so of course it looks smooth throughout - but you do have changes in direction, that you need to find the right easing for to feel smooth in between / blend together nicely.

 

But as already mentioned, I'm not even sure I really understand what exactly you mean with your question. I hope this will help, though.

 

And as a little sidenote:

 

Don't do this:

 

var st1Tl = new gsap.timeline({...})

 

There is no need for the new keyword - gsap.timeline is enough.

 

var st1Tl = gsap.timeline({...})

 

[mapo studio srl]

9 hours ago, akapowl said:

 

I'm actually not sure what it is you are asking, sorry.

 

 

If you want them to move slower, increase the distance to scroll, as that will be what determines the 'speed' of the animation, since the animation will get spread out between start and end of a scrubbing ScrollTrigger.

 

If you mean that the 'transitions' in between the different tweens are to hard, then I'm pretty sure that this is not related to ScrollSmoother's delta, but rather to the easing on the tweens - GSAP by default adds a a power1.out ease to tweens - so most often for scrubbin it would be best to set ease: 'none' to the tweens.    

 

 

 

 

 

 

But since from what I understand, you want things to blend together smoother in between, just play with the easing of the tweens - here is an alternative with 'power1.inOut' set to both tweens, so you can see the difference.

 

 

 

 

 

 

Also, I just want to mention, that the website you linked probably isn't a good reference for what you are trying to do, because as it looks to me they are just continuously rotating those helixes in one direction over the whole distance - so of course it looks smooth throughout - but you do have changes in direction, that you need to find the right easing for to feel smooth in between / blend together nicely.

 

But as already mentioned, I'm not even sure I really understand what exactly you mean with your question. I hope this will help, though.

 

And as a little sidenote:

 

Don't do this:

 

var st1Tl = new gsap.timeline({...})

 

There is no need for the new keyword - gsap.timeline is enough.

 

var st1Tl = gsap.timeline({...})

 

Thank you, for sure the ease function helped but what i mean i think is probably the normalization function of the scrollsmother, that we can't customize right? @GreenSock In the site i linked when you make a very big and fast scroll it normalize more then scrollsmother. With scrollsmother with a big fast scroll i can go to the end of the page.

[GreenSock]

It really depends what you mean by "normalize". ScrollTrigger/Smoother uses native browser scrolling, so I'd call that very "normalized" but what I think you mean is actually non-normal, right? So if the user flicks their scrollwheel hard and it would normally scroll 2000 pixels, you want it to interfere and maybe only scroll 500 instead? That is not something we support directly, but you can of course manually do whatever you want using Observer and some custom code. 

[mapo studio srl]

On 6/21/2022 at 10:44 PM, GreenSock said:

It really depends what you mean by "normalize". ScrollTrigger/Smoother uses native browser scrolling, so I'd call that very "normalized" but what I think you mean is actually non-normal, right? So if the user flicks their scrollwheel hard and it would normally scroll 2000 pixels, you want it to interfere and maybe only scroll 500 instead? That is not something we support directly, but you can of course manually do whatever you want using Observer and some custom code. 

 

I really tried a lot of coding and a lot of reasearch but i can't figure out... i tried to use ScrollTrigger.normalizeScroll but i can't edit the delta because it's only a reading parameters. Also tried with scrollProxy that has a setter method but on scrollsmoother but not works...  You say that is possible to set a max delta on scrollsmother with observer, how?

[Cassie]

Hey there!

 

If you take a look at the Observer docs there's a demo of using it to do a 'custom' scroll effect.

https://greensock.com/docs/v3/Plugins/Observer

I'm not certain what it is that you're trying to achieve though I'm afraid - but maybe that will help?

[mapo studio srl]

1 hour ago, Cassie said:

Hey there!

 

If you take a look at the Observer docs there's a demo of using it to do a 'custom' scroll effect.

https://greensock.com/docs/v3/Plugins/Observer

I'm not certain what it is that you're trying to achieve though I'm afraid - but maybe that will help?

 

 

Hey! Thank you! Maybe i'm not so clear. I try to repeat: using gsap scrollsmoother can we edit the max delta scroll ? Like adding a custom normalize function? I want to avoid big scroll... on mobile with a big swipe i can scroll all the website... I want to set a limit of scrolling to x on big scroll or big swipe! Thank you

[Cassie]

I think as Jack said - 

Quote

That is not something we support directly, but you can of course manually do whatever you want using Observer and some custom code. 

Maybe he can elaborate more though?

[akapowl]

 

Maybe this can help give you an idea for how to approach something like that with the Observer Plugin.
 

 

[GreenSock]

10 hours ago, mapo studio srl said:

I really tried a lot of coding and a lot of reasearch but i can't figure out... i tried to use ScrollTrigger.normalizeScroll but i can't edit the delta because it's only a reading parameters. Also tried with scrollProxy that has a setter method but on scrollsmoother but not works...  You say that is possible to set a max delta on scrollsmother with observer, how?

 

I just meant that you could use Observer because it gives you the delta and then YOU apply the scroll yourself directly to the window (or whatever). 

 

Pseudo code just to give you an idea:

Observer.create({
  type: "wheel,touch",
  preventDefault: true,
  onChangeY: self => {
    let y = Math.min(500, self.deltaY);
    self.scrollY(self.scrollY() + y); 
  }
});