UI Animations make the web experience more interesting, interactive and entertaining and with the use of modern web technologies are being used more and more. HTML5 has meant that animations can now be easily seen across all devices and can be scaled to any screen.
HTML5 has largely replaced Flash although Flash is still quite widely used and isn’t going away completely any time soon.
UI Animations are commonly used at the top of a website’s homepage and generally are in the form of a slider showing links and previews of the websites content.
There are many types of UI animations though that can be utilised on a site and it’s important to pick and choose the right kind of animation for the right place that will add to your site’s story, branding or personality.
Animations can fit into one of two groups;
- Large scale animation. These have more impact on users and are used for interactivity. They include effects like parallax scrolling and pop-ups.
- Small animations. These include elements like loading bars, hover effects and spinners. They don’t have any user interactivity and are there purely for display or informative purposes.
The most popular animation techniques
Galleries and slideshows
Perhaps the most popular and accessible type on animation in the WordPress era. Slideshows effectively showcase multiple images, products or subjects without overloading the user.
Loading animations
These are used to keep a user entertained and informed during the loading process of a page or element.
Non-scrolling Navigation Menus
Non-scrolling or mega menus are becoming more popular as they save screen real estate and can be far more interesting than a simple drop down menu.
Hover Animations
Hover animations give feedback and feel more natural to a user when they mouse over elements on a page.
Motion Animation
Our eyes are naturally drawn to motion so animations are great for catching a user’s attention.
Scrolling
Smooth scrolling enables elements to be animated with a user controlled speed. The animation only proceeds when a user scrolls and at the speed at which they are scrolling.
Background Animations & Videos
Animated backgrounds can look visually stunning on a website but should be used in moderation as they can be very distracting as they cover large areas.
The widespread use of WordPress with its themes and plugins has made web animation far more accessible to designers. As more tools are available for developing HTML5 animations this trend will surely continue.
