A Collection of Page Transitions

View demo Download source

Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspective and 3d transforms to create some depth and dynamics.

Please note that this is just for showcasing some interesting effects and for inspiration. It is not a slider or anything like that. We’ll just apply some classes to make the page transition visible, not for navigating.

The CSS animations are divided into different sets, depending on what they do.

For showcasing the page transitions, we’ve used the following structure:

<div id="pt-main" class="pt-perspective">
	<div class="pt-page pt-page-1">
		<h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
	</div>
	<div class="pt-page pt-page-2"><!-- ... --></div>
	<!-- ... -->
</div>

The perspective container is relative and we add a perspective of 1200px to it. The following styles are needed for all animations to work:

.pt-perspective {
	position: relative;
	width: 100%;
	height: 100%;
	perspective: 1200px;
	transform-style: preserve-3d;
}

.pt-page {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	overflow: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}

.pt-page-current,
.no-js .pt-page {
	visibility: visible;
}

.no-js body {
	overflow: auto;
}

.pt-page-ontop {
	z-index: 999;
}

The .pt-page-ontop is used for some of the page transitions where we need one of the pages to stay on top of the other one.

An example for animation classes and keyframe animations are the following ones that scale the pages in different directions and fade them in or out:

/* scale and fade */

.pt-page-scaleDown {
	animation: scaleDown .7s ease both;
}

.pt-page-scaleUp {
	animation: scaleUp .7s ease both;
}

.pt-page-scaleUpDown {
	animation: scaleUpDown .5s ease both;
}

.pt-page-scaleDownUp {
	animation: scaleDownUp .5s ease both;
}

.pt-page-scaleDownCenter {
	animation: scaleDownCenter .4s ease-in both;
}

.pt-page-scaleUpCenter {
	animation: scaleUpCenter .4s ease-out both;
}

/************ keyframes ************/

/* scale and fade */

@keyframes scaleDown {
	to { opacity: 0; transform: scale(.8); }
}

@keyframes scaleUp {
	from { opacity: 0; transform: scale(.8); }
}

@keyframes scaleUpDown {
	from { opacity: 0; transform: scale(1.2); }
}

@keyframes scaleDownUp {
	to { opacity: 0; transform: scale(1.2); }
}

@keyframes scaleDownCenter {
	to { opacity: 0; transform: scale(.7); }
}

@keyframes scaleUpCenter {
	from { opacity: 0; transform: scale(.7); }
}

For the purpose of this demonstration we apply the respective animation classes to the current page and the incoming one. For example:

//...

case 17:
	outClass = 'pt-page-scaleDown';
	inClass = 'pt-page-moveFromRight pt-page-ontop';
	break;
case 18:
	outClass = 'pt-page-scaleDown';
	inClass = 'pt-page-moveFromLeft pt-page-ontop';
	break;
case 19:
	outClass = 'pt-page-scaleDown';
	inClass = 'pt-page-moveFromBottom pt-page-ontop';
	break;

// ...

Check out the demo where you can simply iterate through the whole set of page transitions using the first button. You can also choose a specific effect from the drop-down menu.

I hope you enjoy this and get inspired to build some exciting things!

Pedro Botelho in Playground