Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
emsee

Use callbackScope with an array of objects

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 post
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 post
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 post
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 post
Share on other sites

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 post
Share on other sites

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 post
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.

×