Circle Animation Concept

In the latest months I’ve been working on a great open source project called MySensors, which is basically a home automation center based on different hardware configurations. While working on the user interface, I’ve also designed a new logo which quickly evaluated in a nice animation concept.
Since I’m a huge fan and supporter of CSS3 animations, I’ve decided to implement it using the “smooth” and “fast” technologies brought by the third version of cascading style sheets.
So finally I had the opportunity to test on the field which was the fastest, most affordable and cross-compatible way of implementing an animation.
To simulate a job situation, I’ve dedicated no more than 2 hours for each method. After having a look at the static picture, let’s begin this experience in the bravest way.

I’ll do it all and only with css3!

Well, as you can see from the picture, “painting” this image using only css is not that hard. For example the inner circle is nothing more than a div .innerCircle with border-radius property set at 50% and overflow one set to hidden. The content of the .innerCircle is a pie with 8 coloured slices. Each slice is a triangular div rotated by a certain amount of degrees, so they will finally appear as a freak coloured circle.
We all know how to implement a triangular div.Mix our triangles with some trigonometry and they are correctly rotated.
Now we give the right dimension to the circle and… BABOOM. Depending on which browser you are using, you may see horrible white lines between the triangles (webkit and firefox sometimes) or 1px wrong triangle height(webkit too) or why not, everything looks ok, but the circle is, well, simply not so circle (webkit and firefox).

See the Pen Ffrce by Edoardo (@edoardoo) on CodePen.

Well, it looks like this is definetely not the way of implementing our animations, but why? After researching a bit (don’t forget that time is a key factor in our job) I’ve seen some bugs reporting on the webkit rendering engine and even, if I remember correctly, somewhere on firefox mdn. They concerned some weird renderization of rotation while using, and abusing, the border property. Having a little search on stackoverflow confirmed my sensation of instability. No matter which translate 3d option or GPU acceleration you are using, it doesn’t always render correctly.

Vector Power Activated!

Ok, doesn’t matter, I’ll go with the SVG way. It will be fun scaling it like a five storey building. Let’s prepare 3 vectorial pictures like the following:

Full composition of the three SVGs

Then we write down some code and using the css3 rotation animation we’ll make it dance, finally. Nice, very smooth and scalable like hell (if you didn’t yet, zoom in and out the original like I’ve done for the latest 20 minutes). What about the real usage of this animation? If we have a look at the code we see that width and height, even if are set as scss variables, are still fixed. This means that if we want to use it in a production environment we’ll need to prepare some dimension classes, let’s say for example, .small .medium and .large, and we’ll be forced to implement a new class every time we need different dimensions. In other words, it’s scalable by an infinite factor, but every time we use it we may need to introduce a new piece of code. Possible solution: use the pictures with the img tag instead of background could solve the width and height problem, but… time is fleeting!

See the Pen Loading Animation MySensors by Edoardo (@edoardoo) on CodePen.

Oh yes, sprite it!

There’s still one last approach that I would love to consider: the sprite animation.
Basically we prepare a sprite with all the frames, and then we change the position background at the right speed to have the animation effect. Yes, it’s the same as the old vintage super 8 ( and all the analogic ) films.

The sprite is created with After Effect and a little help from the good old friend ImageMagick.
First we import the pictures inside AE. Then we add animation keyframes concerning the rotation of the the three images. Finally we export the the video result as PNGs frames (with alpha channel).

To make a unique sprite we go to the folder where all the frames have been exported and we launch:

[/crayon]

The final result is the following:

See the Pen Bdyaj by Edoardo (@edoardoo) on CodePen.

It looks pretty nice, but we still need to change manually the dimension when needed and after all, it doesn’t look that smooth, if compared with the svg version.

My reaction on 1.71 megabyte

So I was thinking Ok, but it’s still very stable and… WHOOOT?. That’s the moment when I’ve found that this sprite, since it’s 128px width with about 180 frames weights 1.71 Mega Byte.

Final Conclusions

I’ve tested three of the most interesting ways of implementing the animation’s concept, and what I’ve found is that there’s no one good way of implementing animations. Each animation has it’s own particular implementation and complication. I’ve spent almost two days testing them to have a point of reference where to start in the future.

Only Css3 way:

It’s nice, smooth and fast, but it could happen very quickly to become what I love to define CSS porn. A lot of weird workarounds to make work something which is not so ready, yet. If it starts to be too much time consuming because of bugs or strange renderization, it’s time to think about something else. Keep in mind that not all of yours visitors will have the latest Chrome or Firefox version.

Vectorial way:

Scalable like hell, extremely light (you could even make a little sprite vectorial image to limit server calls) but you’ll need to bang your head over a vectorial program for a bit. Anyway, it’s bloody sharp and smooth. This would be my main choice.

Kilometric sprite way:

It’s too damn heavy to use this kind of technique on desktop, don’t even think about it on a mobile. Surely it could be refined and weight even half the current size, but 0,8MB for one animation is way to much. Let’s give a positive point to this method. It’s strongly compatible, since it doesn’t rely on browser renderization (like SVG and CSS3 shapes).

Doesn’t matter which method you decide to use, it could be a good idea to have an equivalent fallback, like a gif, always in your pocket. Maybe it doesn’t look that smooth, but it works.

Well, did I talked about projecting the animation on a five storey building? Yes, I did…