emsee Posted June 25, 2020 Share Posted June 25, 2020 I have an array of objects that I'm trying to animate with gsap, but I'm confused about how to use callbackScope with an array? let array = [obj1, obj2, obj3 ... ]; gsap.to(array, { duration: 1, callbackScope: array, onUpdate: function () { console.log(this.objectProperty); } }); If I was tweening a single object, this would be a reference to the object, but with an array of objects, it doesn't work. Would it be better to loop through the array & create multiple tweens that way? Is there any way to get the scope of each object in the array within the onUpdate function? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 Hey emsee. Since you set the callback scope to the array, this refers to the array of objects in your code above. So you'd need to iterate through each element in the array if you want to get their values. For example you could do console.log(this[0].objectProperty, this[1].objectProperty, this[2].objectProperty); inside of your onUpdate. You can always just console.log(this) to see what the scope is Link to comment Share on other sites More sharing options...
emsee Posted June 25, 2020 Author Share Posted June 25, 2020 Thanks for the reply. Perhaps I'm using gsap wrong, but my understanding was that passing an array as the property to tween would apply the tween to each object in the array? But when I log this from inside the onUpdate function, I get a cyclic error. Here's a pen to demonstrate See the Pen wvMeXxP by highlyinteractive (@highlyinteractive) on CodePen I guess I hoped there would be some kind of target attribute that I could use to modify the objects during the tween Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 19 minutes ago, emsee said: I guess I hoped there would be some kind of target attribute that I could use to modify the objects during the tween There's a targets method that returns the targets of the tween. There's also a modifiers plugin that lets you modify values each tick. What's your end goal? Perhaps if you explain that we can help you get there. 1 Link to comment Share on other sites More sharing options...
emsee Posted June 25, 2020 Author Share Posted June 25, 2020 OK, I'll check those out. I'm trying to tween the properties of a set of generated objects - pretty much exactly what I've demo'd Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 There's also an endArray plugin that animates arrays to a target array. Your demo is not clear, that's why I asked for more information about your end goal. 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