Animating nested proprties in Three.js

[SteveS]

I feel like I'm going crazy but I can't seem to find any examples or questions regarding animating an array of objects that have inner properties.

 

1. I have an object itemsRef
2. itemsRef.current is an array of threejs objects
3. on load, I want to animate those objects in by animating their position.x property

The resulting tween is:
 

gsap.from(itemsRef.current, {
            position: {
                x: 10
            },
            stagger: 0.5
        })

However, this does not work due to the fact that that it attempts to set the value for position which is not allowed by threejs and throws an error. You are only allowed to set the values for position.x, position.y, or position.z, but not position itself.
Surely there is a built in solution to this that I am just missing?

 

[OSUblake]

Hi Steve,

 

Since position is an object, you would need to target that.

 

gsap.from(myObject.current.position, {
  x: 10
})

 

But since you say itemsRef is an array, then you would probably need to map the position objects into an array kind of like this.

 

let positions = itemsRef.current.map(item => item.position);

gsap.from(positions, {
  x: 10,
  stagger: 0.5
})

 

[SteveS]

Thanks for the suggestion, but it doesn't work. Mapping through and returning an array returns the positions objects for each ref. I need to modify the position on the ref object itself. Is there really no way of targeting nested properties?

For example:

gsap.from(itemsRef.current, {
position.x: 10
}

or

 

gsap.from(itemsRef.current, {
position["x"]: 10
}

?

Edited February 8, 2022 by SteveS
Added examples of a desired solution

[OSUblake]

Did you actually try it? Objects use references, so it shouldn't matter. If it really doesn't work, can you make a minimal demo, because it should be no different than doing this.

 

let pos = myObject.position;

pos.x = 100;

 

 

[OSUblake]

14 minutes ago, SteveS said:

Is there really no way of targeting nested properties?

 

No. That's why I was showing you how to properly target the position object. There's a three plugin of sorts you can try here, but it's not officially supported.

 

 

Usage should be like this.

 

gsap.to(myObject, {
  three: {
    x: 10,
    scale: 2
  }
});

 

[SteveS]

I did try the map method with no success. The plugin... kind of works? I'm able to animate the property now so I suppose its a viable solution, but I'm getting some extremely odd behavior. Could just be from my setup though, I'll take a stab at debugging tomorrow.

I would post a codepen but the amount of code required is not trivial. If issues persist I'll set one up though. I'm surprised to find that GSAP doesn't support nested properties in the way I thought it might.

[OSUblake]

9 minutes ago, SteveS said:

I'm surprised to find that GSAP doesn't support nested properties in the way I thought it might.

 

It never has. Any objects that are inside the vars/config are reserved for plugins. Everything else must match up to a valid number/string property on the target.

 

gsap.to(myTarget, {
  somePlugin: {
    x: 100
  }
});

 

But what confuses me is that you are saying the map thing I showed doesn't work, when it clearly does in this demo. 🤷‍♂️

 

See the Pen dyZNKMR by GreenSock (@GreenSock) on CodePen

 

 

[SteveS]

I had tried it even before making the post, then again after you suggested it and now I finally got it to work. I am using react-three-fiber and I moved the tweens outside of the useEffect and into the first frame of the render loop and it now works. Probably some type of render order issue on my end. Thanks for the help.