My animation has an glitch issue while using scrollTrigger.

[Mohit Pain]

Hey everyone,

I'm trying to learn GSAP for a few weeks, so I'm new to this. While using GSAP on my project, I got stuck. The problem I'm encountering is with ScrollTrigger. I have uploaded a video on YouTube where you can see the issue. When I scroll down, my screen goes black, which is fine, but after a few seconds, an image comes up from below and is supposed to take its full size. However, as the image is coming up, there is a glitch, and it doesn't smoothly take its full width. please watch the video. please tell me why im getting the glitch and please correct my mistake.. and yes in my codepen sample i only posted JavaScript not html and css.

 

 

See the Pen qBGzKzX by Mohit-Mishra-the-styleful (@Mohit-Mishra-the-styleful) on CodePen

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could 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? 

 

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. ✅

[Mohit Pain]

45 minutes ago, GSAP Helper said:

Without a minimal demo, it's very difficult to troubleshoot; the issue could 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? 

 

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.

 

 

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. ✅

Sir my laptop screen is broken and i can see only upto 20% of my full screen perfectly,That's why i'm not able to post sample of my codepen. overall can you please tell me does glitch happens when we change height or width while scrolling? and does it also show glitch when we use left/right/top/bottom positions to move our items while scrolling?, and if they effect my animation's then what properties can i use?

[GSAP Helper]

ScrollTrigger pre-records all scroll-positions neccessary for it to work on page load.

So whenever you apply any changes on anything that would affect the dimensions (in vertically scrolling scenarios the height / in horizontally scrolling scenarios the width) of the document in any way, you will need to call ScrollTrigger.refresh() - typically once you're done with the changes.

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

That you should definitely do, but that is not saying that this is the sole cause for your 'glitches'. Without a minimal demo that clearly reproduces your issue, it is close to impossible to tell what exactly is causing it, as there might be other things involved.

So if you need ANY further assistance on this, please include a minimal demo that clearly reproduces your issue.

Also please make sure to read the forum guidelines - especially the addendum on why it is rude not to include a minimal demo.
 

 

[Mohit Pain]

6 minutes ago, GSAP Helper said:

ScrollTrigger pre-records all scroll-positions neccessary for it to work on page load.

So whenever you apply any changes on anything that would affect the dimensions (in vertically scrolling scenarios the height / in horizontally scrolling scenarios the width) of the document in any way, you will need to call ScrollTrigger.refresh() - typically once you're done with the changes.

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

That you should definitely do, but that is not saying that this is the sole cause for your 'glitches'. Without a minimal demo that clearly reproduces your issue, it is close to impossible to tell what exactly is causing it, as there might be other things involved.

So if you need ANY further assistance on this, please include a minimal demo that clearly reproduces your issue.

Also please make sure to read the forum guidelines - especially the addendum on why it is rude not to include a minimal demo.
 

 

sure sir,

next time i will post codepen demo. right now i'm facing some screen problem on my laptop because of some physical damage. so it is hard for me to write code's on my laptop, right now i can only see upto 20% of my screen. btw thanks for your answers.