Liquid

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

Cheers OSUBlake, will read and watch it. thanks

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 [0,5,10,20,etc 1,6,11,21,etc 2,7,12,22,etc 3,8,13,23,etc 4,9,14,24,etc] 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

Thank You OSUblake, i didn't want to go that route, Pixi or three , i know what those are and i was thinking Canavas should be sufficient, well , it is for now, till i really need to ramp up the game. Thanks to both of you Cassie and OSUblake for chiming in.

i came up with this, 2.5 times speed increase, was hoping for a bit more, maybe someone can take a look and improve some bits. I cant figure how to make circle at the beggining to transition into square, maybe some tips. https://codepen.io/Liquidator/pen/BaZGdRO To really see the difference run both as standalone, preferebly whole area visible without code.

Thank You , reading up.

Hi there, if it is possible i would like to request help of OSUblake, it's evidently visible than man knows 'how to'. Iin pointing me in right direction or/and help me to translate this into canvas for speed, since animation on it self works nice, but there is another object animated in webgl under it in final stage of deployment, so it suffers a bit. multiplexer is set to 10 , each square has 10px, if you set it to 40 or 60 animation is smooth but with allmost 2600+ squares as it is now you can see slowdown. On bigger view stage it can go up 20k+ particles, i would change particle count on working example to max 5k or less depending on performance. Only animating squares in canvas which will be placed in div id=content Thank you.

fully working "vision"/example on http://www.liquid.pl in "NEWS" section, works on mobile as well. This website was done in Flash before, i can't understand how much better it is now in html than it was in Flash, something is not right, Flash should be superior (biased opinion, i Love Flash).

Indeed, that did the trick. Thank You

I think this could be a solution "elementsFromPoint". Thank you I'm supprised You did not invent a plugin (targetMouseElement) to find element on given x,y returns array of elements. Potentialy useful thing. Thank you

Hi, this may be my first time, but i come form flash and twenMax era. This time i'm at the end and i'm about to give up. im creating squares(as div with own id and same class) put them into div so they do span on entire width and height of that div. its 1250 squares (there is another div above with text) and so far only hitTest can find underlaying elements, since they are covered with text which need scroll and clicks on links so i can't use pointer-events: none; Now, iterating through 1250 items in array to highlight square which is under mouse cursor is computationaly intensive but works. So i was wondering, instead iterating can i assign hitTest to those squares and when mouse enters its coordinates it will respond to that event. yeah, i know onMouseEnter and onMouseOut doe's not work since we do have element over it. in this example div of id "oko" follows mouse and is a hitTest Detector. Any other method or suggestion is appreciated to make it work, basicly what i need is to get div id under ursor to animate it's properties and when mouse is not over that square anymore i need to restore default look to square that was highlighted. Thank you for awesome years with gsap,twenmax and i hope for more to come. demo here http://liquid.pl/newsx.html Best Regards Liquid