Rocket: Website: remove cloud animation?

[SimonSapin]

The website currently has a slow-moving animation of clouds in the background. It makes the browser use a lot of CPU. This in turn makes fans spin faster and generate more noise, and probably drains my laptop’s battery.

It looks nice but I didn’t even notice it at first, until I started looking for what could possibly be using so much CPU. Therefore I think not much would be lost by making the clouds static.

[rrichardson]

My issue with the clouds is that they're moving in the same direction that the rocket is pointing. They should be moving to the left to simulate relative motion. ;)

[SergioBenitez]

The clouds are indeed causing quite a lot of CPU usage. I've optimized the drawing rate to try to minimize the effect. The CPU usage has decreased on my machine by about 70%. Hopefully this is sufficient to consider the issue closed. I really like the clouds. :)

Oh, the clouds now go the other way, too! ☁️ 🚀

[rafbm]

The new requestAnimationFrame code seems to decrease CPU usage on Chrome indeed. Still feels high IMO. One sure thing is that Safari performs insanely better than Chrome on this. However, the SVG icon rendering in Safari looks blurry, reminiscent of 1x images rendered on Retina.

How about open sourcing the website into its own repo so the community can help with that stuff? 😃

[SergioBenitez]

Looks like we're okay on the clouds now. :)

@rafbm I plan open sourcing parts of the website, especially the guide, but I've struggled in choosing the right license. Happy to discuss this in #rocket. :)

[amarshall]

The homepage currently consumes 150% CPU usage in Chrome 64 (per Chrome’s task manager). Seems pretty high for an animation that’s not relevant to the content.

[LifeIsStrange]

I think the animation should be using CSS (GPU).
on local replacing the two cloud divs by spans (workaround for disabling the current expensive animation) make the cloud static.
then add the css class span.clouds {
background-position-x: -247.585px;
transform: translateX(-300px);
transition: transform 8s;
}
make clouds moove smoothly.
Values should be finetuned and reseting the position once reaching end of screen is not done (could be done in js)

[dmikusa-pivotal]

I still see quite high CPU usage as well (Firefox 68.0.1 MacOS). The animation is neat, but when I'm trying to read the docs and not looking at it, it's still killing my battery. Maybe stop it after a certain amount of time, number of iterations across the screen, or add a little stop button or something? Just a suggestion. I will use Safari for now.

[SergioBenitez]

@dmikusa-pivotal Agreed. This is bad. I've rewritten the code to use individual cloud images as opposed to two large images with the theory that the renderer should be able to reuse previously painted screens. This had reduced the CPU load by 200x on my machine. I will push the changes live as soon as I polish the implementation.

[SergioBenitez]

The fix in my previous comment has now been deployed!