Using animations to delight

Often site owners want to wow their visitors. They tell a web designer or developer phrases like “make it pop” or “more pizazz” or “I’ll know it when I see it”. Most often, you just want your site to have something memorable, something to show you are up to date in technology and style and hopefully, ultimately a win with the visitor in the form of conversion.

If we really examine what they want and need, we see that the users visiting the site just need clear communication and to be comfortable with the brand promise being proposed. Most the time a great design, clear copy and a little delight is all you need.

Using simple, subtle animations we can give them the pizazz they need without being over the top. Our new favorite go to library at factor1 is the ‘Animate on Scroll’ library. This approach is smooth and low impact on site load times.

Some quick examples of the animations we find useful.

Zoom — https://codepen.io/mattada/full/mqNPqy/

Fade in — https://codepen.io/mattada/full/xPvVXQ/

Flip — https://codepen.io/mattada/full/vWoGWB/

As you can see, these have a nice effect with a simple animation.

Some tips on using animations in your design and development.

• Keep them consistent. Stick to a clear pattern.
• Keep them light weight. No one wants page lag for the sake of nothing.
• Less is more. This is for your business, not a grade school poster caked in glitter.
• Watch how many per page you end up with. A few are fine, 9 is not.