A Collection of Page Transitions

A showcase collection of various page transition effects using CSS animations.
A Collection of Page Transitions

From our monthly sponsor: monday.com is the last team management and design process tool you’ll ever need. Start your free trial.Advertisement

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.

Please note: this only works as intended in browsers that support the respective CSS properties.

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!

Tagged with:

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 270

Comments are closed.
  1. I would like to use these Page transitions but I don’t want to depend on jQuery – is that possible?
    If not, what exactly is the jQuery file contributing, for what is it used?

    • Hey Tobias,

      I turned it into an object so I can use it in other areas, as well as in itself. You can see the main differences to use strictly javascript thought

      currPage.classList.add(outClass);
      currPage.addEventListener(animEndEventName, function(){
      currPage.removeEventListener(animEndEventName, arguments.callee, false);
      that.endCurrPage = true;
      if (that.endNextPage) {
      that.onEndAnimation(currPage, next_page ,current, page);
      }
      });
      next_page.classList.add(inClass);
      next_page.addEventListener(animEndEventName, function(){
      next_page.removeEventListener(animEndEventName, arguments.callee, false);
      that.endNextPage = true;
      if (that.endCurrPage) {
      that.onEndAnimation(currPage, next_page ,current, page);
      }
      });

    • Hi amrit,

      Could you share where and how do you use the code you mention without using jquery?

  2. What I’m missing here is a way to have every landing-page (class=”pt-page pt-page-1″) contain a button-link (class=”pt-trigger”) to another landing-page.

  3. Hi there,
    I downloaded the files and the fade transition is not working on Firefox. Should I have downloaded somewhere else?

    Thank you!

  4. Hello everyone, I didnt check comments for a while. I saw a lot of ppl asking for code to go to a specific page.

    Well, I hope it will help you guyz : http://jsfiddle.net/tb2H3/

    -> jquery 1.9.1.js
    -> modernizr-latest.js
    -> pageTransition.js

    Css isnt complete, I deleted alot for my own website.

  5. Is there a sample where you just have an ahref tag that links to an entirely new HTML page? and then i can try different transitions on that one link?

    The source materials are a bit tough for me to just isolate one a tag and get it transition to a new HTML file.

    Thanks much!!

  6. It works nicely on your example but if you want to implement on your own page (code) , it’s more a headache than pleasure! It’s much better show little effective code snippets that can be handle it easily. It’s not a tutorial but demonstration!

    • not really, code is quite self-explanatory but you got to know words if you’d like to write a poem.

  7. Hi Stan – email address: ari@tsmstudio.com
    First off I love the Page Transitions. I am looking to use these transitions for external pages on a site for example a wordpress site. use cool transitions from page to page, not having all the coding on one. Is there a script you have done for that or can share? Any help would be great.

  8. Hello.
    I am a web work beginner.
    I got interested in your page changes very much.
    I thought that I would challenge.
    however, I want to display a button only on one certain page — it thinks.
    Is such a thing possible in this transition?
    Please let me know.

  9. Hey this article is great, however I’ve noticed an issue with having elements that are position ‘fixed’ not behaving properly (more like position absolute). Does anyone know a possible fix to get these elements behaving properly? I don’t really want to take them out of the ‘page structure’ and manually code the transition in for these elements, feel like that could create more issues than solve them.

  10. Hey there, i wanted to use these features on my site but needed it to work with navigation in any order..

    also needed it to be that if you are on page 4 for example , when you click page 2 it would auto slide directly to it,..

    i have made a working model that works with navigation and can navigate to any specific page ..

    really cool .. here it is..

    http://sunshinewebdesign.co.za/PageTransitions-fix/Transitions.zip

    its quite simple just using jQuery and classes..

    ps i also managed to hook it up to navigate with keyboard arrows and mousewheel scroll..

    if you would like these features just email me and will send it..

    thanks

    kiksharris@iafrica.com

  11. I would like to go next and previous slides if I scroll with mouse or press an arrow on the keyboard. I don’t know how to make it work, what javascript is needed to do this? I mean when you click a button, it has data-animation and data-goto attributes. But how can I give this parameters to a scroll function? I’m new to javascript, but I wanted to make this work on a website. Can anybody help me with this?

  12. Hi all, I wonder if someone can pass me the project or the code to make the transitions with buttons or links.

    I’ll be grateful for your response. Greetings!

  13. Hey. Thanks for this awesome effect.

    Could you explain how I can make the transition from “index.html” to “another.html” ?!

    🙂

    Thanks

  14. Hi, thanks for this beautiful page transition, really awesome. Please can anybody help me, as to how to be able to link one html to a different html. for instance if am at contact us and I click on home or about us. it should take me directly to home or about us and not to the page that follows the contact us please. Thanks for your help.

  15. I don’t need to the prev and next buttons. I would like to use self named anchors like #products or #contact. Counting the divs is not the best idea. I want to make subpages
    Anyone can change the code to this option? Also should remove this part from the script etc.

  16. How can I modify this to disable the button if your on page 1 or disable next button if your on the last page?

  17. Hi!

    I’d like to create buttons linked to each page but i really have few skills.
    When i click on a button the pages are switching, following the divs order. I don’t know how to disable this function.

    If someone can help me… 🙂
    Thanks and sorry for my english!