Help tweening array of arrays

[JamesGrubb 10 Likes (Newbie)]

Hello, in my codepen i'm trying to tween between two arrays:
 

const frameArray = new SVG.PointArray([
  [0, 0],
  [width, 0],
  [width, height],
  [0, height],
  [0, 0]
]);

and
 

const randomFrameArray = new SVG.PointArray([
  [0, width / 2],
  [width, 0],
  [width, height],
  [0, height],
  [0, 0]
]);

using the following timeline
 

tl.to(frameArray, 2, randomFrameArray );

the SVG.PointArray class produces an array of arrays and Im not sure if that is the issue? Thanks in advance

See the Pen GRyvrEV by limitedunlimited (@limitedunlimited) on CodePen

[OSUblake 18,454 Likes (Superhero)]

Hi James,

 

You can't animate a nested array like. There is the EndArrayPlugin that's built into GSAP, but you would need to create your animations in a loop.

 

let arrayOfArrays = [[1],[2],[3]];
let endArrayOfArrays = [[4],[5],[6]];

arrayOfArrays.forEach((arr, i) => {
  gsap.to(arr, {
    endArray: endArrayOfArrays[i],
    onComplete: () => console.log(arrayOfArrays) // [[4],[5],[6]]
  });
});

 

Also, it's pretty easy to animate points without a library.

 

 

[JamesGrubb 10 Likes (Newbie)]

Thank you for both solutions @OSUblake. I think I will try animating the points.