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
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
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 quality of the product by Amie.so
Example of showing the quality of the product by Amie.so

Get your website evaluated by me

Get your landing analysed for conversion for 5$.
Use 90%off promo code: XK1NVSWR

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
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
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.

If you’re looking for a tool to build your website. Use Webflow.
It’s the best and has no constraints on design. Iterate for conversion.


— Oleg

Get your website analysed for conversion for 5$.
90%off promo code: XK1NVSWR

Get Conversion Analysis

Here's an example for Resumey.

Practical conversion tips and cases. Weekly.

Awesome! We sent you an email confirmation
Oops! Something went wrong while submitting the form.

Join Our Community

To learn from practical tips and case studies: join my community of founders

We're affiliated with some products we recommend to support us. We don't suggest ones we wouldn't use.

More Articles

All Articles
Copywriting

Storytelling to increase website conversion

How to design a landing page that is not boring
View ArticleArrow Button
All Articles
Analytics

You are what you measure. Landing page analytics for beginners.

Traffic that doesn't convert is like the night sky without the stars. The stars are your customers.
View ArticleArrow Button