SALES / SUPPORT : 844-261-1206 (Mon-Fri, 09:00-17:00 EST)

14 Animations For Web Interactivity In 2017: Out With the Static!

By Eva Barnes , Oct 4 2016
Web Interactivity

Featured Image: iStock/Jane_Kelly

This is the second post in a two part series. In Part one, we discussed the importance of interactive web design and basic interaction techniques. Check out the previous post if you haven’t read it yet.

Now we dive in a little deeper into specific methods of implementing interactivity on websites.

Interactive design is the latest buzzword in design circles. Throughout 2015 and 2016 we have seen web and app design move towards simplification. The ultimate goal of simplifying design is better UX (user experience) UI (user interface). Animating UI elements is a great way to reduce clutter and make your designs simpler.

The primary method of web interaction in 2017 will be animation. We explore 14 modern animation techniques and take a look at some stunning examples. First, let’s look at why animation matters and why you need to include it in your 2017 web redesign strategy.

Why Use Animations?

Animation has come a long way from 50’s cartoons and is an essential part of modern interactive web design. Anyone who thinks that animation is simply for aesthetic purposes is mistaken. Animated effects help create immersive user interaction designs. It can serve as a solution to common UX and UI problems. The right animation at the right spot can help get your brand’s message across and engage users.

14 Modern Animation Techniques For Great Interactive Design

Modern web design aims to maximize interactivity. Animation is the ideal way to add some spark to your dull website. A boring website with bad UX design is a recipe for disaster. Avert the inevitable drop in revenue by using these animation methods. Check out these amazing methods and related examples for inspiration.

1. Animated Backgrounds

Do you consider backgrounds static and boring? Think again, backgrounds aren’t restricted to the drab images anymore. Modern animation lets you create a visually appealing background with animated effects. A word of caution, don’t use animation if it doesn’t enhance communication. Designers often include unnecessary animations, which can hurt the interactivity.

The website, Travel With Terna has a background that moves constantly. The animations are not subtle but not distracting either. Clicking on the little blue tags produces more animations that pop up shortly.

Animated Backgrounds 1
Image Source

Another website that has a ton of animations is Space Advisor. It starts with a full screen animated background on the home page and plays through a fun quiz. Using an animated background when the entire user interaction relies on animation would detract from the main content. However, here it just highlights the richness of the experience.

Animated Backgrounds 2
Image Source

2. Animated Images And Photography

Animated images are a recent addition to the interaction design toolbox. The effect involves animating still images, shapes, and even text to capture attention. Photo animation will continue to get more popular in 2016 and will dominate the animation trends of 2017. Let’s look at some examples to get a better idea.

A slight animated effect, usually a slow zooming in, of product photos looks beautiful. Puca Jewels uses this effect to give a clear view of the product. 

Animated Images And Photography 1
Image Source

Bolia uses a horizontal parallax in their full screen images. Their product images are rich and vibrant but they have upped the ante by the clever use of animations.

Animated Images And Photography 2
Image Source

3. Calls To Action

Call-to-Action or CTA buttons need to be displayed prominently on the website. Small animations can signal design intent more clearly than some traditional static elements.

Fun Buttons
Image Source

Social media buttons can be merged with the social proof metrics with animations. This example shows a Twitter button which displays the total number of Tweets when the pointer hovers over it.

animated twitter button
Image Source

The CTA on the Nerisson page is very visible but doesn’t seem interactive. Hovering over it changes the color and a slight bounce provides the signal for interactivity.

Calls To Action
Image Source

4. Unusual Navigation

Traditional website navigation resembles the structure of a book or poster. This design works best because it’s quite intuitive. However, this standard model has been given a new twist with experimental navigation. Unusual navigation

The American Institute of Graphic Arts (AIGA) 100 Years of Design website is a textbook example of unusual navigation and layering done right.

Unusual Navigation 1
Image Source

The Locus Solus page has a quirky menu that looks like a compass; each of the points shows different product images.

Unusual Navigation 2
Image Source

5. Form Fields

Most people hate filling out website forms. We are kind of in the same camp because most online forms have horrible design. Animations are here to save the day. Subtle animations can guide user interactions and make form filling less painful.

Here are a few examples of how animations can transform the humble web form.

Material Signup Interaction
Image Source

Notice how the screen changes whenever an interaction happens and a desirable action is finished. Successful form submissions can also be communicated by changing the button slightly.

Form Completion Guide Animated
Image Source

6. Full-Screen Animations And Videos

This is the ultimate immersive experience but probably the toughest to get right. You will need to carefully think about how every frame looks in relation to the rest of the design. Larger videos and animations also increase page load times, so use this effect sparingly. Here are some websites that have managed to hit the animation nail squarely on the head.

The Follow Your Intuition website by Peugeot is an amazing example of storytelling on the web. It uses a full screen video format and has some brilliant interactive elements.

Full-Screen Animations And Videos 1
Image Source

Another example, which is interactive and informative, is the Reuters TV website.

Full-Screen Animations And Videos 2
Image Source

7. Horizontal Layouts

Break out of the vertical page trap and give your website another dimension. Horizontal layouts were considered a fad by many design experts, but have made a comeback. The improved capabilities of CSS and JavaScript have made horizontal layout a staple of web design. People stick to the vertical poster-like layout because they are used to it. However, horizontal websites have a more intuitive information architecture and look better on mobile devices.

