Issues to target .gltf Objects with gsap

[Boudi Salim]

Hello community, 

Hope that everyone is doing great,

I seem to have issues targeting .gltf objects in my THREE.Js scene with gsap for the animation. 

I've done an animation using gsap and THREE.Js Objects that work fine, we wanted to upgrade the THREE.Js objects to objects done with 3D Software and imported under .gltf extension. 

But when I call the gltf object, I have an error saying that the gltf is not defined. 

Maybe it's a simple issue, let me know if you have any idea how to make this work.

Thanks in advance.

See the Pen poPYOJj by Salim-Boudi (@Salim-Boudi) on CodePen

[OSUblake]

It sounds like the object might not be loaded when you created your animations. Make sure you wait for the load event.

 

I you need more help, please provide a minimal demo so we can see what's going on.

[Boudi Salim]

I've edited my post providing the minimal demo 😊

[nico fonseca]

Hey @Boudi Salim I saw a lot of errors on the demo, but regarding your question the problem is because you call gltf.scene.position before it loads.

[nico fonseca]

On this part of your code:
 

function (gltf) {
                
  gltf.scene.scale.set(10, 10, 10);
  gltf.scene.position.set(0, 0, 0);
                
  scene.add(gltf.scene);


  gltf.animations; // Array<THREE.AnimationClip>
  gltf.scene; // THREE.Group
  gltf.scenes; // Array<THREE.Group>
  gltf.cameras; // Array<THREE.Camera>
  gltf.asset; // Object

  gsap.to(gltf.scene.position, {
    scrollTrigger: {
      start: "top top",
      end: "10%",
      markers: false,
      scrub: true,
      pin: true,
      toggleActions: "restart pause resume pause"
    },
    x: 2,
    y: 2,
    z: -1
  });

},

 

[Boudi Salim]

Thanks for you reply @nicofonseca Any idea how I can solve the issue ? 

[OSUblake]

For reference, here's a post that uses a gltf model. Notice how I create the animations in the load event.

 

 

[Boudi Salim]

@nicofonseca @OSUblake Thanks to your help, I made the animation of my .gltf objects work ! 

 

Thanks a lot 🙏.