Animation

Lordicon's core is animation. In just a fraction of a second, animated icons bring static designs to life, effectively expressing everything from meaning to function. Whether to allay or provoke, convey the abstract or the literal — they delight by doing more with less.

Animation types

Most of the icons is delivered in several animation types. It means that static design has been animated in a multiple ways - example.

Animation triggered by user interaction is compatible only by using JSON format or HTML embed.

In

This animation presents the appearance of an icon. Connect it with the Intro trigger to play it on the page load.

Hover

This animation is designed for interaction. It begins quickly and gradually slows down. This animation is most effective when triggered by Hover or Click, but it can also Loop with a delay.

Morph

This animation transitions smoothly between two forms. It is compatible only with the Morph and Boomerang triggers.

Loop

This animation plays smoothly at a constant speed. It is compatible only with the Loop trigger.

Best practices

Create animation sequences

Some icons include multiple animation types, considering the actions they perform and the contexts in which they can be used. This approach empower to create unique and engaging user experiences by selecting a single or combining several animation types.

Mastering quality animation

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.

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. It’s great when 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.