Jump to content
Search Community

Use callbackScope with an array of objects

emsee test
Moderator Tag

Recommended Posts

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

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

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

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.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...