Confusion of the ScrollTrigger.normalizeScroll

[Evil]

When I use ScrollTrigger in my code,which run in QQ browser,The origin Scroll is not good,it often "jump",lead to many bugs,So I use normalizeScroll to solve it. it works usually,but show a new bug. when I slide the screen fast and short,page ought to have slide some distance,in fact,it doesn't work,my page is just flash abnormally.any kind person can help me?For the sake of the truth that i consider my words which consume 2 hours with  English Dictionary

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

Hi @Evil welcome to the forum!

 

Without seeing the code with in some sort of minimal demo it will be hard to help. If you find English hard, just write in your native language (maybe somebody speaks it here) and let Google translate convert it to English en post that here. 

 

It sounds like your ScrollTrigger setup is not correct if you have jumping elements. Check out this tutorial which has a clear demonstration how ScrollTrigger/GSAP should work. Just copy that workflow and try implementing it in your own project. Simple is always better and keep in mind  ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Hope it helps and happy tweening! 

 

ScrollTrigger common mistakes

 

 

[Evil]

18 hours ago, mvaneijgen said:

Hi @Evil welcome to the forum!

 

Without seeing the code with in some sort of minimal demo it will be hard to help. If you find English hard, just write in your native language (maybe somebody speaks it here) and let Google translate convert it to English en post that here. 

 

It sounds like your ScrollTrigger setup is not correct if you have jumping elements. Check out this tutorial which has a clear demonstration how ScrollTrigger/GSAP should work. Just copy that workflow and try implementing it in your own project. Simple is always better and keep in mind  ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Hope it helps and happy tweening! 

 

ScrollTrigger common mistakes

 

 

See the Pen YzReYMB by Evil8768 (@Evil8768) on CodePen

thanks for your help very much!

excuse my lated reply becasue of the time difference.

there is the minimal demo,but i couldn't open it with my ios device becouse of the net wall, i just have opened it by my Pc device.

in pc device,it is not very smooth.but in fact,my Pc project is not use the Api: scrolltrigger.normalizeScroll，so i don't care it.

and I don't know whether it is recurrent in ios device because of the net wall in above.

can you find the problem use ios mobile phone in the safari or other browser when you slide the screen fast and short ?

 

[Rodrigo]

Hi,

 

I forked your codepen and only removed the wheel from the config (what was actually causing an odd behaviour in desktop. Any reason to include wheel events in the normalize scroll config? The vast majority of issues that normalizeScroll solves are iOS related and a few in android), here is the link:

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

 

Here is the link to the debug view (no iframes):

https://cdpn.io/pen/debug/LYXQMLe

 

I tested it on an iOS 16 iPad on Chrome and Safari without any issues and the desktop functionality is as expected. Maybe I'm missing something here 

 

Happy Tweening!