Scroll trigger bug

[dhruv_07]

Hii guys, I am new to gsap and scrolltrigger and I really need your help.

 

The issue is I am making one project where I am using scrolltrigger for triggering few basic animation like moving object. But I have found this bug which is if I have scrolled till the middle of and reload the page. Then scrollTrigger stops working. I even tried to observe markers and found that after i reload the page they kinda jump to random place, sometimes at top of page sometimes somewhere at the middle of page.

 

I can't really recreate the demo because in demo it kinda seem fine working. Please help me out!!

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; You could look in to refreshPriority or make sure the ScrollTrigger are created in order they appear on the website, but the issue could also be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

Quote

 

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

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

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[dhruv_07]

As I said I am not able to recreate this bug in demo. But its fine now, I gave hardcore scroll value to start and end so that they dont jump at random place. But I still don't understand what caused this problem. Acc to your experience what could have gone wrong, have you seen such bug before somewhere else. Or is it something I did wrong because of my insufficient working knowledge of gsap

 

 

[Rodrigo]

Hi,

 

This could be because your're using an older version of ScrollTrigger, always make sure to use the latest one. 

 

Other possibility is that some images are loading and being rendered after the ScrollTrigger instances are created, that makes all the calculations made by ScrollTrigger to be off and not work properly. In those cases is a good idea to run the refresh method after all the images are loaded.

 

Be sure that your ScrollTrigger instances are created in the order they appear in the screen.

 

The fact that you need a hardcoded end value tells me that for some reason some elements don't have their natural height when ScrollTrigger instances are created on a reload, but it still a bit odd since it works on the initial load.

 

Once again, without a demo that clearly illustrates the issue we're just taking blind guesses here 🤷‍♂️

 

Happy Tweening!

[dhruv_07]

I am using cdn, so i dont think its problem with the version.

 

also I have added event listener "DOM content loaded". So when every thing is loaded after that my gsap scripts gets run. Plus its the text I am animating.

 

But anyways. Thank you so much for your help 😊

[Rodrigo]

Maybe try the window load event instead of DOM content loaded:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

 

Hopefully this helps.

Happy Tweening!