Creating Beautiful Page Transitions on Your WordPress Site

How to Split Post or Page Title in WordPress
August 12, 2016
How to Add Links to Divi Fullwidth Slider Images–Divi Nation Short
August 13, 2016
Show all

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.

Domani is a digital agency specializing in strategy, marketing, and technology.
Domani is a digital agency specializing in strategy, marketing, and technology.

Smooth Slider

For websites with a minimalistic design, simpler page transitions will work best. A smooth slide will provide you with a simple, yet clean transition from one page to the next while adding an interesting touch of movement to your site.

This fun websites tests how well you know tools.
This fun websites tests how well you know tools.

Page Flip

How do you envision your pages moving? If you’re building an author’s website, you may want the page transitions to mimic the flip of a book’s page.

The online portfolio of freelancer Mary Smith features a book flip at the bottom of the page. Check it out.

3D Objects

Perhaps your website serves a creative, yet more structured artist type (like a designer or developer). A 3D page rotation would probably work better.

Smoke Screen

If your website leans more toward the dramatic, you could add a smoke screen or other nature-type transitional element (whatever relates best to your site’s overall style).

Train Robber is a virtual reality agency based in Los Angeles and New York.
Train Robber is a virtual reality agency based in Los Angeles and New York.

Reconstruction

Most commonly seen on parallax scrolling websites, “page” transitions can be as simple as the deconstruction and reconstruction of the central piece of the website. With these sorts of transitions, you’ll always want to make sure the reconstruction takes place on the same part of the screen so visitors don’t have to work to find it.

In Pieces is an interactive exhibition turned study into 30 of the world's most interesting but unfortunately endangered species.
In Pieces is an interactive exhibition turned study into 30 of the world’s most interesting but unfortunately endangered species.

Elemental Fade

Page fades tend to be more subtle transitions in general. However, for some extra pop, you can take the idea of reconstruction above and use it to fade in the individual elements of the next page.

Check out Loflo Records for a beautiful example of page fades.

Loflo Records, the online home of singer-songwriter Jane McNearly, is a beautiful example of an elemental fade.
Loflo Records, the online home of singer-songwriter Jane McNearly, is a beautiful example of an elemental fade.

The Basics

The examples above all demonstrate how page transitions work really well within the right setting and for the right company.

  • The style matches the overall vibe of the website.
  • The animation is simple and easy to focus on.
  • The movement contributes to a seamless and logical flow from one page to the next (usually from top to bottom or left to right).

If you’re just getting started with page transitions, consider taking a look at this collection of page transition styles. They’re all pretty basic in nature, but they do also provide enough variety in movement, direction, and style (especially the rotations) so that your website’s animation can stand out from others.

Remember: your goal here is to provide visitors with a seamless flow from one page to the next; not to overwhelm them with crazy-outlandish page transition effects. Sometimes, simpler styling is going to be the most effective choice for your website.

Now, if you’re ready, let’s talk how you create these transitions.

THEMES

Stunning drag ’n’ drop themes with Upfront

Drag, scale, position, customize and see every edit you make to your website – in real-time – with our Upfront theme framework for WordPress. Choose from our collection of starter themes and get started customizing your site right away. You know that design you’ve got in your head? You can build it with Upfront.

FIND OUT MORE

Animate Your Pages with These Tools

When it comes to website animation, you can really only pull these effects off using CSS, HTML, and jQuery. If you’re not comfortable making updates to scripts or coding, never fear. WordPress, of course, does have some tools available to help. It’s important to note, however, that while there are WordPress plugins to help you animate page transitions, most are limited in what their capabilities are. So if you are more accustomed to relying on WordPress plugins and themes to help you build websites, just make sure to set your expectations accordingly.

Regardless of your skill level in WordPress or coding, here are the tools we’d recommend for bringing some extra life to your page transitions.

  • Animate It!

    Animate It plugin

    In terms of plugins, this is the one you’ll want to start with. This covers all your bases in terms of page transitions, scroll animation effects, as well as hover animation. You can also control delays, duration, mobile disabling, animation type, and more—and you can take care of this all from an easy-to use interface within WordPress pages, posts, and widgets.

    Interested in Animate It!?

  • Page Transition

    Page Transition plugin

    If you want to start with something a little simpler and that will only give you control over page transitions (instead of all other animation effects), this is a great plugin to use. Whether you want your pages to fade, rotate, flip, or zoom, this plugin simplifies the process of setting your transitional effects up while ensuring you create a consistent page transition experience across the site.

    Interested in Page Transition?

  • Page scroll to id

    Page scroll to id plugin

    For smooth scrolling animation—vertical, horizontal, or something a little more complicated than that—this plugin will help you set that up. This also has a pretty comprehensive setup screen where you can make adjustments to the animation speed, scroll styling, target destination or page position, and more.

    This plugin may require some editing of CSS in order to get it working properly, so only use this plugin if you’re comfortable making the needed changes.

    Interested in Page scroll to id?

  • CSS Animations Library & Tutorial

    CSS Page Transitions

    CSS animations are the new Flash, but they’re much more lightweight and work across most browser types. When it comes to adding CSS animations to your WordPress website, there are a few ways you can accomplish this.

    • You can edit your theme’s stylesheet accordingly. In order to do this though, you’ll need to know which properties to define and where to add them to your stylesheet. If you’re going to go this route, you should just use the CSS Animate! Plugin instead as it will accomplish the same thing.
    • You can download and use this CSS3 library of animations. You can test each of the effects out right on that page and decide which page transition effect you want before applying it to your website.
    • Remember those basic page transition samples from earlier? Well, Tympanus has also created a fairly simple tutorial you can use for creating these effects on your website along with source files for each of those animations.

    Interested in CSS Animations Library & Tutorial?

  • jQuery Plugins and Tutorials

    jQuery plugins

    If you prefer using jQuery and are looking for some more advanced page transitions, this is the route you will want to take. The Nino Dezign website has put together this extremely useful list of JavaScript plugins and tutorials that you can use to attain some beautiful transition stylings.

    Interested in jQuery Plugins and Tutorials?

Wrapping Up

Have you ever heard of the User Experience Honeycomb before? Basically, it lays out the seven UX qualities you’ll always want associated with your website:

  • Valuable
  • Usable
  • Findable
  • Credible
  • Accessible
  • Desirable
  • Useful

Those characteristics are all very simple ideas, but they make a lot of sense in the context of web design and what we know works well with our online audience. They don’t want fancy tricks and they don’t want to be bogged down by unnecessary excess. This is true for your websites as a whole and it’s especially true for page transitions.

Your goal in establishing page transitions should be to further strengthen the UX and keep visitors engaged with each new page load. If you can keep them interested in your site with some eye-catching movements when they jump from page-to-page, you can cut down on that urge many of them may have to flee and give them a reason to be interested in and trust your well-built brand even more.

View @ WPMU DEV

Skip to toolbar