How to control animation made in Blender(GLTF) using Three.js + Gsap

Questions
, , , , ,
1

Hi Guys, I recently started on three.js.
I’m working on a personal project where I made the objects and animations using Blender.
I exported the GLTF file and imported it using Three.js. I would like to know how to counter the animation I made in Blender using Scroll.
Ex: As the user scrolls the animation, touches the frames and he can control this timeline using the scroll.

If you have an example, thank you in advance, thank you all. Sorry for the English.

2

Here are two good starting points:

2 Likes
3

Curious if you ended up finding a good solution?

4

@agodiniz

hey,
when you load your model set

 mixer = new THREE.AnimationMixer(model);

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

     createAnimation(mixer, action, gltf.animations[0]);

     action.play();

then the function is

function createAnimation(mixer, action, clip) {

    let proxy = {

        get time() {

            return mixer.time;

        },

        set time(value) {

            action.paused = false;

            mixer.setTime(value);

            action.paused = true;

        }

    };

    let scrollingTL = gsap.timeline({

        scrollTrigger: {

            trigger: renderer.domElement,

            start: "top top",

            end: "+=500%",

            pin: true,

            scrub: true,

            onUpdate: function () {

            }

        }

    })

        .to(proxy, {

            time: clip.duration,

        })

}

plz let me know if you need more help

1 Like
5

This is not working on mobile - try web inspector and resize from portrait to landscape.