Play animation with scroll

Questions
1

Hi, have a nice day, i try to find a way to play animation with scroll using gsap
like

 let scrollingTL = gsap.timeline({
            scrollTrigger: {
                trigger: canvas,
                start: 'top top',
                end: '+=500%',
                pin: true,
                scrub: true,
                onUpdate: function () {
                    camera.updateProjectionMatrix();
                }
            },
        })

        scrollingTL

            .from(mesh.animation, {
         
            }, 0)

any help plz?

2

Does the following topic solve your issue? The questions seem to be quite similar.

3

Oh i am sorry if i explain wrong , but my english is bad , i mean play mesh animation based on scroll , this animation

mixer = new THREE.AnimationMixer(gltf.scene)

         const action = mixer.clipAction(gltf.animations[0])

               action.play()
4

Do you mean you want to trigger the animation at a certain scroll position?

6

Yes, something like this .

7

Try it like so: https://jsfiddle.net/2q7z63ot/

The idea is to add an onEnter() callback function which is executed when the scroll position moves forward past the start. Use it to start your animation. If you want to execute this callback only once, set the respective configuration property to true.

The callback and the property are documented right here: Docs - GreenSock

1 Like
8

Yes but when i set the animation on enter all animation loaded in one time, i need to load animation based on scroll , is that can be made ? plz

9

@lolia try like this…?

let oldValue = 0;

window.addEventListener('scroll' , function(e){

var newValue = window.pageYOffset;

if(oldValue - newValue < 0){
    mixer.update( (newValue - oldValue) / 250 );
} 
else if(oldValue - newValue > 0){
   mixer.update(  (newValue - oldValue ) / 250 ) ;
}
oldValue = newValue;
});
1 Like
10

Yes i try this but i want to use gsap for more control

11

This is not working on mobile - the timing is completely off as is the animation.