11 Animated Websites, for Design Inspiration

Animation can be a powerful tool to bring life to a website and engage visitors with background videos, traditional illustrations, parallax scrolling, cinemagraphs, and more.

Here is a list of websites with inspiring animation. These sites use animation to demonstrate products and services, display a brand style, create a mood, and even lead the user through a story.

Printed By Somerset

Printed By Somerset

At the Printed By Somerset website, there is this confession: “We’re not web designers, we’re printers.” This is why, apparently, the website replicates paper. The site is interactive with animated folds and perforated pieces that tear off. Selectable sections include staff icons, Twitter menu, and mobile site menu. Visitors can order a “copy” of the website to sample the company’s work.

—

Homer Hudson

Homer Hudson

Homer Hudson is a premium ice cream maker that first launched in the 1980s and relaunched in 2015. Homer Hudson’s website has an interactive horizontal scroll that reveals flavor containers with each band of color. Visitors can select each flavor to find out more, including the Coming Soon container.

—

Quechua

Quecha Rain-Cut

Quechua incorporates a video of raindrops its outdoor gear website. It’s a simple and clever design idea that makes shoppers feel the need for quality waterproof products.

—

Bellroy

Bellroy

Bellroy designs thin, efficient wallets. Its mission is to craft better ways to carry your daily essentials. The site’s Slim Your Wallet slider demonstrates the efficiency of its wallet versus a bulging competitor. The page also shows an animated construction and deconstruction of its product.

—

Every Last Drop

Every Last Drop

Every Last Drop is an animated website to highlight water consumption in the United Kingdom. As the user scrolls down the page, the character is moved through the journey of a single day, showing how individuals use 4,645 liters during that period. The animated journey also highlights areas where water can be saved.

—

Miki Mottes

Miki Mottes

This is a portfolio website for illustrator, animator, and designer Miki Mottes. Naturally, this entertaining website is the perfect demonstration of the creator’s style. It is also a good example of how a little added animation detail can bring an image to life.

—

Alfred

Alfred

Alfred is an in-building dry cleaning service in Toronto. By scrolling down, the user is taken through services, how Alfred works, locations, FAQs, and blog links. Through the scrolling animation, the user quickly gets a feel for the ease and design of Alfred.

—

Firewatch

Firewatch

This website for the game Firewatch is a gorgeous example of parallax scrolling animation, using six layers to create depth. To see how it’s done, check out this demo on CodePen.

—

Cartoon Network Studios

Cartoon Network Studios

The website of Cartoon Network Studios is an animated extension of the brand’s aesthetic and a portfolio of the studio’s cartoons, highlighting its work in creating shows such as Adventure Time, Regular Show, and Steven Universe. The site is also a stylized board for jobs and internship information, clearly showing off the house style to prospective talent.

—

Falter’s Inferno

Falter

Falter’s Inferno is a promotional site for Falter, an independent newspaper in Vienna that prides itself on its skepticism and ability to say the things nobody else dares to say. The startling site takes the visitor through nine animated societal constructs, revealing the day-to-day dystopia that a Falter subscription helps battle. A 2016 Webby Awards winner for Best Use of Animation or Motion Graphics, Falter’s Inferno shows the power of story combined with stunning visuals.

—

Cinemagraphs

Cinemagraphs

Invented by 2011 by Jamie Beck and Kevin Burg, the cinemagraph is a hybrid of still image and video animation. For a gallery of cinemagraphs, check out Cinemagraphs.com to see work from Beck and Burg in fashion, lifestyle, and travel.

—