Make Your Website Move Without Overwhelming Time and Budget

Tips for designers and in-house creatives.

Our eyes are naturally drawn to anything that moves. By sprinkling tasteful animations in just the right places, we can make web pages feel more fluid, dynamic, and modern.

Unfortunately, animations can take a long time to program—especially when you need a lot of them. So when we set out to build an animation-rich microsite for UTC’s 2018 Annual Report, we wanted to use our resources carefully. We needed animations that could be reused in multiple places, without users noticing too much repetition. Overused animations loose their luster.

The most common animation on the microsite is called Fade Move Set. It looks like this:

Let’s break down how the animation works. Every Fade Move Set contains two or more “pieces” for your web browser to fade in. When we initially wrote the code, we told the browser to follow the below instructions, beginning with the first piece:

  1. Start fading in the current piece.
  2. Wait ½ seconds.
  3. Move to the next piece, and start over from step 1.

This version looked great on many parts of the site, but we noticed a few areas where it wasn’t working. We didn’t want to create a whole new animation for these sections, so after some thought, we went back to the code for Fade Move Set, and changed step 2 from:

Wait ½ seconds.

to

Wait timeBetween seconds.

TimeBetween is a variable that we can customize for every instance of Fade Move Set. Watch how it lets us improve a set of executive photos, from a ‘where are they’ pace to a dynamic draw in:

The new faster version doesn’t just suit the content better—it feels different. By changing one number, we’ve made one animation fresher.

Programming animations isn’t so difficult that we can only have one. Watch what we created by combining Fade Move Set with two additional animations: one in which numbers count up, and one that draws a horizontal line.

We reused both of these new animations elsewhere on the site as well, in a variety of different arrangements. Despite how many pieces they share, each combination feels distinct.

We’re always looking for smart ways to maximize a project’s resources, to deliver the strongest visuals we can. Treating animations as flexible building blocks allowed us to tweak, combine, and ultimately reuse them in novel ways.