EndArrayPlugin with array of objects

[larsvers]

Hello, 

 

when tweening an array of objects with the EndArrayPlugin  as described in the docs i get the following warning, without the array being tweened:

 

"Invalid property" 2 "set to" Object {
  x: 0,
  y: 0
} "Missing plugin? gsap.registerPlugin()"
"Invalid property" 1 "set to" Object {
  x: -3,
  y: 1
} "Missing plugin? gsap.registerPlugin()"
"Invalid property" 0 "set to" Object {
  x: 100,
  y: 100
} "Missing plugin? gsap.registerPlugin()"

 

Would anyone be able to tell me what probably basic mistake I make?

 

Many thanks!

 

 

See the Pen ZEWqqNE by doldinger (@doldinger) on CodePen

[GreenSock]

Sorry about the confusion there - EndArrayPlugin is purely for numerical values. I'm not sure why the docs indicated otherwise (that's fixed now).

 

It looks like you're trying to interpolate complex values (an Array with a bunch of object that have individual properties). There are actually MANY ways to do this, but probably the simplest is to use function-based values like this: 

See the Pen 40d05c6332f6b19a2af816a8b6046291 by GreenSock (@GreenSock) on CodePen

 

const arrOfObjects = [
  { x: 10, y: 200 },
  { x: -1.2, y: 5.13 },
  { x: 300, y: 600 },
];
const values = [
  { x: 100, y: 100 },
  { x: -3, y: 1 },
  { x: 0, y: 0 },
];

const arrayObjTween = gsap.to(arrOfObjects, {
  x: i => values[i].x,
  y: i => values[i].y,
  onUpdate: () => document.querySelector('.array-of-o').innerHTML = arrOfObjects[0].x,
  duration: 5
});  

Does that help? 

[larsvers]

That makes sense... Brilliant - thanks Jack! 

 

May I ask - would you have a reference to maybe one or two different ways of doing it? Would be great to see an alternative, that might be more appropriate in different situations. No worries if not of course.. 

[GreenSock]

1. You could use Array.map() to create an Array of just the numeric "x" values, and another for the "y" values and use endArray like:
   

   See the Pen c054f8b675d2a825f386d6419a120ef3?editors=0010 by GreenSock (@GreenSock) on CodePen

2. You could simply loop through the original Array and create a tween for each one, using the corresponding element from the other Array to populate the vars object. Optionally dump those into a master timeline so you can control the entire thing as a whole.
3. You could loop through and use gsap.utils.interpolate() to set up an interpolator for each object in the Array. You could then animate a simple number from 0 to 1 and feed that into each interpolator to get the appropriate values back. 

There are more ways too, but hopefully this gives you what you need

[larsvers]

Absolutely! Many thanks again Jack..