Basic Animation for Web Design

The world of animation for web design is vast and somewhat complex. Professional animators undergo quite a bit of training and work for years to master their craft. But animation can be found in much more than cartoons. Print work and other static mediums don’t have the luxury but web design is the perfect outlet for digital animated effects.

This post will cover a series of useful animation principles as they relate to web design. The methods used by Disney to animate a character would be far too complex for use on the web. As a digital designer you really don’t need to spend your life studying animation. The basic principles should suffice and provide enough of a starting point to learn how to design your own animated effects for buttons, icons, slideshows, and other web widgets.

Squash & Stretch

Traditional animation is the cornerstone of all other forms from 3D to UI design. One of the 12 main principles of animation is squash & stretch. These behaviors give items a sense of weight based on how they interact with other items. Take a look at this stretchy cube demo built entirely in CSS.

The stretching effect doesn’t always need to be overdone like the example above. When you take realism into account even a minor squash/stretch motion can be noticeable.

This type of animation gives life to the page because it’s meant to be a replication of physics. When using exaggerated features the animation feels more cartoony, but still relies on a foundation of gravity and mass.

Consider using this effect for elements that need some elasticity. Buttons, menus, or even slideshows with image thumbnails can be squashed & stretched. These animations are created through the use of easing functions which are primarily built into JavaScript libraries.

Velocity.js and Snabbt.js are two choices worthy of consideration. If you’re looking for pure CSS3 animation then check out Animate.css instead.

Objects in Motion

All forms of animation require some type of motion. This may seem obvious but the subject of motion is vast and requires careful attention to detail. When focusing on web elements you’ll want to create motion in a manner best suited to each individual item.

For example, a larger block element could be seen as heavier and thus move slower along the page. On the contrary little tiny buttons might quickly pop onto the page like pieces of candy. Timing is very important because it distinguishes how the object is moving.

SOZO Design uses a clean animated header for some dynamic typographic elements. Text will fade out and move into view rather quickly. Their layout also uses a hamburger navigation which relies on animated links sliding into view from offscreen.

Most of these features are naturally smooth. I actually like their style because it’s noticeable yet not too overbearing. Good animation shouldn’t steal thunder from the design itself, but rather compliment the design as an extra feature.

Easing for Natural Motion

Easing effects are used to distinguish custom animation from a linear style. These can be displayed as data points graphing time and motion to create a custom effect. Linear easing moves in a straight, even-tempered line all the way through.

But many other pre-built styles exist and it’s even possible to create your own from scratch. Take a peek at the Easings.net webpage to see a handful of easing styles live in action.

Motion feels natural when it blends into the design and fits with the object being animated. If an element behaves like it’s made of gummy material then it should be somewhat bouncy and flamboyant. Easing styles range from delicately slow to frenetically quick.

As you practice web animation you’ll start to get the hang of how certain objects behave. Weight, friction, and an object’s “material” play a role in animated effects. Sometimes these can change for different items but other times they’ll stay the same across the board. The Google Material Design animation page covers the basics for their own design language.

The above screenshot is from a simple animated GIF of the Twitter bell icon. It’s designed in the Google material design language which is defined by flat icons and simple animated effects. Easing is slightly different for the bell and the notification popup, yet they both seem to work together harmoniously.

Intuition plays a large role in animation. Trust your gut, and more importantly your eye, to let you know when something looks right or wrong.

Consistent Effects

Taking a look at the overall composition you’ll want to stay true to the design. Website animation only feels right if it can blend into the design style. For example it’s a good idea to avoid large bouncy buttons on a funeral home layout.

Aside from matching the website’s theme you’ll also want to match similar effects. Consider all the different styles of animation from sliding, swinging, bouncing, fading… the list goes on. It’s your job to determine which effects go well together in a single layout.

Take for example the heavily-animated landing page found on i.ngen.io. Their homepage is one of the most dynamic features on the entire website. Each menu link uses a distinct hover effect which is simply beautiful. Although each one is invariably different, they all feel like one group of links animated in a similar fashion.

There is no surefire way to master consistency other than practice. The same can be said about learning how to view composition in web design – you’ll pick up ideas the more you practice. Start by replicating animated effects from other websites and eventually you learn how to incorporate relevant ideas into your own work.