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.