Jump to content
GreenSock

Giedre Kavaliunaite

Greensock scrollTrigger animation jumping when scrolling

Recommended Posts

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×