CURRENT ARTICLE:  How Web Animation Can Boost Your Business
NEXT ARTICLE:   25 Mobile UI Design Collections

How Web Animation Can Boost Your Business

Rey Magsino // Last Updated: 24 July 2016

 

Do you think your website looks a bit dated and it’s time for a redesign? Browsing the Internet to look for inspiration and latest trends could convince you that livening up your website with eye-catching animations is the way to go.  But is it?

Animation on the Web: the State of the Art

The human brain is biologically trained to be attracted by things that move and you can see the desire to capture movement and change in a vast number of artistic creations.

Although the web has started out as a fairly static medium of linked documents, developers didn’t take long to work out ways to introduce moving and blinking stuff to add more spice to web pages.  

I’m talking about primitive attempts, at times misguided like the infamous blinking text and forever animating GIF images, but at other times already aware of the opportunities for increasing usability that animation effects could offer.  The first rollover effects on buttons made possible by JavaScript are a case in point: by hovering over a button image a snippet of JavaScript code would swap the visible image with a second one, thereby changing the button’s appearance.  Using images made the button more attractive and closer to real life, while the rollover effect gave users feedback about their interaction with the element on the page.

The big jump in the quality and complexity of animation on the web came with Flash, a software by Adobe.  Despite being something of a usability nightmare, Flash allowed developers to do pretty amazing things on the Internet, including interactive games.

Today is a magic time for animation on the web.  We enjoy more standards supporting browsers, fast Internet connections, and high resolution retina screens to deliver immersive animated content.  Developers and designers have mostly stopped using proprietary technologies to embrace web standards and open source libraries to play animation directly in the browser.  Here’s a rundown on what’s out there.

CSS Animation

By the middle of the last decade, the World Wide Web Consortium (W3C), the international community responsible for developing open standards for the web,  was working on making animation part of the CSS specification. In 2009, they released the first public draft of the CSS animation spec.

For designers not too keen on JavaScript programming, being able to animate the color, shape and position of any element on a web page with just  few lines of CSS was very exciting stuff.  

Here’s a basic example of CSS transitions and animations on CodePen to illustrate the point:

See the Pen Basic CSS animation and transition example by Val Head (@valhead) on CodePen.

jQuery

Before CSS-based animation became mainstream, most designers were tinkering with the most popular JavaScript library ever, jQuery.  jQuery made animating web components a breeze.  All of a sudden having stuff fade in and out of a web page became the order of the day.  Even now, when most modern browsers support CSS animations and transitions, jQuery is still used to add and remove CSS styles that contain the animation code.

Velocity.js

Those who love CSS animation and jQuery will love  Velocity.  This is a fast-loading, highly performant JavaScript library that combines jQuery and CSS animation capabilities for color animation, transforms (e.g., rotating, skewing, etc.), scrolling, and much more.   

Enjoy this fantastic collection of Velocity-powered demos.

GreenSock

For state of the art JavaScript-based animation, GreenSock (GSAP for short) is a professional-grade, cross-browser platform that delivers amazingly smooth complex animations with few lines of code.

Head over to Sarah Drasner’s CodePen collection for a taste of what’s possible using GreenSock.

Greensock

WebGL

WebGL stands for Web Graphics Library.  This fantastic open source, cross-platform piece of technology lets developers create super fast, standards-based animated 3D graphics that run straight in the browser.  It’s perfect for games as well as highly immersive experiences like 3D models for architecture, entertainment and art.  Think of the educational and scientific uses WebGL makes possible: why not design a 3D human model and then interact in real time to learn about how organs function, cells replicate, diseases develop, etc.

If you’re curious about what WebGL can do, check out these cool Chrome experiments.

Web GL

I can’t close my survey of animation tools for the modern web without mentioning the Web Animations API, a standards-based JavaScript approach by the W3C.  The arrival of a unifying and standardized method of animating web interfaces is great news.  However, at the time of writing the Web Animations API has inconsistent browser support, which makes using alternative frameworks like GreenSock a more reliable solution for complex animations.  

How to Spot Great Animation on the Web

When used correctly, web animation can be a compelling tool in the service of your brand and business.  Animation brings 2-dimensional objects to look and respond more like real objects, which engages web visitors by interaction and emotional connection.

It’s no wonder that animation is more and more assimilated with user interface design and experience.

