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:

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

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.

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.

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.

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.

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.

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.

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.

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.

3D Objects

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.

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.

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.

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.
TRY WPMU DEV FREE
LEARN 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!

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.

Page Transition

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.

Page scroll to id

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.

CSS Animations Library & Tutorial

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

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.

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.

Brenda Barron is a freelance writer from Southern California. She specializes in WordPress, tech, business and founded WP Theme Roundups. When not writing all the things, she's spending time with her family.

Get fresh WP updates directly to your inbox.

6 Responses

Note that instead of considering full page transition that would reload menu and widget, it may worth considering AJAX-like transition, that would only reload part of the website that need to reloaded, like the content and title of an article style page. There is some nice WordPress plugins for that kind of thing.

Ajax is just a way of “delivering/pushing” content to the site/browser and the content is readable. As long as search engine crawlers are not blocked, there should be no difference between AJAX and “regular” content. Here’s an explanation from Google but other search engines follow similar rules:

Page turns for complete pages are very user unfriendly!
You can try it actually here in several browsers, try to turn the pages with a mouse or other device.
Usually users would click into the site and it would do at least something but here ir does nothing.
The visitor has to find out by himself that this site is working horizontally instead of vertically.http://theme8.jessicaruben.com/

Same problem actually herehttp://codepen.io/robbue/full/ugByC
play around with it and let people visit that element who are no programmers but simple visitors of the site. Afterwards ask them how they felt.

http://loflorecords.com/
is a gimmick nothing more. Also here it is very disturbing the movements up and down like liquid.
the blue fields with are nice looking with non related sounds. While clicking on them you get directed to white pages as the upper area is not loading fast enough or seem to be not existing

animate css is great if used for some content which moves into position but it would be best if it stays there and won’t get liquid like on the mentioned page. Even the lazy loading effect of images can help to catch visitors attentions and keeping them longer on the site.

If you like to have a great site with transitions and actions visit that site as an example:

Here are some more WordPress exampleshttp://www.superlovers.fr uses a lot of transitions and visitors like to play around here so our experience to discover more. They do it because right at the beginning they see that there might be much much more to discover.

https://molekule.com/
an example which has a more than 10MB homepage and subpages with only few less MB ;-)
have a look to that site and make your own opinion and of course check it out in tools like gtmetrix:
Page Load Time
15.6s
Total Page Size
5.44MB
Requests
294

These are all valid remarks and good points. Let me please however disagree with your general conclusion: whether this looks nice and/or is easy to use is just a matter of a personal opinion and a way that you perceive things. For some, those examples may be annoying but for some others will cause higher engagement and even a kind of “wow factor”. Some transitions do increase interaction and engagement among “regular users” even though they may look “worse” for a pro :)

What I’m trying to say is that what works well is not what we like or not but what’s proven to work when measured with “hard statistics”. I’m sure we can both agree with this :)

Personally, I love simplicity and a lot of space. But that’s just my personal opinion :)

1. I downloaded and activated the Animate It! plugin by eleopard, went to one of my previously published posts (I will call the post “ZAPPA”), selected the basic Fadein animation (Delay: None / Duration: 0.5 / Timing: Linear), and pressed Animate it and Insert.

The plugin placed some code into the visual editor of ZAPPA. I opened ZAPPA and found two things:
a) I had an arrow on each side of my featured image that allowed me to move through my site horizontally, but
b) I could no longer scroll vertically down ZAPPA and read the post!

2. I tried to delete/erase the Animate It code from ZAPPA several times (including deleting/erasing it in several times in Autosaves), and it kept coming back.

3. I deactivated and reactivated the Animate It plugin. But the code remained on ZAPPA and in the autosaves.

4. I deleted and reinstalled the Animate It plugin. But the code remained on ZAPPA and in the autosaves.

5. I contacted my host service and they searched for every bit of Animate It code they could find and deleted it. But the code remained on ZAPPA and in the autosaves.

6. They replaced my entire site with a 24-hour old back-up—which is half a day before I activated the Animate It! plugin and added the code to the post.

Now I have a site that does NOT have the Animate It plugin, BUT STILL HAS THE ANIMATION!

I can move horizontally through my site, which is what I wanted.

I can now scroll down ZAPPA and read it, which is also what I wanted.

Now what I want is to know how the Animate It! plugin keeps on working after it’s been repeatedly deleted?!!?

And how do I get rid of the hidden code on my site!??!

I posted this on the Animate It! support page but based on their history, it could be days or weeks before I hear from them.