Have you noticed websites abandoning static homepages for transitions like the popular fade in? Why is this? Animated pages and page transitions provide a better user experience. Even fading in can give the site a different feel. Page transitions are visually appealing and interactive. This site is a great way to find the perfect transition for your content.

How to Incorporate Page Transitions

There are two ways to add transitions to a page. One is using the content management system’s options for adding animations. The other choice is to code the transitions.

Use your Content Management System

The easiest way to add animations is to use plugins or modules. There are tons of free WordPress plugins that allow you to add transitions without any knowledge of code. Here are ten. Always check your platform for plugins. It will help you avoid coding. Google “add page transitions to” and the name of your platform to easily find the best for your site.

But, if you Must

Coding isn’t actually too hard. In fact, some platforms (we’re looking at you, Magento) require coding for even the simplest of additions. It’s usually just a matter of copying and pasting, or learning the basics and meticulously adding them into the background of your editor.

The first step, if you haven’t played around in the background, is to watch tutorial videos about adding code to your specific platform. Here’s how it’s done in WordPress.

Use YouTube to look up how to embed html code into your platform. Then have at it! We really like the transition Medium uses. It’s slick, modern and won’t slow your speed too much. This great article includes the code and is the perfect way to practice on your own site—just create a post and play around. Try substituting things to see what you get. Have fun trying out some different ideas here and again, get comfortable by experimenting. Who knows? That beautiful mistake could be the next big page transition trend.

Keep in Mind: Use Animations to Navigate not to Impress

Carefully pick and choose where you use animations and page transitions. Start with your homepage but don’t start with every page. Too many animations slow down page loading time. “The way to improve the load time is to cheat a bit! Cheat by making the user think it takes less time because they are distracted by what’s happening on the screen. Cheat by loading the content ahead of time and animating the transition” (CSS-tricks).

Parallax scrolling is still popular and elements scrolling at different speeds creates depth.

There’s a reason those huge videos aren’t showing up on home pages anymore: they make sites slow. Humans have zero attention span. According to Kissmetrics, 47% of visitors expect a website to load in fewer than two seconds. Additionally, 40% of visitors will leave the website if it takes more than 3 seconds to load. Take a pass on the large videos and instead, opt for animated gifs and css/js animations to keep load times low.

Update Your Site With Digital Firefly Marketing

Now that you know about page transitions, let us help you decide how to use them. Get a free design and development audit to get expert feedback on how your site can load quickly while offering a texturized, interactive experience through animations.