Simple Random Square Screen Animation

[Guest]

I have already read a lot of the documentation,
but I still don't know how to create a simple background animation,
filled with squares that randomly appear in a grid.

If someone could briefly explain to me how to do this, it would be a great help.

[mvaneijgen]

Hi @danielhill1982 welcome to the forum!

 

6 minutes ago, danielhill1982 said:

I have already read a lot of the documentation,

The beauty of GSAP is that you can build anything you like. There is probably a tool someone made that is called backgroundAnimationGrid.js which does exactly what you like, but tomorrow you want to animated circles in a random pattern, so you need to search for circleRandomPattern.js, this is how I started until I've found GSAP, now I have a tool that can really animate what ever you like and you never have to search again for a specific tool that does one thing.

 

The docs are there to familiarise you with the tools, but it doesn't explain specific things, because that would be infeasible, because everything is possible and we cant make tutorials for everything.

 

10 minutes ago, danielhill1982 said:

but I still don't know how to create a simple background animation,

Everything starts with HTML and CSS, so start by creating your layout. From your description I would start by creating an CSS Grid with the amount of rows and columns you like, that create elements to fill that grid. 

 

12 minutes ago, danielhill1982 said:

filled with squares that randomly appear in a grid.

When you've your layout you could than look in to the stagger docs https://gsap.com/resources/getting-started/Staggers/ (it has a visual example, which already is a grid of boxes) which has a random option. The best way to learn is to get your hands dirty, open up the Codepen below (which loads all the tools) and focus on your layout at first. Then try experimenting with a single tween and add the stagger to it. Check out this awesome getting started guide https://gsap.com/resources/get-started/ 

 

When you get stuck, post back here with what you've tried and we'll be happy to point you in the right direction. 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

[Guest]

Thank you very much for the quick answer.
I took the examples and tried to remove some parts and change the values so that it would be the way I wanted it.
I would prefer a small, manageable code snippet.
I have so much to learn in web development that I am a bit overwhelmed.
I have also used GUI for a long time.
I would be happy if I could prove my programming skills in a specific language. :)

See the Pen eYwgjem by danielhill1982 (@danielhill1982) on CodePen.

[mvaneijgen]

Editing code from other people is nice to learn some quick logic things, it is great to modify it and see what is happening, but the best way to learn is then try to make your own. That example you've used is a bad example (not of the code being bad), because it does a lot of setup that is totally not necessary if you want to build your own animation. 80% of the code is just setting ups the grid, which is just drawing some boxes called <div class="box">, which you can just as easily do by hand. 

 

Check it, I've removed all unnecessary code and just focused on the animation, this results just in 10 lines of code! I do have to say that getting the grasp of HTML and CSS is some what important if you want to build animations with GSAP, so I would definitely not skip that step!

 

What I've done to get here is open up the Chrome DevTools in the browser and copied the code that was used to generate the boxes and then placed that in the HTML tab. I find that how this is setup up is a bit old school, because doing this with CSS Grid is 100% more simple, see guide here https://css-tricks.com/snippets/css/complete-guide-grid/

 

Hope it helps and happy tweening! 

 

See the Pen ExBZeKX?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Rodrigo]

Hi,

 

As Mitchel mentions we have some documentation that can help in this:

https://gsap.com/resources/getting-started/Staggers

 

Happy Tweening!

[Guest]

I wouldn't have thought that so much relevant code would be left.
This is a good and quick solution, thank you very much!

Best regards,
D.
 

https://danielhill.vercel.app

[Carl]

the solution that @mvaneijgen posted is certainly the best way to get a bunch of elements to fade in and out randomly. It's really amazing how gsap allows us to do such things with such a little amount of code!

 

If by chance you want a random amount to fade in while a random amount fades out, you may find this helpful:

 

See the Pen BagpPzx?editors=0010 by snorkltv (@snorkltv) on CodePen.

 

[Guest]

I'm back with a solution that puts everything else in the shade.
I ask an AI Copilot and get the following result.
This is exactly what I wanted.
No idea why I hadn't thought of it before.
But maybe it will help some people here.

 

See the Pen JjQWPxP by danielhill1982 (@danielhill1982) on CodePen.

 

 

[Cassie]

Looks great! I'd probably still use a stagger for this rather than looping around though, personal preference. If you want to repeat each animation individually rather than the block as a whole you can move the repeat into the stagger block.

See the Pen abgJbvb?editors=0010 by GreenSock (@GreenSock) on CodePen.

[Guest]

I can't stop watching the animation.
🙂

In the AI version, the random animation escalated so that most of the squares appeared at the same time.

Further when the squares are apeared first time the animation is stuck in a loop now.

Do I have to animate every square at it's own?
 

Best regards,
D.