Animated Websites: 10 Designs that Wow

Static websites tend to lack that feeling of realism and interaction that draws viewers in and makes them want to find out more, and they also have to remain very simple in their layout. Animated websites have much greater potential. With animation, a designer can…

more easily organize complex content and make a site easier to navigate (i.e. usability).
bring a design to life, even if the only motions on the page are slide-in graphics.
add an aesthetic value to a design.
draw users in with interaction.

Designers can use as much or as little animation as needed on a website. But a site without any motion at all could run the risk of looking outdated.

You as a web designer have the responsibility to suggest the right style and amount of animation necessary. A website should have enough humanity (via motion) for viewers to connect but not so much animation that it distracts from the message. Animation should increase the usability of a site, not make it more confusing to navigate. But of course, the nature of some websites allow for much heavier animation than others.

UNLIMITED DOWNLOADS: 50+ Million Add-Ons & Design Assets

The following are 10 websites that utilize animation in varying degrees. Some are fully interactive animated websites, while others only include animation in certain sections of the design. All are great examples of when and how animation works for a variety of purposes.

If you’re looking for more animated inspiration, check out our post on excellent cinemagraphs.

For more resources related to animation, please see:

Showcase of Animated Websites

Happy Forecast

The Happy Forecast website uses beautiful interactive animation to display the social wellbeing of each postal code in London. A team from Berkeley used the “Jen Ratio” technique developed by Professor Dacher Keltner of the University of California to study the body language, verbal interaction, and acts of kindness or aggression that strangers in public shared over a year’s time. The design is set up like a topography map of sorts that floats and rotates slightly as the cursor is hovered over the different sections. The different clickable regions/postal codes turn blue when hovered on. Plus, the clouds with shadows on the map is a very nice effect. The only drawback is that a legend explaining what “forecasts” the different shades of green represent would have been nice. However, the animation is so smooth and fast loading that moving from page to page really is quite seamless allowing viewers to quickly decipher that forest green indicates a negative forecast and grass green a much happier social wellbeing.

Y7K Digital Agency

The website for this digital agency is so simple that the animation is not overwhelming. The landing page displays an animated background of colors melding together and sliding down the page, moving faster or slower depending on the movement of the cursor across the screen. The links to the rest of the web pages are included in the header, keeping this page interesting but very direct. Throughout the site, other small but clever animated tweaks can found, such as the title link that leads back to the landing page, or the animated projects on the Project page. Because this is a business/portfolio site for an agency, the perfect blend of animation and simplicity is highly desired…and a feat accomplished quite well by this group!

Creative Cruise

This event website advertised the July 2015 “Creative Cruise” in which creative agencies of Amsterdam came together to celebrate the industry with a ride around the canal and “beers and beats” at a single location. The animated background design displays an illustration of the canal. Users were able to scroll or drag the screen sideways to watch a boat float down the canal to the different pick up points. Eventers could then click on the pick up point of their choice and sign up for the ride along the canal to the event. And this website is an excellent example of when a highly interactive animated design works – it draws viewers in and builds up the anticipation of such a fun event.

APPS

Standing out is hard to do for alcohol brands, simply because there are so many from which to choose. As with any other product such as this, creating an experience around it is one of the best ways to gain loyal customers, and the APPS brand of hard cider does this very well on their website. The homepage displays an interactive animation of how the company makes their cider with vivid photos. Users click on each letter of the brand name (A-P-P-S) to see each step in the process. If a browser is only there to see more about the company or what products are available, no problem! Simply click on one of the always visible buttons on the page.

For Better Coffee

In a full screen animated scrolling experience, viewers can learn the five rules for a better cup of coffee. Kalle Freese founded this website to both build awareness around his brand of coffee – Freese Coffee Co – and also to help people around the world learn how to make better coffee. The animation is very smooth as you scroll down the page, and each of the tips provide a clickable link to read more about why that tip is important. Again, this is the type of brand that has to build an experience to stand out, and an interactive animation is a great way to help people feel involved.

Dream Team

This website goes above and beyond portraying the brand and style of the stage and exhibition designer, Katrzyna Konkowska. The design imitates her style and the atmosphere she creates with her work. Upon arriving on the site, accordian-style ribbon floats across a geometric background. Scrolling down the page causes the geometric shapes to rotate and shift in perfect harmony with the information. The excellent balance between aesthetic animation and the ability to easily find the right information makes this website an enjoyable one to explore.

WWF Tiger Challenge

Sites that require you to stare at a loading bar are not much fun and tend to lose viewers if the bar isn’t constantly moving. This one does it right, though, by not only loading quickly but also displaying an animated line drawing of a tiger’s face to keep viewers captivated – a trick more slow loading websites should utilize. The animated effect of the heading text is also quite interesting. As the cursor hovers over the letters, the dots making up the letters scatter as if being repelled magnetically. As an awareness site in which runners can track and try to beat the 11km per day of an endangered Amur tiger living in Russia, the brief initial animation is a great way to capture attention without distracting from the actual cause.

Beagle

The Beagle website is a fantastic example of when animation is needed to accurately portray how a product/service benefits the client. A way to build better proposals more easily, Beagle shows how this service is used in an animated sequence that users can move through at their own pace. To go through the different steps, users can either drag the page up/down or click on the timeline buttons along the right of the page. Pieces of the illustrated examples move in and out of each step seamlessly and quickly, allowing viewers to see exactly how the service works in a very short amount of time.

In Pieces

Although a very complicated site due to tons of information, this design does an excellent job of organizing the content into a fun, interactive layout. Bryan James, the creator of this site, used CSS polygon technology to create the incredible animation as a way to visually represent these dying species of animals, many of which whose survival is “in pieces” due to such low numbers. Each of the animals are created with moving CSS polygon shapes and the stats are displayed in pop up windows with more incredible animation. This is definitely a masterpiece worth checking out, let alone a wonderful wealth of knowledge about these amazing creatures sadly on the brink of extinction.

Revelator

The welcome page for Revelator, a platform to help musicians run their own music business, works in a sideways navigation movement in which users click the arrows or the section along the timeline navigation bar along the bottom of the screen. Each section takes viewers through the different steps of the process, with a clickable “See details” that slides up from the bottom of the screen. The animation isn’t heavy, but very engaging with sliding navigation dots and interesting animated graphics to help visualize the steps. I am not a musician, but even I was engaged to the very end of the presentation!

Animated Websites: Something for Everyone

As I mentioned above, not every website needs heavy animation. Most of the examples above tend to lean on quite a bit of animation. Not all websites need a ton of motion, but at least some animation in any web design adds that touch of realism needed in such a digital world, bringing a service, company, or cause to life.