Gsap + animationMixer

Questions
1

is it possible to get the progress value from gsap scrollTrigger and use it on a animationMixer to guide the timeline of the animation?

all the animations are loaded from a gltf along with the meshes. all animations are in the same mixer action = mixer.clipAction( gltf.animations[ 0 ] );

is it possible to use the 0-1 value from self.progress in scrollTrigger and map it to the animation?

2

any solution here ? i i keep posting questions here but no answers

3

Yes.
I just used the progress value from the scrollTrigger and multiplied it with the animation length and that was my new current animation time. So on scrollTrigger update your current animation time = scrolltrigger progress * animation length. I’m not near my computer so I can’t post my code, sorry. Maybe later I’ll try and do it

1 Like
4

great structuring !! , it will be helpful source if you post the code , thank you for the answer man i really appreciate it

5

It goes something like this. I think you can use just the scrollTrigger. And I deleted some code to make it a bit more clear. Just the onUpdate thing is important for what you’re asking. Sorry for the long wait, I was on holiday :sunny:



mixer = new THREE.AnimationMixer( gltf.scene );
action = mixer.clipAction( gltf.animations[0] );
clip = action.getClip(); 

// mixed, action and clip I just get directly from the gltf loader
let debug = {a:0}
function createAnimation(mixer, action, clip) {
  gsap.to(debug, {
          a:1,
          scrollTrigger: {
              trigger: '.smooth-wrap',
              start: 'top top',
              end: 'bottom bottom',
              scrub: 1,
              onUpdate : (self) => {
              	action.play()
                  let currentTime = clip.duration * self.progress
                  mixer.setTime(currentTime) 
              }, 
          }
      })
}
6

This is not working on mobile. Animations are off.

7

graet structure you made but the thing is its not working , i dont know what is missing here