Simple Animated Waves - Resource question

Just curious what takes up more memory or other resources a simple CSS
or a CSS working with JavaScript?

Since it’s a vague question missing some context, I’ll take a shot.

“Waves occur when the force of the wind blows over surface water, transferring its energy and causing the water to move in a circular motion. The rise and fall of water molecules creates a wave that moves in the direction of the wind.”

So waves are green and powered by wind, they therefore have no impact on a browser resources and memory. In fact they predate websites and the internet by some significant period of time.

:crazy_face::crazy_face: + :joy::joy: + :sunglasses::sunglasses: + :innocent::innocent: + :popcorn::popcorn:

More seriously though more detail is needed. For example if you were animating a box shadow with css it would take more resources than animating a font colour. With exception to using some old crappy android device you probably won’t be building a website that exceeds the ability of a browser on a simple system.

IMO it’s good practise to avoid using “all” when do transitions and animations with css, and be specific. Unless you understand the ramifications.

1 Like

You’re hilarious :rofl:

I just remembered someone mentioning in one of my post about the animated waves on the in the box store can only be used once on a page and does take up lots of resources. so I was just looking for another solution what if I want to animated areas? hence I was asking what’s taking up more resources.

Two Examples:


css & js|

To simplify your waves I would suggest using the waves bric instead of messing around with Codepen.
However, it seems to use a bit of resource as 6.4% for a page with only 2 waves is high.

Just my 2 cents while gazing at the waves early morning with a cup of coffee in my hand,
As they caress the sandy shores of our little island. :ocean: :desert_island:

1 Like

Thank you for your insights my friend. I actually like the wave bric. it so much easier to use. By the way I only put these code pin links just to show what I was referring to. I remember long time ago, maybe when the bric came out, I wanted to put two on the page. Someone told me it takes up too many resources, so it could only be applied once.