How to correctly implement ScrollTrigger normalize scroll

[stefanobartoletti]

Given my following animation
 

import { gsap } from 'gsap';

import { ScrollTrigger } from 'gsap/ScrollTrigger';

 

gsap.registerPlugin(ScrollTrigger);

 

 

const icons = document.querySelectorAll('.icon');

 

 

icons.forEach(icon => {

gsap.to(icon, {

rotate: 180,

ease: 'linear',

duration: 10,

scrollTrigger: {

trigger: icon.parentNode,

start: 'top 100%',

end: 'bottom 0%',

scrub: 5,

}

});

});

 

I need to implement the normalizeScroll function on ScrollTrigger, but it is not very clear to me how to do it when using Scrolltrigger inside Gsap like in my example.

Can somebody help me?

[Toso]

no >>>

normalize: true

 

 

yes >>>>

ScrollTrigger.normalizeScroll(true)

 

 

ss @stefanobartoletti i get it wrong but leaving my wrong answer in case anyone else misunderstood 

 

 

 

 

 

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()/

[GreenSock]

No, that is not the correct way to do it. You can't just add normalize: true in a ScrollTrigger object.  It's not a per-ScrollTrigger setting. It's a global setting. 

 

Here is the correct way, as the docs indicate: 

ScrollTrigger.normalizeScroll(true);

Does that help? 

[stefanobartoletti]

Thanks for your replies.

 

From what I get, it should be called only once before all ScrollTriggers are set, am I wrong?

And once set, all my subsequent scrolltriggers will automatically use it?

[Rodrigo]

Hi,

 

Normalize scroll acts on tha way the scroll works, Soto speak. From the ScrollTrigger docs :

 

Forces scrolling to be done on the JavaScript thread, ensuring screen updates are synchronized and the address bar doesn't show/hide on [most] mobile devices.

 

As you can see it doesn't act on the way ScrollTrigger works directly but on the scroll, which obviously has an effect on how ScrollTrigger instances behave especially in devices.

 

Hopefully this helps

Happy Tweening!