Animation judders on scroll (Locomotive scroll with gsap & scroll trigger)

[thefrontendfreak]

Hello there!
facing a strange problem. When scrolling through the site the animation is working bit slowly or creating judders. Sometimes the scroll get slow as well. Please help me on this. 

One of the code sample :
 

 gsap.to('.aboutHero__semiTitle h2 .char', {

                    delay: .8,

                    y: 0,

                    opacity: 1,

                    ease: "easeInOut",

                    stagger: 0.004,

                    duration: .5,

                    lazy: false,

                    scrollTrigger: {

                        trigger: '.aboutHero__semiTitle',

                        scrub: false,

                        start: "top 70%",

                        scroller: ".smooth-scroller",

                        pin: 0,

 

                    }

                })

Cant share the codepen as the site is on my staging server right now
 

[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 CodeSandbox 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/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

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

[thefrontendfreak]

See the Pen wvygmBR by thefrontendfreak (@thefrontendfreak) on CodePen

here is the pan link. So if you scroll a bit fast or sometime on normal scroll you will see a slow animation or bug. Let me know if any pro can help me on this 

[GreenSock]

Yeah, it looks like you're using two different 3rd party libraries (not GreenSock products) and you're pushing the browser very hard with all those character animations that run simultaneously. Sorry, but we can't offer support for 3rd party libraries. 

 

If you have any GSAP-specific questions, we'd be happy to help.