The entire Travel Alberta Tripplanner website has a horizontal layout that looks quite stunning. The interaction design and user experience is impeccable. Clicking on each option narrows down the requirements and presents you with amazing locations as well as a list of activities.

Horizontal Layouts 1
Image Source

The menu on the left has a smooth animation and shows links to detailed information with links to Tripadvisor.

The design studio Hot Dot has a horizontal website, the main focus of the website is full screen images. Each image highlights the service offered and the related section of their portfolio.

Horizontal Layouts 2
Image Source

8. Hover State Animations

Hover state animations are one of the most commonly used UI pattern. The initial display might look one way but then changes once the user interacts with it. These slight changes reveal the functionality to the users and don’t take up precious screen space. Mobile apps use hover state to increase usability. This effect is also used in Webgraphics and large data tables.

Bubbles
Image Source

The website of an interior design firm, Sergey Makhno has an interesting hover state effect. The CTA outline changes color and also functions as a loading time indicator.

Hover State Animations
Image Source

9. Loading Screens And Animation

Loading screen animations are called ‘unseen’ elements because they are triggered without any input from the user. Loading animations can be entertaining and jazz up simple websites. The key is to not make them too flashy or colorful. Match the style of the loading screen to the overall website design. Also keep the context in view, for example, you can’t use a dancing unicorn if the website is for a construction firm.

The loading animation for the Tom Cole Architecture website is elegant, simple and fits in with the overall look of the website.

Loading Screens and Animation 1
Image Source

Another example is this subtle loading animation of the Aquatilis Expedition website. The animation is a simple white wavy line meant to represent ocean waves.

Loading Screens and Animation 2
Image Source

Smaller animations can also be used to signal page loading or form processing.

CoMotion Loading Animation
Image Source

10. Menus And Navigation

Menus can be animated to give the illusion of the request being processed. A sudden change in display might seem confusing to the user even if they have triggered the change. This usability problem can be solved by using animations.

Animated Tab Bar Icons
Image Source

Brian Hoff Designs uses a simple animated menu that pops up when you click the hamburger icon.

Menus And Navigation

The screen fades out and the menu items show up clearly. Hovering on the item changes the color of the text, this a nice subtle touch that enhances usability.

Menus And Navigation 2
Image Source

Another thing we like is the simplicity of the options and the design. There is no clutter, just four main options, three sub-options, and social media icons. The result is a sharply focused look.

11. Page Motion

This can be smaller animations or large animations creating a parallax effect. If the one-page parallax effect isn’t suitable for your main website, you can always create one highly interactive page to increase engagement.

Page Motion 1
Image Source

The Beauty of Brewing website looks great and tells a fascinating story through the parallax effect. As you scroll down, the site illustrates the step-by-step process used to manufacture beer. The color palette transitions from a rich gold to apple green. It’s a very unique way to show the journey from barley to beer.

Page Motion 2
Image Source

A similar effect can be seen on the Blu Homes website. The company is involved in the residential construction business. The homepage features videos that highlight the home exteriors and interiors. It’s quite a clever way of captivating the viewer.

12. Scroll-Triggered Animations

This technique changes page elements as the user scrolls down. These changes can’t be sudden because it will produce a jarring effect. Animations ease the transitions and

Getty Images launched the Getty Endless website to highlight the range of photographs available via the service. Their tactic was creative and the accompanying website takes the concept to a whole other level. The design is based on an amazing scroll-triggered animation, which merges different images. The images form a collage and show the faces of famous world leaders such as, Dalai Lama, Pope Francis, Angela Merkel, and Prince Charles.

Scroll Triggered Animations 1
Image Source

Another cool technique is modular scrolling. As you scroll down, specific sections of the page change to produce a stunning visual effect.

modular scrolling
Image Source

One page websites can use scroll-triggered animations to create a fabulous effect, as Letters Inc. has done:

Scroll Triggered Animations 2
Image Source

13. Slideshows And Galleries

Full screen or partial screen slideshows make your website look great and work better for product images. Galleries are also easy to navigate on mobile devices because smaller screen sizes look awkward with additional navigation buttons.

Look at this stunning product slideshow from Relogik. The full-width effect captures the eye. Focus is not broken because the slideshow gradient merges seamlessly into the overall design. Both of these effects combine to highlight the product itself.

Slideshows And Galleries
Image Source

14. Subtle Animations

Animations don’t have to be flashy to gain attention. Human vision is sensitive to motion and will pick up the slightest of movements. Sometimes the brain often superimposes movement where there isn’t any!

Design firm, Carbure has a full screen animation on its homepage. Sounds a bit excessive, but you are mistaken. The animated elements are small and the movement is slow, this produces a relatively subtle effect.

Subtle Animations 2
Image Source

The website of the performing arts group Dragone makes clever use of subtle animation effects to make images seem captivating.

Subtle Animations 3
Image Source

You can’t see it in the image but the small yellow sparkles move slowly to create a magical effect. Visit the website to get a better idea.

Keep this list handy to know which user interaction trends you need to keep an eye on in 2017. If you agree or disagree with our analysis or think we missed something, leave a comment below. Alternatively, send us a quick Tweet @utter_web.

About The Author

Eva is a marketing major with a keen interest in web design. She is also an explorer and loves to dig into web trends from mobile apps to visual communication and everything in between. Feel free to send her your web design queries or blog related feedback in the comments below.

Leave a Reply