How to control GLTF animation while scrolling the page using Three.js + Gsap

Questions
, ,
1

Hi All,
We have a requirement where we need to animated the GLTF Object on page scroll. We have done the animation part with help of threejs+Gsap+Scrolltrigger. Now we wanted to play the animation for that particular section. I followed below example
https://threejs.org/docs/index.html?q=anim#manual/en/introduction/Animation-system
but it is playing the animation for every section.
Could you please suggest better solution.

Thanks

2

it is really isn’t more than this

actions.jump.reset().play().paused = true
...
actions.jump.time = actions.jump.getClip().duration * scroll // <--- normalized between 0 and 1

though i would suggest you do not use gsap but this GitHub - pmndrs/maath: 🪶 Math helpers for the rest of us (unity damp for threejs). there is a property called “maxSpeed” which is critical for scroll animation. the demo above uses that library as well. without this scrolling fast will make it go haywire, it won’t look good. maxSpeed clamps velocity so that the animation will move at reasonable speeds even if you go from 0-end instantly.

3

Hi @drcmda
I don’t want to trigger the animation all the time after the particular position when gltf model reached then I have to animate and I have to stop the animation when the gltf model reached in particular position.