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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
And don’t forget, web animation is also lots of fun!
Review of the top annually produced cybersecurity threat and intelligence trends covering 2023.
Discussion about how to overcome team conflicts and project delays in IT and web development projects.
Follow these steps and consider these tools to get your company cyber secure.
Top 12 social media for businesses to promote with in China
As a website owner, cybersecurity should be a top priority.
QA takes work! We use the best tools and processes to make it easier.