Some of the icons are delivered in several animation types. This means that static design has been animated in a few different ways.
Animation
We distinguish the following animation types:
Intro
This animated sequence reveals the icon and is ideal to use when the page loads. It’s characterised by a fast beginning that calms down gently.
Hover
This perfectly designed loop animation focuses on interaction or occasional animation. The animation starts fast and slows down gently. The ideal use case for the icon is to play it on hover or click. However, it can also be set on a loop and still performs well.
Loop
Animation which plays infinitely without any interruptions. It is great for screen loaders, as the speed of the animation remains constant.
Morph
Animation that presents two phases of an icon. This icon usually changes between two forms, like switched on and off. The speed of motion is constant and smooth, making it work great when played forward or reversed.
Avoid unrealistic animation
At Lordicon we put maximum focus on delivering quality over quantity. This is why you can be sure that when using our resources, you are getting the highest quality animation. However, if you find yourself in a position of outsourcing animation to an external vendor, this point will guide you on how to overcome some common problems.
The first thing to remember when you plan to add animation to your project is whether or not it’s natural. If an animation looks or feels out of place, the overriding user feeling is going to be one of confusion.
Familiarity is the key to keeping your user on board with your message. If an animation bounces unnaturally for no reason, or it somehow breaks the natural laws of physics, it’s probably not going to fit the purpose.
Animations that break the natural laws of physics leave the user unsettled.
Correct dynamics help users associate movement with real-life situations.
Anything that forces you to question the order of things is a negative type of attention. Irregular movement is an example of an animation that doesn’t quite fit with the real world, and can leave your user feeling somewhat unsettled.
So, you need to design your user experience around this. Smooth motion and accurate movements will be more relatable and as a result, more likely to be accepted.
Try to avoid unnatural 3D movements.
A correctly animated 3D spinning cube
An incorrectly animated walk cycle doesn’t reflect real-life physics.
A walk cycle done accurately is instantly recognizable to the user.
As well as the motion itself, we also need to keep in mind the meaning of the movement. Sure, it’s great if the animation supports and strengthens the intent of the icon, but if the animation doesn’t convey the message accurately then it will confuse the user.
Disorienting the user destroys the icon’s message, which in turn can put your users off your product.
The wave and wiggle animations here don’t support the meaning of a home security icon.
Keeping the animation organic strengthens the meaning of the icon. This adds real value.
In a nutshell, every movement must serve a purpose, reflect real-world physics, embody precision, and communicate clearly.
