In an attempt to add flair to the TaosNet webpage, I decided that adding a simple animation to the logo would make it look a little better. You can see the end result here.

I wanted to see if I could do it entirely in javascript using the HTML5 canvas element. This would allow for more graceful fallback on older browsers that do not support the canvas element, or have javascript turned off. It will also work with mobile devices (note that I have not implemented scaling yet, so it looks bad on a phone).

There are plenty of libraries to help with animating in javascript. I decided on FabricJS. It has a simple API and does not have a lot of features that I don't need (as would a library aimed at game development). Installing it is as simple as uploading it to the website, and then linking to it in the head portion of the page with

<script src="/assets/js/fabric.min.js"></script>

Next, I needed to add the canvas element to the page's body's markup. This was accomplished by changing 

<header class="tn-header">
                <a class="logo-link" href="/"><h1 class="logo sprite">TaosNet</h1></a>
                <h2 class="tagline">Local roots. Global reach.</h2>
                <h2 class="tagline tag2">Internet Service Provider.</h2>
               
                <a class="navjump" href="#primary-nav">Menu</a>
               
                <a class="tel" href="tel:575.758.7598">575.758.7598</a>
</header><!-- /.tn-header -->

to

<header class="tn-header">
                <canvas id="logoAnimation" height="210">
                <a class="logo-link" href="/"><h1 class="logo sprite">TaosNet</h1></a>
                <h2 class="tagline">Local roots. Global reach.</h2>
                <h2 class="tagline tag2">Internet Service Provider.</h2>
                </canvas>
                <script src="/assets/js/logoAnimation.js"></script>
               
                <a class="navjump" href="#primary-nav">Menu</a>
               
                <a class="tel" href="tel:575.758.7598">575.758.7598</a>
</header><!-- /.tn-header -->

By putting the elements that I want to animate inside of the canvas element, those elements will render normally if the browser does not support HTML5 drawing. You can see the javascript code that does the animation at http://www.taosnet.com/assets/js/logoAnimation.js. The code is pretty straight forward. It does the following:

  • Initialize the canvas and set the width to be the width of the browser.
  • Create text objects for the two text items (Local roots. Global reach. and Internet Service Provider). The first is broken up to its first sentence so I can add the second later.
  • Load the logo and begin the animation.
    • I animate the X, Y, and angle properties of the image. When the first X animation finishes, it then starts another animation.
    • Once the logo movement animation finishes, the text animation begins.

This still needs to be tested on older browsers to make sure it works and planned, and scaling needs to be implemented to make it look better on mobile devices, but a small amount of code yields a good amount of progress.