Bringing Landing Pages to Life With Animation
April 19, 2017 | Dan Trefethen
Landing pages, whether they like it or not, are still the primary conversion source for marketers.
Unfortunately, audiences are getting bored.
With the amount of standard, status quo landing pages that fill their screens every day, their patience is at a serious low. We’re talking a fraction-of-a-second-low according to a Google study on user perception.
That means buyers are less and less likely to stick around and read an entire landing page if it isn’t aesthetically pleasing and different than the million other landing pages they’ve seen.
According to Google, viewers judge a webpage’s aesthetic and functional quality in about 1/20th of a second.
A DemandGen Report study backed this up in a profound way. It found that 91% of buyers are looking for more visual and interactive content.
That’s 91% of your audience wanting something different than the same old stuff they’ve been served up for years.
Adding animation is a simple yet powerful way to bring your content to life and make your landing page more visually unique.
To help illustrate this, let’s look at what an animated landing page could look like with this demo example (click to see full demo landing page):
Now we’ll walk through the process and options of adding animations for a sound aesthetic experience.
Landing Page Animation Preparation
We’re big fans of planning here at SnapApp. Every marketing effort goes more smoothly when you start with a plan. Animating a landing page is no exception.
1. Decide which landing page you’re going to animate.
Adding animation doesn’t mean you need to create a landing page design from scratch. You can use a design you already have, and simply add animation elements to it.
Also, the subject of the content the landing page is gating can influence the tone of the animations. Depending on the theme or tone, the animations can reflect that (think big and silly vs. subtle and elegant).
2. Think about the experience you want your visitor to have.
Identifying the goal of landing will help focus how animation should be used. Where do you want to guide the user’s focus? What action you do want them to take?
You can animate almost anything on a landing page. Consider:
- Body text
- Standalone graphics (like the propellers in our example above)
- Background or overlay graphics
3. Create transparent PNG files for each animated element.
Once you’ve got a plan in place, we recommend using transparent PNG files for each of the elements you’d like to animate.
PNGs are a great file format for animated images because they’re already optimized for web, so they’ll load quickly on the page, and they can have a transparent background, meaning the image animation will look seamless in your live SnapApp when layered over other elements.
4. Determine how you want your animations to move.
Depending on what tool you’re using to animate your landing pages, you’ll have different options. Identify what you have available to you, or if going a custom route where anything is an option, select 2-4 simple styles and stick to those. You don’t want to go overboard with elements flying in from all over the place and distracting users.
Some simple, but appealing animations for text and images are:
- Slide in (from left, right, up, or down)
- Fade in
- Appropriate graphic motion (think propellers spinning, a pencil writing, a plane flying)
Depending on what you decide to animate, you’ll adjust those options to create the movement you want. Some things to consider when determining how your animation will move include:
How you want the animation to be triggered
Do you want the animation to play as soon as the page loads, or as the user scrolls down the page?
Page movement in background animations
Do you want the movement to be strong or subtle? Should each element move at the same pace, or should some move slower than others?
We suggest using the same background element animation for each section of a page (like text slide-in, for example), but alternating the direction for a more interesting user experience.
If you want to simulate motion in graphic elements
You can have a car driving by, a plane flying, a propeller spinning, a flower blooming … there are so many options! What animation would help drive your message home while giving the user something fun to watch?
5. Using GIFs
Using gif files strategically can also help if animation tools are unavailable. Either using them to create subtle movement to guide users’ attention, or to bring a static graphic more to life.
As we see with this cheetah example for Quicksprout, would would normally be a rather typical reading experiences becomes more vibrant and attention-grabbing.
However, there are a few disadvantages of gifs.
- They can be distracting due to their never-ending repeat – use sparingly.
- The file sizes can be quite large and difficult to work with, and making them smaller cna drop image quality significantly
- To create a truly branded and cohesive experience, gifs would need to custom made by someone with experience in graphics and design – so resources/ bandwidth issues can arise.
Animation Options and Tools Available in SnapApp
You can add animations to just about any element in your SnapApp. Simply find something you’d like animate, open the config menu, and navigate to the “Animation” tab.
The Type dropdown lets you select the type of animation to be applied. Clicking through each type in the dropdown will preview the animation on the element in the canvas. You can re-display the selected animation type at any time by clicking the Preview button.
The Direction dropdown is available for select types, and allows you to customize the direction from which the animation originates.
The Speed dropdown lets you customize how long it takes the animations to complete from start to finish. We provide three default options, and for maximum customization a “Time” option which lets you set the animation speed down to one tenth of a second.
Animations are triggered in one of two ways:
- when you load the page your SnapApp lives on; or
- as you scroll through the experience.
Page load is the primary trigger, meaning that as the end-user loads the SnapApp page, all elements that are visible on that page within their browser window will animate. Browser scroll is the secondary trigger, meaning anything not visible on the initial page load will animate as the user scrolls it into view.
Keep this behavior in mind when placing content throughout the canvas for the desktop, tablet, and mobile versions of your engagement, as the size of the device will determine when your animations occur.
Creating Subtle Page Movement
Let’s start by creating some subtle page movement. As you can see from the demo and as we noted above, we tend to prefer adding more subtle animations to background bars and prominent text like titles. For longer landing pages with multiple sections, try using the same animation for each section background and title, but alternate the “Direction” dropdown per section.
Another cool trick is to alter the speed of a section background and the content that lives within it. Go ahead and reload the demo SnapApp provided above and pay close attention to the first survey question.
Notice how the white background bar loads slower than the answer options? You can achieve this result by again using the same animation for both elements, however this time altering the “Speed” dropdown for each element.
Did you notice in our demo how the propellers on the little engines appear to spin as you scroll? You can use animations in this fashion to simulate motion on any number of things.
To create the propeller effect, we created two separate PNG image files: one of the engine and one of the propeller. In the builder, the engines have no animation, while we applied the “Rotate” animation at “Fast” speed to the propellers.
This is just one example of how you can use animations to simulate motion.
See another great example of an animated landing page with simulated motion by clicking the gif below!
Directing Your Audience
Take another look at our first demo. You’ll notice that as you scroll down the page, you’re occasionally reminded that there’s more below the fold with a little bouncing arrow icon. This is simply an arrow image to which we’ve added a “Pop” animation.
Ensuring Good UX
Finally, as tempting as it may be to go nuts with your animations, keep in mind that the ultimate goal is to create a usable experience for your audience. It’s all too easy to turn your landing page into a carnival funhouse, so make sure to keep the global experience in mind as you incorporate animations. Good UX leads to great results.
Animate elements that guide your user down the page to take the action you want them to take. Animate elements that help your reader pay attention to the most important aspects of the page. Don’t animate everything. Be thoughtful!
Animation Is a Fantastic Starting Point – but Interaction Doesn’t Have to Stop There
“Interactive content such as assessments, calculators, configurators, and quizzes generate conversions at a 2x higher rate than passive content.” — DemandMetric, Enhancing the Buyer’s Journey
Did you notice on that demo landing page that there was a quiz built right into the page? Animation is a great starting point for creating more dynamic landing pages – but don’t stop there!
With that, I’m going to leave you with some additional examples interactive content examples to inspire your animation endeavors.
Remember, your landing page is driving toward a business goal. What interactive element(s) would help you achieve that goal faster, more efficiently, and with a greater customer.
With that we bid you adieu! Sound off in the comments if you’ve got some helpful animation tips and tricks of your own.