How to Design Animations for Your Website

Designers continuously look for ways to make websites more interactive for users. There are millions of sites competing for the attention of consumers, and anything you can do that makes you stand out from the crowd is a positive.

Experts predict that by 2022, videos will account for around 82 percent of all online traffic. Videos are an obvious choice for adding animation to your website, but there are many different techniques and ways of implementing them. You don’t have to be a professional videographer or animator to do so.

Here’s how to make the most of animation.

1. Embed a Video

The average person sizes up a website in about 10 seconds and may leave in about 20 seconds. However, if you grab the user from the minute they land on your page, such as with animation, you’ll reduce your bounce rate and increase your conversions.

Adding a video that shows what your unique value proposition (UVP) is targets users who are genuinely interested in what you have to offer. Create a simple video and embed it on your site above the fold, so it grabs visitors from the moment they land on your page.

Animation - Harry's

Harry’s is a shave club that sends out a package each month to customers. The minute you land on its homepage, a video plays in the header that highlights some of the products and shows men shaving. The video grabs the user’s attention and leaves no doubt what the offering is.

2. Animate Elements of an Infographic

Gone are the days when infographics were just static images highlighting a few statistics. Today’s infographics are interactive with elements that are animated. Instead of presenting a percentage, one of the grids on the infographic may fly in from the side, bust apart a pie chart and highlight a specific number.

Tools such as Visme and Animaker offer detailed tutorial videos that help animate your graphics, embed videos, and make them exciting and interesting.

3. Animate Your Logo

A new trend in design that grabs attention is adding animated elements to your logo design. Animation in logos works well both on your website and social media for catching user attention. It also helps the user remember your logo better than a static one that doesn’t do anything special. If you want to stand out from the competition, animate elements of your logo.

Animation - SuperShuttle

SuperShuttle does an excellent job with the animation of its logo, by animating only the portion in the background. The little shuttle icon looks as though it is driving past different scenery, which also shows exactly what the company has to offer: transportation to and from the airport.

4. Augment Reality on Your Site

An exciting addition to design is augmented reality (AR), where people use their actual surroundings to create an experience. For example, a site that sells furniture might allow the user to download an app and place different items in a room, allowing them to picture exactly how that item might work in real life.

While AR doesn’t work for every type of industry, if you sell a physical product, there is likely a way to utilize AR in your design and make the website or app more dynamic and realistic.

5. Animated Elements

Another idea for adding animation to your designs is taking one small portion of your page and adding animation to grab attention. In this scenario, your animation should relate to your overall design but not distract from the typography on your page. You want the user to get a quick idea of what you’re about and then move right on to the in-depth information about the product or service you offer.

Animation - MailChimp

Mailchimp’s landing page features an animated graphic of a bird that flies and shifts from small to sleek to hands that look like a feathered creature. However, the bird is to the side and littler than the headline, which reads “Your business was born for this.” The idea is that you can achieve big things with Mailchimp’s help.

6. Hover Animation

One simple animation technique is adding animation on hover. The change can be very slight, but it still has a significant impact on usability. For example, if the user hovers over the navigation bar, the color changes or the text grows larger. Easily create most of these simple transitions with CSS coding.

Another idea is changing an image within a piece of content when the user hovers over it. There are many different ways you can use the transition technique, so get creative and try out different methods. Test your animations and see which ones perform best with your target audience.

7. Use Parallax Scrolling

Parallax is a scroll-based style of animations where different elements in your design move at various rates. So, you might have a background that runs faster as the user scrolls and a navigation bar that moves at a snail’s pace. The slower scrolling speed creates the perception that the navigation bar is closer and the other objects farther away, putting emphasis on the slow-moving item.

Use parallax to highlight the most essential objects or keep vital info close at all times. You may use jQuery to create parallax scrolling, and you can implement the scrolling via CSS.

Animation - Le Duc Image

Restaurant Le Duc uses parallax scrolling with its navigation bar and various elements on its page to highlight different items. It features seafood, so the animated fish in the background scroll a bit more slowly than the menu. The slow-moving fish images show the user at a glance the types of food they might expect before they even look at the offerings.

Keep Users Engaged

Utilizing the right kinds of animation on your website engages users and keeps them on your site. The longer visitors stay on your website, the higher your chances of connecting with them and getting your message across. As you can see, there are many different methods for implementing animation in your designs. Choose the mix that works best for your purposes, and don’t be afraid to try new techniques.

Lexie Lu is a web designer and UX content strategist. She enjoys covering topics related to UX design, web design, social media and branding. Feel free to subscribe to her design blog, Design Roast, or follow her on Twitter @lexieludesigner.

Leave a Reply