How can I stagger an array of elements?

[ddi-web-team]

Hello all.

First of all, I want to emphasize that this project is purely for practice purposes. I'm trying to get better at GSAP so any suggestions at all to improve my code or approach to this problem in any way are welcome.

 

I was inspired by the level change screen of the video game, Just Shapes & Beats. If you're not sure what this is, check out this video. I made sure to time stamp it so it starts at the exact point it happens.

 

I wanted to try to recreate this. To start, I programmatically generate 100 divs, attach event listeners to them, and use flex to space them out evenly. When a box is clicked, I use two arrays to separate the boxes that are above and below the target. Once I have those arrays, I loop through them and create a tween for each one that gets added to a timeline. Once that's done, I play the timeline.

 

Here's the problem I'm running into. Because I'm creating tweens for every item in the array, I don't really know how to stagger them. I can't just use a class, because that would target all of them and they need to animate differently based off if they are above or below where the user clicked. I tried adding a delay to each tween, but the problem with that approach is when the animation for the blocks above the user click happens, the last block is delayed the greatest which is the opposite of what I want.

 

That's my specific problem. But again, if you just have any general suggestions for a better way to approach this, I'd love to hear it. I'm still very much in the beginner stages of GSAP.

 

Thank you.

 

Edit

---

Here is a debug link. It seems to show the animation better than the preview window inside codepen. https://cdpn.io/DDI-Web-Team/debug/06180d06502c57364e0a0f3ae563e79f

 

 

See the Pen 06180d06502c57364e0a0f3ae563e79f?editors=1010 by DDI-Web-Team (@DDI-Web-Team) on CodePen

Edited September 16, 2020 by ddi-web-team
Providing debug link

[ZachSaucier]

1 hour ago, ddi-web-team said:

Just Shapes & Beats

That game looks great, haha  Added it to my wishlist. Definitely going to have some new songs in my chiptunes playlist. 

 

The transition between levels is also pretty neat. If you're going to try and recreate that sort of things exactly then using DOM elements is going to give you troubles when you start upping the screen size and number of elements. I'd recommend using Canvas or WebGL if you're going to try and recreate it fully.

 

GSAP's staggers can actually do a radial stagger based on a given index of the grid automatically. Getting the direction of the movement away from the clicked element is a little tougher but still very doable using the clicked element's grid position compared to the target's grid position. I'd set it up like this:

See the Pen NWNLqXJ by GreenSock (@GreenSock) on CodePen

 

I put some different methods of the movement that you can try out. It's fun to play around with. You can make some interesting effects by playing with the formulas and switching up the row and columns in the calculations.

 

Side note: You're not actually waiting for the page to load before you fire your init function. Not that you even need to have a load event listener in this case but I figure you'd want to know:

window.addEventListener('load', init()); // bad
window.addEventListener('load', init);   // good

[ddi-web-team]

Quote

That game looks great, haha  Added it to my wishlist. Definitely going to have some new songs in my chiptunes playlist. 

 

You won't regret it.

 

Quote

The transition between levels is also pretty neat. If you're going to try and recreate that sort of things exactly then using DOM elements is going to give you troubles when you start upping the screen size and number of elements. I'd recommend using Canvas or WebGL if you're going to try and recreate it fully.

Yeah I kind of figured as much. Doing it in a small container was more about trying to wrap my head around the logic before going to canvas as I'm not super familiar with it.

 

Thank you so much. This is awesome. I'm going to really dig into this because it's such a neat effect.

 

Finally,

 

oof, rookie mistake. I'm so used to using jquery that when I don't use it I make silly mistakes. Thanks for looking out!