Greensock scrollTrigger animation jumping when scrolling

[Giedre Kavaliunaite]

Hello,

 

this is one of my first tries with javascript GreenSock and I have run into this issue. For the animation I use ScrollTrigger that is initiated like his:

 

const tl = gsap.timeline({

    scrollTrigger:{

        scrub: 1,

        pin: "#animation",

        scroller: "#animation-container",

        end: "+5500",

        onLeave: function(self){

            self.disable();

            self.animation.progress(1)

        }

    }

})

 

and the animation goes like this

tl.to("#animation .scene-archfondas-telkia", {

    x: "-=" + x_diff,

    duration: 50

})

with several iterations of different elements moving from left to right. Div with animation is supposed to be pinned in place. But when scrolling sometimes it begins to jump around. You can see it towards the end in Chrome and in Safari is jumping almost during all duration of the animation. It looks like this: https://new.archfondas.lt/animation/. Is there a way to prevent the contents of pinned element from jumping around when scrolling?

[Rodrigo]

Hi @Giedre Kavaliunaite and welcome to the GreenSock forums!

 

I can see the jumping on Firefox but not in Chrome, on Ubuntu 20 and 22. Also I noticed you're using version 3.11.0 of GSAP and ScrollTrigger. A lot of stuff has been updated in the last month, so please try version 3.11.2 and see if that helps.

 

https://cdnjs.com/libraries/gsap/3.11.2

 

Beyond that I can offer you too much help, since is quite difficult for us to debug a live website. Please provide a minimal demo that replicates just the issue you're having and we'll have a look at it.

 

Happy Tweening!

[Giedre Kavaliunaite]

Hi and thank you!

 

I changed GSAP and ScrollTrigger to 3.11.2 but the issue remains.

 

Here I created Codepen which replicates jumping: 

See the Pen YzLaBrz by giedr-kavalinait (@giedr-kavalinait) on CodePen

As I tested on Mac OS Monterey animation is sometimes jumping in Chrome, but not always. It's jittery in Firefox and jumping around wildly in Safari. Have I missed some parameter to calm this jumping down?

[GreenSock]

It looks like Apple changed things again in Safari (and it's inconsistent with iOS). 🙄

 

Would you mind trying the beta version of the upcoming release of ScrollTrigger?:

https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Better?

 

You may need to clear your cache.

[Giedre Kavaliunaite]

Thank you! I tried with https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Animation now seems to be more stable in Firefox, but in Safari it's still jumping up and down.