Whether applied to small interface components or to the entire page, there are some telltale signs that single out great animation from a botched job.  I find Google sums them up pretty well in Material Design, its visual design philosophy for websites and apps:  

There are also technical details interaction designers need to pay attention to.  For example, calibrating the right type of easing, adjusting the timing of the animation, targeting the most suitable point from which a zoomable icon grows in size when users click on it, etc.  If you’re eager to learn more, head over to Google’s Material Design spec dedicated to animation.

In a nutshell, well-executed animation makes sense in terms of cause and effect, flows smoothly in a timely manner, guides visitors and responds to their actions while delighting rather than annoying them.

Do It Well or Not at All: How Badly Designed Animation Can Damage Your Website

Nowadays, it’s unlikely you find a website without some kind of animated content.  

Next time you browse the web, take note of what really drives you insane with frustration.  Is it the choppy animation sequence that takes ages to complete?  Is it the scrolling of the page that gets out of sync with what you’re trying to read?  Or is it the pop up dialog that gets in the way of the information you’re trying to find?

When a website presents these kinds of issues, visitors are likely to navigate away from its Homepage as quickly as they land on it.

As much as bad grammar and poor quality images, badly implemented animation makes your website look unprofessional.  Don’t forget, your website is the public face of your business on the Internet.  Lack of professionalism undermines trust and nothing can hurt businesses as much as loss of trust.

But that’s not all.  Animation that is not in the service of user experience can hurt your website visitors.  It’s been some time since people reported how the aggressive animations and parallax effects present in the iOS 7 operating system of their iPhone and iPad were making them feel sick.  This episode raised awareness about people who may suffer from visually induced motion sickness as a result of watching disorienting and large-scale animations on the screen.  To learn more about responsible motion design, a good place to start are the Web Content Accessibility Guidelines related to animation.

While you’re looking for an expert to design the right animation effects on your website, consider eliminating everything that moves, blinks, or pops from the page, except for subtle background or color transitions in response to user interaction.  Doing so allows your visitors to enjoy the information you provide for them , after all that’s the main reason they land on your website.  Also, without distractions, visitors can now share your blog post, subscribe to your newsletter, purchase your product, etc.  In other words, they can now focus on those calls to action that are so important to building a relationship with you and learning about your products or services.

Why Awesome Web Animation Enhances Your Website and Is Good for Your Business

Earlier I pointed out core traits of great web animation and how much badly executed animation can alienate and even harm your website’s visitors.

Here I’d like to emphasize this point: great animation is powerful and developers can harness it to attract and guide users’ attention, draw visitors in, keep them entertained and interested.  

User experience design has in web animation a strong ally.  Animated progress bars while content is loading in the browser, buttons wobbling under a mouse hover, animated sequences to illustrate a complex process, products promptly jumping in a shopping cart as users select them, storytelling that connect customers to your brand, etc. are just a few examples of how you can use animation to improve the experience visitors enjoy on your website.  

Give visitors a great experience while they’re browsing your website and you’ll soon have them tweeting about it to their friends and taking whatever action you have planned for them.  

In short, awesome UX increases your chances of converting visitors into customers.

To conclude, here’s a piece of actionable advice for you.  Next time you have a discussion with a web professional about adding animation to your website, focus on these two questions:

  • how is this animation effect contributing to the website’s goals?
  • how is it helping the user complete task X, Y or Z?

And don’t forget, web animation is also lots of fun!

 

ABOUT THE AUTHOR

Rey
Magsino

Lead Front End Developer of Seirim. Rey focuses on making web design work and be captivating at the same time using HTML5, Jquery, CSS animations and other latest development technologies. As a lead developer he helps manage and drive progress forward on all SEIRIM projects making sure they are in optimal state before delivery and remain stable long-term.

RECENTLY

Hot New China Websites

Great websites recently launched for the Chinese audience

Open Source Cybersecurity

Check the open source options first to save your company money!

Our Favorite Quality Assurance Tools and Processes

QA takes work! We use the best tools and processes to make it easier.

SEO Audit Tools - Our favorites at SEIRIM and Why

Get in touch with your website's SEO health with the best auditing tools

Ten Steps to China SEO Success

Gather a new perspective, tools and methodology.

Embrace a Powerful Password Paradigm

Better security is within reach!