Our workWhy usPricing
Summit

Ignite: How to Spark Creativity and Build Resilience

Join us for 3+ hours of free content with 5 sessions on sparking creativity and building resilience, featuring 12+ industry experts from Headspace, Webflow, Zapier, Reddit, Coursera, Clari, DirecTV, MasterControl, Matterport, and more.
View event
Gather & Grow

Your Opinion About Your Brand Doesn’t Matter

Watch our interactive session on how to position, build and experiment your way to a brand that resonates with your audience!
View event
Gather & Grow

Zero-click Content | On-Demand Recording

Watch the full session with Amanda Natividad about content quality, social listening, content trends in 2023, and how to leverage zero-click content!
View event
Events & Summits

Explore all the content inside Events & Summits!

See all
BlogCommunityBook a demoSign in

10 Great Examples of Animation on Websites

Ben Myhre
Ben Myhre9 min read
10 Great Examples of Animation on Websites - Superside

Animations are cool. That is a well-documented fact, not opinion (trust us). Remember back in the late 90s when GIFs and early animations proliferated? How long has it been since you thought about the Hamster Dance or Peanut Butter Jelly Time. Those early viral animations are the predecessors for the stunning, refined animations we see today.

Web animation is any motion that is on the web, and though Flash is not used as much now, there are many techniques and technologies that bring the Internet to life:

  • Motion graphics
  • Sprite animations
  • CSS animations
  • JavaScript animations
  • SVG animations
  • WebGL animations
  • UI animations
  • Web-based game animations
  • Animated data visualizations

Animation isn’t just about entertainment or cool logos anymore. Today, animations can be used in a variety of ways and many companies are finding subtle, yet impactful uses on their websites. They aim to draw the eye exactly where it needs to go. But when used wrong, they can also draw attention away.

To make the most out of animations, give them a purpose, says Joe Jordan, creative director at JK Design. Make them meaningful.

Using animations is almost a no-brainer. Research found that users stay on a webpage 2.6 times longer than normal when it has animation.

People like interactive graphical elements. This is attributed to the average human attention span of eight-seconds (according to a 2015 study by Microsoft Corp). Videos and animations keep people engaged, keep the eye moving and may even be used to draw viewers to the CTA. Research by the Online Publishers Association showed that over an eight-month period, 80 percent of users had watched a video ad, and of those, 46 percent had taken a follow-up action.

The best thing about animations is that they can fit seamlessly into your brand — they can be subtle or overt.

For example, many companies have found success with explainer videos directly on their home page. Creating an attention-grabbing starting screen that makes users want to press play is a sure way to keep them on the page long enough for you to tell them why they should buy in.

Subtle animations, like the little bounce of a login button that tells the user they’ve input their information incorrectly, provide a better user experience. On the other hand, there are more overt options, like a character that stays with the page as users scroll down so the user can connect with the brand’s personality.

Regardless of how they are used, webpage animations are a matter of UX design. When a user lands on your website, it may be their first impression of you, so you want their experience to be the best it can be. You want them to be engaged with what they are seeing and how they are experiencing your page. And you want to ensure their attention is held long enough to sell to them.

Needing inspiration for your web animations? Check out 10 great examples of animations we found. Some are big and bold. Some are understated. But all of them have considered brand identity, their target audience and how users will interact with the page.

1. Marie Weber

5c60eddd55f24342b751db6699df717af93a44a3

Upon hitting enter on the address bar to go to this page, you are greeted with a simple, elegant animation of the handmade shoe company’s logo. In fact, on every page on the website, this same animation greets you. It matches the luxuriousness of the brand and gives a bit of that je ne sais quoi—an unmatchable indication that what you’re waiting for is worth it.

As you move through the site, other elements are animated too. Like the entrance of shoe collection names, shoe images that appear before zooming out and small lines under the links that show up and animate under the name so that it’s clear which link you’re about to click on.

2. Wonderful Weekends Festival

