I have one gtlf model with two animatios i used mixer with gsap scrolltrigger to run animation[0] in section-four i want to run animation[2] in section-five, this is my code and the live examlpe :

[moody 0 Likes (Newbie)]

 

 

const assetLoader = new GLTFLoader();

 

var mixer;

var model;

 

assetLoader.load("https://cdn.glitch.global/5213cd0b-d594-4b34-9064-2f1f38b42c78/cube33.glb?v=1665271977633", function(gltf) {

 

  gltf.scene.traverse(function (node) {

    if (node instanceof THREE.Mesh) {

      object.frustumCulled = false;

      node.castShadow = true;

      node.material.side = THREE.DoubleSide;

    }

  });

 

 model = gltf.scene;

 model.scale.set(1,1,1)

 

 model.position.setY(-1);

 model.position.setX(2);  

 model.position.setZ(-2);

 

 model.rotation.x = Math.PI / 2;

 

 model.rotation.y = Math.PI / 2;

 

 model.rotation.z = Math.PI / -2;

  scene.add(model);

 

  camera.position.z = 4;

 

          /// MIXER&ACTION  CONFIG///

 

    mixer = new THREE.AnimationMixer(model);

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

    action.play();

    var actiona = mixer.clipAction(gltf.animations[1]);

    action.play();

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

  }

);

 

var clock = new THREE.Clock();

function render() {

  requestAnimationFrame(render);

  var delta = clock.getDelta();

  if (mixer != null) mixer.update(delta);

 

  renderer.render(scene, camera);

}

 

render();

 

function createAnimation(mixer, action, clip) {

  let proxy = {

    get time() {

      return mixer.time;

    },

    set time(value) {

      action.paused = false;

      mixer.setTime(value);

      action.paused = true;

    }

  };

 

        /// GSAP  CONFIG///

 

function GSAP(){

 

gsap.registerPlugin(ScrollTrigger)

ScrollTrigger.defaults({

scrub: 3,

})

 

gsap.set(model.position, {x:-0.70,y:-1.80 ,},)

 

 

 

gsap.to(model.position, {

scrollTrigger: {

trigger: ".section-four",

start: "top top",

toggleActions: "restart play none reset",

//onLeave: myLeaveFunc,

    //onLeaveBack: myLeaveFunc

    end: '+=2000px',

 

},

x:-1,

y:-3 ,

 

});

 

let scrollingTL = gsap.timeline({

    scrollTrigger: {

    trigger: ".section-four",

    ease: "Power4",

end: '+=5000px',

 

      pin: true,

      scrub: 2,

      onUpdate: function () {

        camera.updateProjectionMatrix();

      }

     

    }

 

  });

  scrollingTL.to(proxy, {

    time: clip.duration,

    repeat: 0,

  })

 

       /// I NEED TO RUN ANIMATION [1] HERE ///

 

  let scrollingTL1 = gsap.timeline({

    scrollTrigger: {

    trigger: ".section-five",

    ease: "Power4",

    end: '+=5000px',

 

      pin: true,

      scrub: 2,

      onUpdate: function () {

        camera.updateProjectionMatrix();

      }

     

    }

 

  });

  scrollingTL1.to(proxy, {

    time: clip.duration,

    repeat: 0,

  })

 

 

 

}

GSAP()

 

 

 

}

 

[Rodrigo 5,424 Likes (Superhero)]

Hi @moody and welcome to the GreenSock forums!

 

Unfortunately is quite difficult for us to know exactly what the issue could be with the information you are sharing between the title and the code you posted.

 

Please try your best to create a minimal demo that illustrates in a simple way, what you are trying to do and the problem you are running into.

 

Happy Tweening!