Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

Vertical Page transition reveal effect

page transition reveal
Like & share to be notified of the new tips & tutorials:

Vertical Page transition reveal effect

In this tutorial we will create a nice looking page transition reveal effect using css3 animations and a bit of javascript(jQuery). Check out the demo to see how it looks.


First we need to have a container div which is our main. This is the div that has the width and height of the viewport and the overflow is hidden so that there will be no scroll. Within the main div we have our sections container with the class .section which contains all of our sections. We should make sure that this div has the width of the viewport and a hidden overflow style. Each of the sections within this container also have width and height of the viewport.
We also have a div with class transitioner which is our revealer div when we click the trigger arrow.
Apart from that we have our logo div which also animates when we go back and forth.

As you can see we have a navigation which represents our trigger arrow on the bottom of the page. Using javascript then we switch arrow to the right direction of the navigation whether its up or down.


Take a look at the styling:

It’s self explanatory. We need to amke sure we set the width and height to the correct values of the viewport. width: 100% and height: 100vh.
Now the most important part. As you can see when we click on the arrow to go to the next page, we animate the transitioner div and also our logo div. Let’s take a look at the styles.

As you can see, we have defined 2 sets of animations for the logo and our transitioner. One for going down and one for going up. Then using javascript we choose the right one.


The most important part is interactivity. We use jQuery to achieve this.