Frame-by-frame animation, frame drops

[tomickigrzegorz]

Unfortunately, the animation is practically stop-motion.
I am attaching a screenshot of devtools with chrome. The green ones are successful frames at a maximum of ~25-27fps and the pink ones, unfortunately, are frame drops - ~20fps.

Testet on:
Chrome, chrome canary, opera, vivaldi, brave, edge
Windows

This behavior is practically the same in every browser

[hyperstown]

Performance of this app is directly associated with number of snowflakes rendered per frame.
There may be differences in framerate across systems and browsers however all of the browsers you tested are based of Chromium so the performance is expected to be the same.
Animation itself has not much room for improvement since it's based of CSS build in animation module.
Default snowflake count is set to 200. I tested it on few different systems and browsers and 200 seems to be good number for most of the moderns systems (Tested on laptop with 4th gen Core i5 integrated graphic and a PC with dedicated Radeon GPU).

If your system have trouble with the framerate I recommend changing snowflakes count to 100. (It still looks good)
It can be done adding <script>let total = 100;</script> before <script src="./pureSnow.js"></script> or changing snowflakesCount variable directly in pureSnow.js file.

With quick testing in VM on virtual GPU to simulate bottleneck, framerate jumped significantly after lowering snowflake count.
Chromium:

Firefox:

Can you also specify what hardware are you running?

[tomickigrzegorz]

4x 3Ghz processor and 1060nvidia card nothing special, but I saw the use of the processor, listening to the website with animation of over 50% of the use of 4 cores :)
I checked Firefox and it's ok with animation there, but still over 50% of CPU usage :)

[hyperstown]

Hmm with that configuration animation should work a little smoother. Try checking if you have hardware acceleration enabled.
Just checking i5 2c4t on Chrome, true, it is a little slow. 40% CPU. Firefox works better. Setting total snowflakes count to 100 smooths out quite a bit.
Seems there is no other workaround. Other possible solution would be to rewrite whole thing in WebGL but that's something for another project.
Closing issue for now.
If you find some other solution or you have some questions you can reopen this issue anytime :)