SVG animation on codepen

Creating animation with SVGs, CSS animations, spritesheets & GSAP

I’ve created an animation using a few different methods that runs in a browser and is responsive (works on both mobiles, tablets and desktop). You can see it here:

See the Pen SVG animation of plane using GSAP by David Ball (@davidonionball) on CodePen.

Although you probably want to get the full effect on Codepen here.

CSS animations

I’ve used a CSS keyframe animation for the clouds, and moving the scenery. Very basically, this moves the clouds from the very right to the very left. This animation is declared once as a mixin (using SCSS), and is added to each cloud individually, so the appropriate speed can be set. To make sure the starting value looks a bit random and the clouds are evenly distributed, I’ve given each cloud a different animation-delay time of a random number, making it look like the animation’s already started when the page loads.

GSAP timeline animation

I’ve been using GSAP (Greensock) recently and it’s so useful. I used TimelineMAX, which allows you to make a timeline of tweens, and adjust the timings without having to mess about adjusting percentages like you’d have to with a CSS animation. The GSAP timeline makes the bomb fall to the floor by adjusting a transform position and rotation, and then trigger the explosions to show by changing them from display: none, to display: block. Then moving them left to make it look like we’re leaving them behind.

Spritesheet animation using CSS keyframes

The explosion contains 7 frames on one image, and uses a CSS keyframe animation to move it horizontally between the frames. You can use the steps() property of the animation so jumps to each frame instead of animating across. I also used animation-fill-mode: forwards to always stay on the last frame so that it doesn’t loop. These animations will play once when first shown. Nice and easy.

Spritesheet animation using GSAP

Just because I like the experiment with different methods, I animated the pilot’s scarf using GSAP. It’s the same method as the explosions, but using a separate GSAP timeline which uses transform: translate to move through the frames and repeats infinitely.

I can’t actually think of many advantages of using GSAP for this, except if you wanted control over pausing it or changing the speed dynamically.

Here’s a video of the animation:

If you’re wondering where the graphics came from, I’d already created them as vector files for my Chicken Fokkers Android game which you can get here, and I’ve written about progress here.

Next – I optimise the animation of the clouds.