Scroll Base Animation Jerking While When Scroll Fast OR Scroll Reverse

Questions
1

Hi, I am trying to build scroll base animation of 3d model , when i scroll slow it works fine but when i scroll fast its messing up . I am using GSAP Scroll Trigger . Here is the Link : link

2

what’s the code? i just try it yesterday with an animation made on blender and its super smooth in my project. did you rotate and scale the glasses in your 3d sofware ?

3

i made it like this

mixer = new THREE.AnimationMixer(model);
let totalDuration ;

gltf.animations.forEach((clip) => {
const action = mixer.clipAction(clip);

action.play(); //dont knwo why i had to play and than pause instead of just pause
action.paused = true;
totalDuration = clip.duration;

gsap.to(action, {
time: totalDuration ,

scrollTrigger: {
trigger: “.section1”,
start: “top 20%”,
end: “+=150%”,
scrub:true,
//markers: true
}
});
});

4

if this is still relevant, animation should be interruptible and velocity based or else it will cause jerk in scrolly-telling (though the original link looks more like a real bug). generally prefer maath/easing over gsap for this specific usecase, it’s unity’s damping function and maxSpeed has been solving the issue in unity for ages.

see it in action here, scroll as hard/fast as you want, it won’t skip, set it to maxSpeed={Infinity} and you’ll see the difference

the example is react, maath is a vanilla library