ScrollTrigger displays a glitch on the div when scrolling the page

[Ivan Mocs 2 Likes (Newbie)]

I have a problem when using the scrolltriger outside of the OwnScroller class, when scrolling the ScrollTrigger has a glitch, but when I install it into the OwnScroller class, the scrolltriger is fine, how do I fix this?

See the Pen zYLaGXE by adeivan (@adeivan) on CodePen

[Cassie 5,122 Likes (Superhero)]

Hi there - Looks like you're trying to pin elements using position 'fixed' inside a transformed container. This isn't a GSAP bug - just a browser limitation.

You can use pinType: 'transform' to fix this.

Also just a heads up that we have our own scroll smoothing plugin that works around a lot of annoying edge cases and browser bugs. 
https://greensock.com/scrollsmoother/ 

[Ivan Mocs 2 Likes (Newbie)]

I have added pinType : tranform but when scroll like jelly:

See the Pen zYLaGXE by adeivan (@adeivan) on CodePen

 

this is when I put the scrolltrigger code into thisScroll(), the scrolltrigger can run perfectly:

See the Pen bGjKmEQ by adeivan (@adeivan) on CodePen

 

but how to make the scrolltrigger work properly like it does in thisScroll()?

[GSAP Helper 89 Likes (Contributor)]

Sorry, but it's very difficult for me to understand what you're asking. It looks like you're using a very old version of a basic ScrollSmoother that isn't full-featured. Is there a reason you're not using ScrollSmoother? We can't really support limited implementations like this one. 

If you're still having trouble, please make sure you make it extremely clear what the problem is what what you want to have happen, like: 
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

[Ivan Mocs 2 Likes (Newbie)]

1 hour ago, GSAP Helper said:

Sorry, but it's very difficult for me to understand what you're asking. It looks like you're using a very old version of a basic ScrollSmoother that isn't full-featured. Is there a reason you're not using ScrollSmoother? We can't really support limited implementations like this one. 

If you're still having trouble, please make sure you make it extremely clear what the problem is what what you want to have happen, like: 
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

Sorry about that, I'm just trying to learn without using plugins, in the code I only want the scrolltrigger to run outside the  class OwnScroller or onLoad() code, therefore I am confused why the scrolltrigger cannot run perfectly like I put the scrolltriger code inside onLoad().

Update : Solution found, thanks in advance