d155626e58ffc887b7ab172733e3e4fca6fed8f5

The Wonderful Weekends Festival page is a veritable delight of animations. The landing page is all about moving pieces, but they didn’t stop there. When the page first appears, a small box pops up to tell you when the festival is visiting and offers you two choices: Play Now or Show Me the Festival. This is where it’s all in the details. When you hover over those buttons, they flash Google’s colors (the festival’s sponsor).

Those buttons aren’t the only place Google’s brand shines. When you’re going through the pages, active links also flash with the colors, and each new page starts with an animation of the brand colors. Want an animated delight? Try out the links to Weekends Helper and Tips & Tricks for a lesson in audience engagement.

3. Waze

381210b7230d897c2689d47f493f8ccdb0a7ffb0

At first glance, you might not understand why we chose Waze. After all, the page quickly animates in, but it’s not spectacularly dynamic. Instead, it is the subtle animation that we found impactful — the little bouncing arrow at the bottom of the page. That arrow is innocuous. It is unassuming. It is a simple, user-friendly feature that politely tells you what to do next: Click it.

The arrow captures your attention and leads you to more information. This type of simplicity is a perfect example of how small animations can make a big impact.

4. Coca-Cola US

8ea4d89164284d67d194e167966dd48f7b04287c

Coca-Cola’s page is primarily static. You may expect animated bubbles in line with their “refreshing” brand strategy, but no. Instead, they’ve used an animation for another ideology that has been incredibly popular since 2014. “Share a Coke” takes center stage here and the animation only enhances this brand strategy. One Coke bottle’s label moves between various names — both female and male names - and teams.

In addition to enhancing their current marketing drive, the rolling animation offers Coke the chance to make seasonal updates. Currently, the team names are for football, both collegiate and professional, which appeal to an American audience glued to the popular Autumn sport. You see a familiar name, your favorite sports team and you can’t help but want to go get that Coke.

5. Google

b404db7674fa39460e9b442a4944ff7e90fdef78

Google’s Your Plan, Your Planet site is aimed at helping people think about conservation and green living and how they can actually make the change. The landing page is simple. Text moves in, but then remains static. But once you click through “Let’s Get Started,” the page wakes up with four adorable animated icons that lead to even more dynamic animations.

Whether you click on the waving teddy bear, the dripping faucet, the lighting light bulb or the fridge with the swinging door, you’ll find a schema that tells you to find out more about how to conserve in that section. It stays interesting on a subject people sometimes just tune out, which is exactly how animations should be used.

The Future of Design Operations

Great design doesn’t come easy, especially when it needs to be delivered at scale. In this guide we demonstrate, by example, how DesignOps can help streamline the creative process for overstretched marketing, creative and agency teams.

Get the eBook

6. Pete Nottage

83d3bb82aaa48e05c18920940a246b43a625dc9e

This website for voice actor/presenter Pete Nottage is one of the best on the web for animations. When you first load the site, the Pete Nottage logo appears with a little red swipe across it—a sure hint that the brand is about bringing color to what was once dull. Then a sea emerges, followed by a small cityscape. Cars drive around the city, boats sail around the sea, planes fly through the air and each building has a special animation when you click on it.

Clicking on the links also provides little nuggets of personality through animations. On his “About” page, a headshot illustration animates in, and if you click on it, it leaves, only to be replaced by another version of the animation. It’s these types of touches that show who Pete Nottage is and why someone would want to hire him.

7. Zamzar

b113f8cf25db497e33a84d3866fdd28b1d68fd2e

The approach by Zamzar is subtle and simple. You need to convert a file and there are only three easy steps to do it. Zamzar makes this clear with a blinking glow around the number one for the first step. Once you complete it, the bar fills up to step two and it begins the blinking glow.

For a company that says boldly, “File conversion made easy,” this straightforward animation is an excellent iteration of their brand’s motto.

8. Blizzard: Warcraft III Reforged

