Jump to content
GreenSock

JamesGrubb

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]
]);

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

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