How to Create a Full Page Animated Transition

In the past, adding page transitions on web pages has been a simple process. As you click on the link it redirects you to the next page as the browser loads the next page or element. The web has started to feel outdated if you will think about and there is plenty of room to improve. Wouldn’t it be great to add some smooth transitions to create a more proficient user experience the next page loads?

Good thing that it can be done. There are a lot of complicated applications and plugins that can offer the same type of effect and some might think that it’s hard to attain. Luckily, it doesn’t have to be this way.

I’ve been playing around with jQuery to figure out ways to replace the reload of a web page with an awesome animation that will surely blow the mind of the user without the use of plugin. Today I will share with you what I have.

Create the Markup

The HTML structure will just consists of two divs for the two pages which contain main-page and next-page ids.

Next let’s work on the main-page and next-page styles. Both of them share the same default properties except for the background color. I set the position to absolute and hide both element via display: none.