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.
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.
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.
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.
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.
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.
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.
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".
🐟 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.
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.
Get your website analysed for conversion for 5$.Get Conversion Analysis
90%off promo code: XK1NVSWR
Here's an example for Resumey.
Practical conversion tips and cases. Weekly.
Join Our Community
To learn from practical tips and case studies: join my community of founders