Animating items as they come into view

Question

What are the good usability and UX guidelines when considering animating elements when you scroll down the page and they come into view?

For example, this template - http://mamootstudio.com/themes/flanzo-1-2/option-1/index.html - excessively uses this method which, frankly, seems quite over the top.

However, there might be cases when animating some feature or element when it comes into view could increase clarity and ability to understand what it represents, but mostly I see this method used in vain.

What would be good questions to ask and pros/cons to consider when deciding whether animating a feature or element when it comes into view is worth it from UX perspective?

Answer 1

Our peripheral vision is really bad at seeing colour and shape, but good at seeing movement. There is even a specific part of the visual cortex that handles drawing our attention to these movements. The eye only sees details within a very small area, and your brain constructs the larger picture for you as your eye moves about. Movement can be used to inform the brain about something novel (so you can glance at it and add the information to your mental map), but if you have lots of things flickering at the edge of your vision it will be distracting. A good rule of thumb is to reserve this behavior for important things that you want the user to notice. Don't simultaniously draw their attention to opposite sides of the screen.

If you know the user is already looking at the element on the page, e.g. because they are currently interacting with the element, then animations should be fine.

To summerize:

• Do you know if the user is already looking at the element? If yes then animation is ok.
• If not, is the element important enough to require immediate attention?
• Are there other movements on other areas of the screen demanding the user's attention?

Answer 2

To my opinion animations should add context and shouldn't be superfluous.

Animating an off-canvas menu while it moves on screen adds context. It tells the user where it comes from.

This article gives you a lot more examples than I can give you. It's worth a read.

In the example template I mostly see superfluous animations.