c76d78c806d06e6cb6a599dccdd5adaf6d7fc892

What’s the best part of Warcraft? The cutscenes. Oh sure, there are other things to love, but the outstanding graphics and furtherance of the storyline during the cutscenes was worth the play time. Perhaps this all seems off subject, but when you click through to the Warcraft III Reforged website, you’ll see why it matters.

Playing in the background of the page are both cutscenes and gameplay experiences. Overlaid on the animation is the title of the game and their pitch, but it’s what’s behind it that is carefully placed to enhance nostalgia (Warcraft III was the best of their games; change my mind). It reminds players what they used to love and shows off a bit of the enhanced graphics of the rereleased game.

9. Piktochart

208d9328eddb652e7f27bdd17fbf17f6df5aa462

What can you do with Piktochart? The animation on their page will tell you. Animated typing writes a word under “Easy to Use” in front of “Maker.” Words like “Infographic,” “Social Graphic,” “Presentation” and “Print” all appear and are erased to make room for the next word.

With this animation, Piktochart states their claim quickly, shows users what they will get from the website and maintains their quirky, visual brand.

10. Cisco

fb6306cd861d7e258b1732c77c334e80fbf56239

Cisco is an American conglomerate whose work in networking and telecommunications has made them a multi-billion dollar company. The significance of the business, and the associated corporate feel, are reflected on the page, which focuses on learning more about the business and company updates.

It would be off-brand for Cisco to introduce an illustrated animation or one that draws your attention to one place or another. Nevertheless, they know that animations help, which is why they’ve added just a few minor ones that make big impacts. Put your mouse pointer over one of the first three images on the page, and the other two slide over so you can see more about that link. The icons below those links enlarge when moused over so that you know which one you’re about to click on. Deliberate and engaging, just like Cisco.

Whether you want to go bold with your animations or take the subtle route, just remember that they must fit seamlessly within your brand. If your brand is elegant and luxurious, you may want to take a note from Marie Weber. If your bold, fun or exciting, perhaps the Wonderful Weekends or Pete Nottage websites will inspire you. Or if you’re looking for simple or corporate, Cisco or Zamzar’s modest animations may be right for you.

And, if you’re looking for something truly entertaining, consider using Superside for your motion design or animation needs.

Get Frictionless, Delightful Motion Design

Superside delivers design at scale to over 400 businesses. Let's find the right solution for you.

Book a call
Published: Oct 30, 2019
Ben Myhre
Written by
Ben Myhre
Ben Myhre is the Global Creative Director at Superside. When he's not leading our team of 80+ designers and working on strategic partnerships, he's often traveling around Scandinavia with his wife and daughter while trying to name every font along the way. Find him on Behance, LinkedIn and elsewhere: /benmyhre.

Join our community of 15,000 strong and receive the best design and marketing content, biweekly

No charge. Unsubscribe anytime

Continue reading

Hassle-free design starts here

Superside is an always-on design company that makes design frictionless and hassle-free for marketing, sales, creative and product design teams. This means top-quality designs at lightning-fast speeds, improved velocity and go-to-market and completely secure and confidential file sharing and collaboration.

In this one-on-one live demo, you’ll see:
- How Superside works
- A first look at the Superside platform
- The most suitable subscription plan for you

Get ready to join 450+ scale-ups and enterprise teams doing good design at scale with Superside’s dedicated team model.
Ready to get started?Book a demo now

Book a call with us

Loading...
We need your phone number for the demo. We'll never use it for any other purposes.
Superside is a revolutionary way for businesses to get good design done at scale.Trusted by 450+ ambitious companies, Superside makes design hassle-free for marketing and creative teams. By combining the top 1% of creative talent from around the world with purpose-built technology and the rigor of design ops, Superside helps ambitious brands grow faster. Since inception, Superside has been a fully remote company, with more than 700 team members working across 57 countries and 13 timezones.
© 2023 Superside. All rights reserved.