Rich Animations

Remember good old Flash? Where you could have thing fly in from the side and buttons would slow transition in and out after clicked? Or even the gradual appearance of content to build anticipation? Well with the increase of mobile phones and tablets, which can’t read Flash, Flash has become an ancient software. Although with the development of HTML5 and CSS3 there are a lot more options to add animations across multiple devices and browsers.

We want to make sure we use animation wisely though. Here are 2 good rules of thumb:

• Large Scale: Used in the primary content or throughout every page with parallax or anchor scrolling.
• Small Scale: These include subtitle animations such as loading bars or hover effects.

Here are top animations used:

1. Loading Animations: It’s that loading graphic we can’t stop watching while content is being rendered.
2. Navigation and Menus: We see this more and more with hidden navigations or sticky headers once you start to scroll.
3. Hover Animations: Typically used in portfolios but we are seeing them used more in callouts to show more content once someone hovers.
4. Galleries and Slideshows: We’ve all seen these. The main struggle is how we get it to fit your specific brand and create a unique interactive experience.
5. Motion Animation: Adding in motion graphics can really help you stand out. It creates an interactive experience with your user that helps your brand, making a lasting impression.
6. Scrolling: With one-page websites becoming more popular it becomes hard to create an interactive and visually stimulating website. With scrolling animation you can engage your visitor while still showcasing your services.
7. Background Animation/Videos: I’m suggesting this more and more to clients. Visitors don’t scroll through the 5 slideshows on the Home page. But if you have an interactive background and your main message on the top with links inside the site, that is a good directional marketing asset.

Reference article by AWWWards on 2016 Web Trends