If you’ve been reading up on Oli Gardner’s recent ebook 23 Actionable Landing Page Design Principles That’ll Boost Conversions, you’ll notice that the second principle on the list is none other than motion.
Unfortunately, it’s ridiculously easy to go overboard with motion on the web… so the trick is finding a happy medium that catches the eye of your potential lead without giving them nausea inducing motion sickness.
We personally love this example from Optimizely which illustrates just how many optimized experiences their platform has powered.
This solution shows you how to add a simple ‘Count Up/Down’ animation to your page. This is a quick and delightful way of calling attention to some of the more impressive stats on your landing page.
See this effect in action on a live Unbounce page here:
How to Install in Unbounce
Click Here for Instructions
WARNING: YOU ARE ENTERING DEVELOPER TERRITORY
Download the .unbounce template for this script here:
Count Up Animation unbounce template
Create a textbox element and enter a number. This will be your starting number.
With the text editor still open, click the ‘Source’ button.
Add the ‘counter’ class and the data-count attribute to the innermost span surrounding your number. Here’s an example of what this should look like:
The value of the data-count attribute is the target number for your counter. In the example above it is set to 20000.
If your number isn’t surrounded by a span, add a new one!
Save and publish.
Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.
We’ve given you the ground work, but we would love to see how you implement this on your own pages. This is your chance to get creative and show the Unbounce community how you’re using this.
Did you find this tip useful? Did you test this on your landing page? Let us know in the comments below!
Want to take your Unbounce landing pages + Convertables™ to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks