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

**URL:** <https://discourse.threejs.org/t/how-to-control-animation-made-in-blender-gltf-using-three-js-gsap/27319>\
**Category:** Questions\
**Tags:** gsap, blender, animation, gltf, threejs, scrolling\
**Created:** [June 17, 2021, 5:31pm UTC](https://discourse.threejs.org/t/how-to-control-animation-made-in-blender-gltf-using-three-js-gsap/27319 "2021-06-17T17:31:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![agodiniz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/agodiniz/32/18999_2.png) [@agodiniz](https://discourse.threejs.org/u/agodiniz)\
**Post date:** [June 17, 2021, 5:31pm UTC](https://discourse.threejs.org/t/how-to-control-animation-made-in-blender-gltf-using-three-js-gsap/27319/1 "2021-06-17T17:31:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [June 17, 2021, 7:22pm UTC](https://discourse.threejs.org/t/how-to-control-animation-made-in-blender-gltf-using-three-js-gsap/27319/2 "2021-06-17T19:22:29Z")

</div>

Here are two good starting points:

- Animation overview and documentation: [three.js docs](https://threejs.org/docs/index.html?q=anim#manual/en/introduction/Animation-system)
- Animation demo: [three.js examples](https://threejs.org/examples/?q=animation#webgl_animation_skinning_blending)

---

<div class="post-metadata">

**Author:** ![emoshaun](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/emoshaun/32/28776_2.png) [@emoshaun](https://discourse.threejs.org/u/emoshaun)\
**Post date:** [February 18, 2022, 5:27pm UTC](https://discourse.threejs.org/t/how-to-control-animation-made-in-blender-gltf-using-three-js-gsap/27319/3 "2022-02-18T17:27:39Z")

</div>

Curious if you ended up finding a good solution?

---

<div class="post-metadata">

**Author:** ![LeenAlfalah](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/leenalfalah/32/18835_2.png) [@LeenAlfalah](https://discourse.threejs.org/u/LeenAlfalah)\
**Post date:** [February 20, 2022, 7:14pm UTC](https://discourse.threejs.org/t/how-to-control-animation-made-in-blender-gltf-using-three-js-gsap/27319/4 "2022-02-20T19:14:01Z")

</div>

@agodiniz

hey,  
when you load your model set

```javascript
 mixer = new THREE.AnimationMixer(model);

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

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

     action.play();

```

then the function is

```javascript
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

---

<div class="post-metadata">

**Author:** ![peet88](https://avatars.discourse-cdn.com/v4/letter/p/3e96dc/32.png) [@peet88](https://discourse.threejs.org/u/peet88)\
**Post date:** [July 24, 2022, 10:51pm UTC](https://discourse.threejs.org/t/how-to-control-animation-made-in-blender-gltf-using-three-js-gsap/27319/5 "2022-07-24T22:51:59Z")

</div>

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