Recently, I designed and animated a logo for my client—Periti Digital

So I will walk you through my logo animation process by taking this work as an example.

Check out this simple logo animation live on peritidigital.com—The animation plays on page load and it only lasts about 3 seconds.

When you hover the cursor over and then out the logo, then the animation replays.

I think it’s a cool feature that brings those otherwise static logos to life.

A simple logo animation like that can improve the quality of your website as well as the overall brand experience in general.

How To Animate A Logo:

1. Create a storyboard
2. Prepare logo files
3. Animate your logo
4. Export the animation
5. Place it on your website

It’s a nice little touch that will definitely impress your clients—if you’re a designer.

Or it will certainly delight your website visitors—if you’re a business owner yourself.

To animate logos I use Adobe After Effects with Bodymovin extension, and I build websites on Webflow.

‍However, you can successfully use my guide with other animation software like Cinema 4D or Blender.

You can build and host your website wherever you want, because ultimately the JSON file with your logo animation can be used on any website.

Alternatively, there is also the old-school way of using a GIF, but they tend to be heavy and the animation itself won’t be as smooth.

On the other hand—Lottie Animations (files with JSON extension) are very small and they work on all devices.

They’re also vector-based so you don’t have to worry about the quality.

You will also be able to export your animation for other purposes e.g. you can render an mp4 for your YouTube videos—intro or outro.

Lately, we can see more and more brands that animate their logos in order to delight their audiences and to stay competitive.

That's why learning how to animate a brand logo can be a very valuable skill to all graphic designers, and especially logo designers.

1. Create a storyboard

First you need to come up with a creative idea on how you want the logo to be animated.

Here’s where I sketch out a simple storyboard of my logo animation.

Storyboard is simply a visual outline for your video that consist of a series of images that convey what happens in your animation—how elements are being put in motion.

For example: The logo I designed for my client Periti is composed of just a square and half a square/half a circle.

Since my client is all about “digital transformation” I tried to convey this idea in my logo animation.

An overview of my storyboard:

1. First, we have the purple square sliding in from the bottom and the orange ball dropping from the top.
2. Second, we have the orange ball bouncing off the ground once and the purple square rotates to the left.
3. Third, we have the ball bouncing off (again), this time of the purple square.
4. Fourth, we have an orange square sliding in from left and smashing into the orange ball (transformation) and therefore forming the Periti symbol.
5. Fifth, we have the symbol slightly moving to the left (to center the full logo).
6. Sixth, we have the name reveal effect and that’s it!

Fairly simple animation, but it looks absolutely iconic—doesn’t it?

The way in which you animate your logo will depends of course on the type of logo you have.

I recommend you to check out some logo animation examples to get some ideas on what’s possible, or rather what are common solutions or effects that can be used for logo animation.

Just search on websites like Behance and Dribbble for “logo animation” to find some inspiration for yourself.

You can simply create a mood-board and take some notes on what motion effects you like and why.

Next, you can either sketch out your idea on a piece of paper, or you can use Illustrator to create a few scenes digitally.

2. Prepare logo files in Illustrator

Once you have an idea for your logo animation sketched out, then you need to prepare your logo files in Adobe Illustrator.

Make sure that you have your logo in vector format and with each element on a separate layer...

This will allow you to import the original logo to After Effects and animate its parts independently, each on a separate layer.

My client’s logo composes only of two geometric shapes: the purple square and the orange half a square / half a circle—so I put them on separate layers.

On the third layer, I just have the name “Periti” that will animate at the end separately.

Another thing is to also make sure that you’re working with RGB colors, because animations are digital in nature.

Lastly, it’s also important to make sure that your art-board is about the same size as your final After Effects animation will be—usually 1920 by 1080px.

So I simply save this logo file as .AI and then I open it up in After Effects.

When importing your file to After Effects make sure you set the ‘Import Kind’ to ‘Composition’.

3. Animate your logo in After Effects

Once you've got your logo imported with all of its parts on separate layers, then it’s basically all about using transform properties and setting keyframes on a timeline.

Keyframes are essentially markers that identify when starting and ending states for your animation will occur.

Since my logo animation is pretty simple, I will be working here (for the most part) with transformation attributes like: position, rotation and opacity.

So here I’m basically looking at my storyboard (from the first step) and I’m trying to animate in After Effects the different elements of my logo.

That way I can adjust the speed and duration of each scene and synchronize them later on.

For example: On my first scene of the storyboard I suppose to drop the orange ball from the top and also make the purple square show up from the bottom.

To achieve that I simply use the position property and I set keyframes on a timeline changing position of the ball and square.

I do it in reverse—first I set the end state (since the logo will reveal, not disappear) and then I change properties and set the initial state.

I'm basically telling After Effects something like:

Hey at this keyframe the square is one place, and then it moves up X amount of pixels.

Later on, I can also add some opacity effect and I can also add some Ease In and Ease out effects so that the animation looks smooth and realistic.

Now I won’t go into details here on how to use After Effects—because that’s a topic for a whole new video.

I'd just recommend you to embrace some basics (watch free tutorials on Adobe.com) and the rest you can learn on the job.

Do you remember the inspiration board from the first step?—Now you can actually reverse-engineer animations that you liked.

You can either drag that GIF into Photoshop to see how it’s done frame by frame.

Alternatively, you can screen-capture that animation with Quicktime and then analyze it in slow-motion.

4. Export the animation as JSON file (Lottie)

Once you’re happy with your logo animation, then it’s time to place it on your website.

For this is best to use the Lottie Animation technique rather than just a GIF.

Lottie is simply a framework that allows you to export your After Effects animations and use them on your website.

In order to do so, you'll need to download and install the Bodymovin extension for After Effects.

Before we actually start using it, you need to duplicate your composition.

We’re doing it, so that you can change the canvas size to crop in on the logo itself, so it can be used on the website.

That way, you'll be able to preserve the original animation on an art-board 1920 by 1080 px, which is best for YouTube videos—your intro and outro for example.

So for the website, we just need a cropped composition with very little to no margin around the logo.

On the other hand, I also make sure that I don’t cut anything that is being animated along the timeline.

So I simply scroll through the animation timeline to make sure everything is still in view.

Lastly, I simply go ahead and export that animation as JSON file.

Simply go to Windows>Extensions>Bodymovin, then select the "cropped" composition and select the destination and voila!

5. Place the animation on your website

The last step is to actually embed your logo animation (the json file) on the website.

Since I’ve built my client’s website on Webflow—that part is pretty straightforward here—I just replace the original logo with that .json file

Then, I also set some animation triggers in the interaction panel on Webflow.

For example: I want the animation to play on page load, but also when you hover your cursor over and out of it.

I don’t want to make this intrusive to website visitors and their experience.

Your logo animation shouldn’t play looped, just like GIF would—that would be too much!

It’s just a simple touch to a website—and my client loved it!

The client was was very excited to see their new logo in motion (It wasn't part of the project scope).

I gave this logo animation to my client as a gift at the end of the project.

A tip for designers: Remember to always underpromise and overdeliver!—and animating the client’s logo is a great way to do so.

I hope you learned something new today—let me know in the comment below.

If you’re looking to animate your logo—start your project here.

Resources

• How to prepare logo files in illustrator
• How to use Bodymovin extension
• Web Animations with After Effects

PS. Don't forget to check out the end result live on https://peritidigital.com