How to: Use Animation to Make Your Site Come to Life

How to: Use Animation to Make Your Site Come to Life

Motion always creates emotion.

Ever since I first read that quote, I haven’t been able to stop thinking about it. These past few months, I’ve been working on a new website for my employer to represent our central office. Throughout the site, I incorporated a subtle animation technique on page section titles, so they seem to grow as users encounter them, attracting the eye¬†and giving some life to the content.

via GIPHY

I especially love this effect on mobile, where long scrolling can get monotonous. An occasional break in the block of text gives users a little something extra, helping them understand that new information is being presented, and showing them that the site is reacting to their actions (the titles don’t grow until they are on the user’s screen).

The effect is very easy to implement. I used the plugin Shortcodes Ultimate to add the animation, right in my editor. Simple, elegant, and engaging!

Watch the video tutorial below for step-by-step instructions, and for my thoughts about why animation is such a nice feature:

Leave a Reply

Your email address will not be published. Required fields are marked *