SteveS Posted February 8, 2022 Share Posted February 8, 2022 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. I have an object itemsRef itemsRef.current is an array of threejs objects 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? Link to comment Share on other sites More sharing options...
OSUblake Posted February 8, 2022 Share Posted February 8, 2022 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 }) 1 Link to comment Share on other sites More sharing options...
SteveS Posted February 8, 2022 Author Share Posted February 8, 2022 (edited) 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 Link to comment Share on other sites More sharing options...
OSUblake Posted February 8, 2022 Share Posted February 8, 2022 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; Link to comment Share on other sites More sharing options...
OSUblake Posted February 8, 2022 Share Posted February 8, 2022 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 } }); Link to comment Share on other sites More sharing options...
SteveS Posted February 8, 2022 Author Share Posted February 8, 2022 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. Link to comment Share on other sites More sharing options...
OSUblake Posted February 8, 2022 Share Posted February 8, 2022 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 Link to comment Share on other sites More sharing options...
SteveS Posted February 8, 2022 Author Share Posted February 8, 2022 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now