Jump to content


animating portion of an array

Moderator Tag

Recommended Posts

Hi again, i broke couple of walls banging my head, trying to figure out this one.

In example  below, initial animation works fine, than after it ends, you can click dark area and from that event wave spreads out on all squares, thats ok, but i wan't to limit spread area to only (x) squares from square that was at epicenter of this wave, so i can't figure out how to limit animation to portion of whole array, array is drawn on canvas in this sequence








array named 'tiles' hold all objects, function 'reanim' is called to start onClick animation.

x_elem is an number telling us how many squares are in x axis.

y_elem is an number telling us how many squares are in y axis


i did try, slicing array, limiting grid to numbers, i eaven did endArray which slowed down browser to crawl.


Best option was clearing array and making new one that consisted of selected squares, but any onther square outside of selected range was not shown.

All of this is inside 'reanim' function


See the Pen BaZGdRO?editors=0010 by Liquidator (@Liquidator) on CodePen

Link to comment
Share on other sites

  • Liquid changed the title to animating portion of an array

I think you need to start watching some Coding Train videos. I'm pretty sure something like this has been done before.



The Game of Life might be a good one to start with.




But the basic idea is that you should store your tiles in 2D array. 



There's a bunch of different ways to create a 2D array, but something like this.


let tileGrid = [];
let rows = 5;
let cols = 10;

for (let y = 0; y < rows; y++) {
  for (let x = 0; x < cols; x++) {
    tileGrid[y][x] = ...;


Then you can easily figure out what tiles are to the top, left, right, bottom of the tile you are animating out from. 


  • Like 2
Link to comment
Share on other sites

Cheers OSUBlake, will read and watch it. thanks

Link to comment
Share on other sites

this so called game of life is allready in the code, i was thinking along the lines of passing an extra param as array of indexes that are in the main array of objects, and indexes in that array that we pass as an extra param will tell gsap to animate those indexed objects only ofcourse i will have to sort this indexes  and animation will start from first element.


I think i can go this way but explicitly create gsap.to() in for loop or timeline for better control of flow, which won't be so neat as just one line of code as it is now


let ofseter = 32;
// where SelectedElements is an array of indexes to animate
gsap.to(tiles, { animateOnly:SelectedElements, x:"-="+(ofseter/2),y:"-="+(ofseter/2),width:"+="+(ofseter),height:"+="+(ofseter),duration:1,stagger:{grid:[x_row_elem,y_coumn_elem],from:selectedSquare,amount:0.75}});


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