Creating Beautiful Page Transitions on Your WordPress Site

Okay, so you've heard it before: humans have a shorter attention span than goldfish. If you think about it though, that's not really a fair comparison to make.

Your pet goldfish probably only has a few interesting things to look at in your home. They might occasionally tune into whichever show or movie is playing on the TV, but otherwise, it's just a bunch of furniture they have to stare at. Not too many distractions there, right? But for humans, it's a different story.

Whether it's in the world around us or in the digital space, there are distractions galore-and they're all competing for our attention. Right now. That's why there is so much emphasis placed on designing websites effectively. Using colors and imagery to elicit the right emotions and reactions. Guiding visitors through your story with simple, easy-to-find navigation. Placing straightforward calls-to-action exactly where and when visitors are feeling motivated to do something.

One of the points we try to drive home as much as possible is the importance of your site's speed. If you can't provide your visitors with that (near-)instant gratification of accessing your site and opening new pages within it, all of that other hard work was for naught.

Back in 2000, you could've gotten away with a website load time of maybe 12 seconds (the average human attention span at the time). But in 2016, you're dealing with a much shorter timeframe to hook your “fish.” Right now, we're looking at an average attention span of about 8 seconds. However, marketing studies would suggest that you really only have 3 seconds to gain someone's attention before they jump ship on your website.

So what do you do?

If you force visitors to sit and wait for a page to load, you're going to lose them-them and the conversions you were hoping to make with your awesomely designed website. Don't give them a chance to get distracted. If you've got a website that will unavoidably take some time to load or you just want to give the jump from page-to-page a little more pep, add some animation to your page transitions.

For Smoother Website Travels

There are a number of ways to increase your website's speed. You could use a plugin (like Hummingbird) to minify and compress as much of your website's files as possible. That's always a great place to start. CDNs are also a must if you're hoping to decrease any lag time caused by visitors from around the globe trying to access your site's distant server files.

Regardless of the tools you use to keep your site's speed in check, it's a good idea to consider giving your page transitions a bit more life.

Let's say someone clicks on a link from your homepage and there is a sudden flash of white (no more than half a second) as the new page loads. That might take some people aback, leaving them to wonder why the page didn't load right away. Perhaps it's not even a matter of how quickly that next page loads. Let's say instead you have a single page website and your visitors are bored with the static banner strips littered through the page. Flat design is great in terms of keeping things simple, but it's not always great in keeping your visitors' attention.

This is where animation in page transitions comes in.

Why Use Page Transitions?

Animation, in general, is a great way to add more life to web design. However, it should be used strategically and should align well with the overall style of the website. This applies to basic elemental animation (like forcing an icon to spin when someone hovers over it) as well as in the transitioning from page-to-page.

Here are some reasons why animation works especially well for page transitions:

• Movement: The right type and right speed helps keep visitors engage in what's on the screen as your site loads in the background.


• Entertainment: If your animation allows for some form of interactivity, you can keep visitors actively interacting with your site while they wait for a page to load.


• Flow: As you tell your website's story, you need to have smooth transitions from one page to the next. Rather than rely on a simple page change, use a transitional element that will keep the story moving seamlessly along.


• Suspense: There are certain transitions that aim to create a sort of “pop” or surprise as visitors encounter them-these work especially well for single page websites that reveal different “pages” via a scroll.


• Modernization: Websites with the right kind of animation appear more modern than their static counterparts, whether it's through the use of video, parallax scrolling, and, in this case, page transitions.

If you want to minimize any gaps in UX caused by a slower-loading site or just want to give visitors something fun to do as they move through your website, page-to-page animation is a great way to hold their engagement and increase your conversion rate. Do keep in mind though that execution is of the utmost importance.

Here are some tips to help keep you on track when approaching page transitions:

1. A website littered with animations (for page transitions or otherwise) may be just as distracting and unprofessional looking as an ill-designed website.


2. Try to keep the amount of animation on your website to a minimum so that when it does occur between pages, it has the intended effect of holding your visitors' attention.


3. Page transitions should not be jarring. They should aid in the smooth transition from one part of your website to the next and be relevant to the overall story.


4. It should be clear that an animation is guiding visitors from one part of the website to another. There should be no confusion as to what they're looking at or what to do next, and there should always be a sense of continuity between two pages.


5. Transition animations don't have to always be over-the-top. If you want to use a bunny hopping across the page to indicate loading progress, go for it.


6. Keep your page transitions consistent in style. So if you've used a storybook page flip between two pages, you should maintain that throughout the site.


7. Ensure that the speed of the animation makes sense for what you want it to accomplish. Slower transitions tend to be less shocking and more effective at controlling visitors' focus. Fast animations, however, tend to shake visitors out of one state (almost like a wake-up call) and bring them into another related state.

The moral of the story?

Choose your animations carefully. If not used properly, they can do as much harm to your website's reception and business's reputation as a poor design choice. Visitors shouldn't see a page transition and realize you're hiding a slow-loading page behind it nor should they be confused by why it's there in the first place. The transition should enhance the experience of traveling through your website and motivate visitors to wait and see what else you have to offer.

Consider the Page Transition Possibilities

Before we discuss how to go about building page transitions in WordPress, let's take a moment to review the possibilities.

The Spinner

For the most basic of page transitions, you can rely on a singular spinning or rotating object in the middle of the page to let visitors know something is coming next.