Jump to content


Help tweening array of arrays

Go to solution Solved by OSUblake,

Recommended Posts

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]


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

Link to comment
Share on other sites

  • Solution

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.



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