Get Active
If you snooze, you lose. That’s especially true in the cut-throat world of online marketing, where vanilla websites fade away faster than a 1980s hairband. When users get bored, they bounce, and given the short attention spans that addled and distracted people seem to have these days, you have to grab them by the lapels and make sure they see your website before they’re off for the latest clickbait.
How?
The gurus of web design have developed a magic bullet to blast the blahs from a bland webpage, and it’s called scroll animation. We’ll walk you through the basics and explain why it helps conversion rates rise. Scroll animation comes in many different flavors, serving a variety of purposes, so it’s crucial to understand what it can and can’t do.
Interactive Is Interesting
Static elements on a website just sit there, waiting to be consumed. Text stays put, images remain in place, and a call-to-action button beckons somewhere, waiting to be discovered. Until recently, most websites just existed, the way that blobs of jello sit on plates at a cafeteria until someone decides to blow their diet.
When a website is static, the user must do all the heavy lifting. They move a cursor, and nothing happens. Here’s where scroll animation changes the dynamics of UX. Think of that jello again. What if instead of picking up a plate of jello, the user stood back as the jello flew in the air and landed on the tray? That would be a sight for sore eyes, and impossible not to watch.
That’s the visual benefit of scroll animation. It takes something dead and brings it to life. Any element of a website can move: text, images, graphics, and video all can be manipulated to dance, spin, twirl, and possibly twerk. The human brain is wired to pay attention to movement, and without understanding the nuances, users feel drawn into this new interactive ecosystem.
The long and short of scroll animation is: when the cursor moves, stuff happens.
The Upside
The first benefit you’ll get from using scroll animation is increased engagement with your content. The idea behind scroll animation is that the user’s exploration of your website causes changes to take place because of the movement of the cursor.
Not just movement for the sake of movement: animation that highlights the purpose of your website, that otherwise might get lost in a static environment. Let’s say you want users to fill out a form or some other call-to-action. Scroll animation will attract the user to the precise place you want their attention, by unfurling a Special Offer banner, for example, so that this CAT enters in a natural and not forced manner, with an element of play that has broad appeal.
The scroll animation has to be married to a specific strategy to be fully effective. Text that vibrates or is on a “conveyor belt” might be jarring if there is a lack of sophistication or if the timing between the animation and the cursor is off.
Parallax View
Though it’s been around since 2011, parallax scroll animation remains one of the more stunning ways to add depth and a 3D feel to your website. The idea is relatively easy to understand: objects that are closer to the viewer appear larger and move faster than objects farther away, which is an optical illusion, of course. But on a website, you can manipulate foregrounded images with backgrounded ones and create very unique atmospheres from a UX standpoint.
These days, many plugins and JavaScript libraries have made adding parallax relatively simple, and so if you want your landing page to feel like users are walking along the Oregon coast or through a thick jungle, you can do so. The parallax view is so ubiquitous on the web because humans are naturally drawn to the trick. Again, the point is to bring heightened interest to your brand, and scroll animation using parallax deception is a proven winner.
Faster? Yes, Faster
You might be thinking: all of this sounds great, but won’t dancing letters and animated banners make my page load very slowly?
No.
Here’s why. With scrolled animation features, your website will load in a sequence that will engage the user, who won’t have the patience to sit and wait for something to load. You can stay on brand while your page is loading and hook the user from the start. The same goes for filling out forms online–a pop-up Thank You will let users know that a form has been submitted and doesn’t need to be re-typed.
A Caveat
Scrolled animation can fundamentally change the UX of your website, and anything that reduces bounce rate will positively correlate with conversion rates. If you get users to stick around, more good things will follow.
But you don’t want animation overkill, either. Fire an animation once, and don’t make users have to go through the same animation five times to get back to where they started. Never stray too far from the main purpose of why you have a website at all. And you absolutely must be sure that any scroll animation you use will translate to mobile devices. What looks amazing on a desktop might overwhelm an iPhone.
Otherwise, cue the dancing bears and happy scrolling.
