In the latest revamp of the Swiss Air website, they introduced an interesting loading animation. It involved a bunch of planes flying around some text:
I thought it would be fun to implement that using SVG and CSS3 animation.
Linux: Chrome 29.0 ✘ , Firefox 28.0 ✔ Mac OS: Chrome 34.0 ✔, Firefox 29.0 ✔
First step was getting a plane on the screen. I wrote just one half of the plane in SVG and mirrored it to get the other half:
Improving the SVG for reuse
It is easy to see that there is a bit of repetition in there and SVG provides
symbol tags just to take care of this repetition:
This is more DRY and easier to reuse.
CSS3 animations + SVG
The basic animation is easy:
- Change the angle of rotation from
- Change the opacity of the planes from
So this should have been enough (modulo the browser prefixes):
I had stepped into the dicey world of CSS3 animations mixed with SVG and had to put up with certain browser shenanigans.
It seems that Chrome
34.0.1847.131 on Mac does not support
z axis movements on a
use element while the containing
g element has a
perspective set on it. (Cannot find an official bug report for this, though.)
Hence, to simulate the nearing and furthering of planes, I had to introduce scale3d(0.5, 0.5, 0.5), but, thankfully, only for Chrome:
The problem with this, however, is that
-webkit does not respect the z-ordering of the planes. Hence, sometimes, when the planes overlap each other with the one at the bottom appears to be on top.
This is one of the reasons that I chose to change the
opacity (instead of the
scale of the plane further away so that the erroneous overlapping becomes less noticeable. However, when we put some text at
z=0, the Webkit version is no longer going to work with the text either always atop other planes or below them.
Firefox, on the other hand, handles
z indexes without any problem.