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?