X shaped spaceship before landing in first window. In the second it has landed and letter i is preparing to exit it through open doors.

SVG meets CSS animation

For some time I have been thinking that I should make my own loading screen for my YouTube channel, please, forgive the computer terminology in video world. But having absolutely to knowledge in AfterEffects or similar software forced me to find a different way. One of them was fiverr as Ran Segall did but I am not exactly comfortable with that. The other seemed a bit more interesting, SVG and CSS animation and then somehow transform it into a video.

At first I had to create SVG how it should approximately look like. I say approximately on purpose because between the first idea and final thing there were a lot of changes, especially during the animation part.Xgebi screen for YouTube

After exporting the image as SVG I had to reorganize the code. SVG in it’s natural form is an XML code full of attributes. These attributes needed to be rewritten into CSS code for easier maintainability.

The hardest decision in this phase was how to position the letters, they are now at the final position, not initial. I chose to get rid of all positioning in SVG and used CSS transforms, translate in particular was handy. At the beginning the only visible letter is the big ‘X’. All other letter have set CSS property opacity to 0.

Animations

First letter to start moving is the big ‘X’. It has initial position near the left border and jumps to the center of the screen.

When the jump is done I came to an idea which was worth trying. What if the big ‘X’ is a spaceship and the others will get off when it lands.

animated loading screenMy approach was to start with the letter that is going to travel the longest distance to final position, ‘i’. At that time it felt like the most logical reason but now I can think of different approaches. After that I began adjusting exits of other letters.

First lesson which I learned is that the letters need to have a different duration of animation. If they all have the same animation duration time, they will travel at different speeds which can cause collisions.

Second lesson are delays. I don’t think this can be calculated properly, I may be mistaken1, so I had to observe and manually adjust them.

Final processing

When I did timing and positioning it was time to convert it to a video. The software I used is complete basics, QuickTime player to capture the animation and iMovie to process it. This is the moment where the biggest inaccuracies happen because I have to select the recorded area and cropped area manually with a mouse.

In iMovie I added some 8-bit music and exported it.

Full code on JSFiddle: https://jsfiddle.net/xgebi/0eboyz2v/

  1. I am a designer and engineer, not an animator