Optimising my clouds CSS animation

I recently created an animation of a plane dropping bombs and clouds whizzing past which you can see on Codepen here, and see my article about it here.

I used a mixture of animation types, including GSAP and CSS animation. I was doing some investigation into how much memory is required to run these animations (because it made my laptop’s fan come on all the time!) and found that the way I was animating the clouds in the background really wasn’t efficient.

You can see by inspecting using Chrome’s devtools that each cloud is causing a repaint every frame.

I thought if anything, it’d be the GSAP javascript animation that’d have the worse performance, but it turns out they’re actually ok because I’m using CSS transforms which are hardware accelerated.

The clouds are animated by moving them by position: absolute; Which is really inefficient, and you can actually tell it’s not always so smooth because it sometimes jerks between whole pixels, while things that are transform translated will antialias properly.

I could have animated the clouds with GSAP, but to get them to come back on after leaving the screen, as well as making sure they have a random-looking start position requires a fair bit of code. Whereas a CSS animation is pretty simple and concise using an animation-delay.

Here’s the old animation code:

@include keyframes(animate-cloud-horizontal) {
 0% {
    left: calc(-50vw + 50%);
    transform: translateX(-100%);
 }
 100% {
   left: calc(50vw + 50%);
   transform: translateX(0);
 }
}

And the new, using transforms:

@include keyframes(animate-cloud-horizontal) {
 0% {
    transform: translateX(0px);
 }
 100% {
    transform: translateX(calc(-100vw - 100%));
 }
}

Looking through Chrome dev tools there’s now a lot fewer repaints, the animation is much smoother, and it doesn’t make my laptop”s fan go like crazy!

Now the only repaint is the spritesheet animation for the pilot’s scarf, and the explosion animations.

You can see the updated thing on Codepen here.

Next – Making the animation interactive.