My Animated Avatar

Since launching my blog a few weeks ago, I’ve received a lot of great feedback about my avatar peeking over the top of the page. In this post I will walk through how I created the little fella’.

The Vision

I created the very first version of my avatar in Adobe Illustrator about four years ago, when I first launched my website. Since then he’s been upgraded quite a bit. At first, I wasn’t planning on including him in this version at all. I thought it was time for a change - something different. However, after completing the design, I knew something was missing.

From the get-go I was going for a simple, clean and modern look for my site - but for some reason that just wasn’t enough. The site was missing personality. It was literally missing me. That’s when I knew I had to incorporate my avatar. I knew I wanted to do something subtle to fit with the overall look and feel of the site. That’s when I came up with the idea to have a little version of myself peeking out from behind the main content container. I went straight to work and actually started by re-designing him in Sketch from ground-up.

Creating the Markup

Once I was happy with the design, putting together the markup for my avatar was fairly straight-forward. I sliced separate images for his face and hands. I then created eyelids in CSS for a blinking animation I had in mind.

<div class="tushar">
    <div class="tushar__face">
        <div class="tushar__eyes">
            <div class="tushar__eye tushar__eye--left"></div>
            <div class="tushar__eye tushar__eye--right"></div>
        </div>
    </div>
    <img src="/images/nav_tushar_hands@2x.png" class="tushar__hands" width="147" height="14" />
</div>

.tushar {
    position: relative;
    width: 106px;
    height: 125px;
    margin: auto;

    &__face {
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('/images/nav_tushar_face@2x.png') no-repeat center center;
        background-size: contain;
    }

    &__eyes {
        opacity: 0;
        visibility: hidden;
    }

    &__eye {
        $eye_top: 67px;

        position: absolute;
        width: 23px;
        height: 13px;
        background: #fae0af;
        background: linear-gradient(to bottom,  #fae0af 0%,#f8c484 100%);
        border-radius: 9px 9px 4px 2px;

        &--left {
            top: $eye_top;
            left: 30px;
        }

        &--right {
            top: $eye_top;
            right: 28px;
        }
    }

    &__hands {
        $hands_width: 147px;

        position: absolute;
        bottom: 30px;
        left: 50%;
        margin-left: -($hands_width / 2);
    }
}

As you can hopefully make out from the above markup and styles:

• The face is set as background image inside of a div, and the eyelids are positioned absolutely on top relative to the face.
• The hands are centered horizontally in the .tushar container as a separate image.
• The eyes are hidden by default.
• The avatar is positioned behind the main content container, so the content container has a z-index higher than the avatar.

Animation

Now comes the fun part: animation. I created the entire animation with CSS. I wanted to stay away from using JavaScript because I felt like it wasn’t necessary for what I had in mind. I think JavaScript should be used for more complex and advanced animations (i.e bouncing, stop, pause, rewind, etc).

The first thing I did was hide my avatar when the user lands on the page. Then after a short delay, I animated in the hands. After another short delay, I animated in the face. You’ll also notice that I added a slight pause to the face animation to portray a sense of hesitancy. I think it also makes the animation flow a lot better.

For the purpose of keeping the code simplified, I will only show the styles that are necessary for the animation itself.

@keyframes tushar {
    0% {
        opacity: 0;
        bottom: -100%;
    }
    100% {
        opacity: 1;
        bottom: 0;
    }
}

.tushar {
    bottom: -100%;
    opacity: 0;
    animation: tushar .25s 1.5s forwards ease;

    @keyframes face {
        from, to { }
        0% { bottom: -100%; }
        30% { bottom: -7%; }
        60% { bottom: -7%; }
        100% { bottom: 0; }
    }

    &__face {
        bottom: -100%;
        animation: face 2s 2s forwards ease;
    }
}

I also wanted to give the impression that he was alive, so I added a blinking animation. I basically toggle the visibility of the eyelids on and off at set intervals.

@keyframes blink {
    from, to { }
    0% { visibility: visible; opacity: 1; }
    2% { visibility: hidden; opacity: 1; }

    3% { visibility: visible; opacity: 1; }
    5% { visibility: hidden; opacity: 1; }
}

&__eyes {
    opacity: 0;
    visibility: hidden;
    animation: blink 2s infinite;
}

And that’s all there is to it! I find it great how such a simple and subtle animations have the ability to bring a breathe of fresh air to any website.