Categories
Tutorials

Luanda Cartoon CSS animation

Not really a tutorial, but the reasoning behind the animation of Luanda Cartoon’s logo | UI Design and Development

This was the 12th edition of the International Cartoon Festival “Luanda Cartoon”. It took place from the 22nd August to the 22nd of September, 2015, at the Instituto Camões, in Luanda, Angola. Luanda Cartoon started in 2005 with quarterly editions and, from 2006, the event became annual.

The partnership between Luanda Cartoon and SAPO Angola required a blog to broadcast the event’s information, so they sent custom funny communication art pieces for its customisation.

But that was not enough. We needed something dynamic to match Luanda Cartoon’s energy. That’s when I thought of animating the logo. And this is how it was accomplished.

How to animate a logo with CSS.

This tutorial focus only on the reasoning of the process, not going into the details of each step. However, if you need to know more, feel free to comment and I’ll do my best to help 🙂

Prepare the image to animate

To prepare the logo for the animation, we need to separate its elements, one on top of each other. I’ve used Photoshop but you can do on any other image editing software.

Luanda Cartoon logo

To be able to have the 3 images separated we start by cutting off the element on top, in this case, the lettering.

Once you do that, you’ll have to complete the missing parts of the character. Then you cut the character.

Finally the rectangles and those end up with empty spaces from the cut parts. For this part I’ve just redrawn each rectangle.

This steps of cutting from the image what’s on top vary according with the image you want to animate, so start with something simple.

Note that, the cut images, must all have the same size, and have transparent background (.png) so they fit together.

The logo is made with three distinct groups of elements, so we start by cutting the top one, in this case, the lettering.

Next the character. With the letters cuted out you’ll have to complete its missing parts to make it a individual complete element.

Finally the rectangles that have big empty areas from the other two elements. For this part I’ve just redrawn each rectangle.

This steps of cutting and reconstructing elements of an image for animation vary in complexity, so start with something simple.

Note that, the separated elements, must all have the same size and transparent background (.png) so they fit together.

Note that, the cut images, must all have the same size, and have transparent background (.png) so they fit together.

Host the images

When all images are ready, you need to host them and get the direct ULR for each, so you can use them on HTML and CSS.

The HTML base

We will have 2 of the images standing still: the background at the back and the lettering at the front. These go on the HTML.

Luanda Cartoon HTML sample code
HTML snippet at CodePen

Fix lettering in CSS

In the CSS, position the lettering on top of the logo elements.

Luanda Cartoon CSS sample snippet
CSS snippet at CodePen

This allows us to have logo lettering on top of logo background:

Position and animation

Finally, the guy between both images has a fixed position, like the lettering. The animation settings vary according to what’s intended, in this case, we’re animating the background positioning of the character, so we set it for the final position to background-position: 0 0; meaning, exactly aligned with the other fragments, making the whole logo.

Luanda Cartoon CSS sample code
CSS animation at CodePen

@Keyframes is where the animation starting and ending points are declared. We start with background position of 0 300px so our character starts animating out of vision, 300px down, the exact height of the image.

When the user lands or the page refreshes, the animation starts by hiding the character at the bottom, bringing him up during the 2 seconds the animation takes.

The codepen

It’s much easier to understand playing around, so fell free to explore the project 🙂

HTML/CSS CodePen screenshot
HTML/CSS CodePen screenshot

Luanda Cartoon at SAPO Blogs Angola

Leave a Reply

Your email address will not be published. Required fields are marked *