How to use animation to increase conversion

Imagine you’re in the savanna. Imagine you’re in the savanna 30 000 years ago. Now you see a lion run towards you.
Our ancestors evolved to survive by noticing movements. Any movement detection has direct access to our brain.

Companies learned to hack our evolutionary behaviors to their advantage. Like social media using our natural dopamine craving. But that’s another story.

Mombasa animation by Brent van Helvoirt

You don't have to be an expert in animations

Believe me or not but the most effective animations are the subtle ones. I know Apple product pages are cool and inspiring. They are done by great designers and engineers. But, one subtle "fade in" or "move" of individual elements on your page can be as effective. If not more.

iPad Air animation by Apple

What can animations do?

As mentioned in my other article about the purpose of design: grab attention and convey a message. Some of the techniques to emphasize something are size, color, position, or contrast. Animations override all of them. It's the equivalent of !Important CSS property. Use it with caution.

Grab attention

Your visitors will scan your hero image or graphic first. Take advantage of that. Create subtle animations that explain better your product or offer. How will the interface be used? How simple it is? Keep it simple.
I use Principle or Figma smart animate feature.
If it's too complicated for you it might be very easy for a designer. Hire one for a small gig.

Example of showing the quality of the product by Amie.so

Convey a message

Channel your visitor's attention to the area of the website you want. If you have a unique selling proposition that you want to convey and it comes after your main headline: use animation to guide people's gaze in that area. Make sure it's valuable.

Example from an E-commerce landing page concept. Notice the "Will be made" highlight. Design by Ugem

Another technique is to guide your visitor's attention while scrolling your landing page. People find their own way of scanning the entire website: usually from top to bottom, left to right. You can still guide them and highlight an important part of your message.

Example of guiding the flow for Cerbo. Design by Outcrowd

What animations can't do

No amount of fancy animations or parallax effects will substitute a clear message. Or product people will want to use. Make sure to take care of the basics first. Animation is a sparkle on top.

‍

Don't go crazy with animations

Please animate one element at a time.
People can easily get overwhelmed by many things moving at the same time. Sometimes get even nauseous.
If you want to take your website to another level hire a designer that knows how to sequence animations properly.

‍

Practically creating animation. A simple way

For graphics animations I use Figma. It's free and its Smart Animate feature is simple and straightforward. For me at least.
Here's a great tutorial by Jesse Showalter.

Next, I use Giphy Capture to record my screen running the Figma prototype and convert it to GIF or Video. There might be a better way to export animations with plugins but for me, this works.

I then add the GIF or Video in my visual development tool. Videos have higher quality and lower size.

Tools used for simple animations for the web

For animating elements, I use [Webflow] as my visual development tool.
It has a great set of features to create: element and page-based animations.

How to do it is beyond the scope of this article but Webflow has great documentation. Remember to keep things simple. Use simple "fades" and "move".

Webflow panel for simple animations and transitions

🐟 Just give me the fish

Use animations to hijack someone's attention on your landing page. Animate one element at a time. Make sure that element provides value.

Animate hero graphics with Figma (with Smart Animate)or Principle.
Animate website elements with Webflow visual feature or with CSS/Javascript.

Hire a designer for a mini gig for complex animations.

‍

Apply for a free redesign

I hope you found it useful.
Every 2 weeks I redesign for free the Landing for an interesting online business.
Apply here if you want.

To just learn from practical tips and case studies: join our community