A Collection of Page Transitions

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

A Collection of Page Transitions

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:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 270

Comments are closed.
  1. Hi Stan,

    I would appreciate it if you could also send your code, apologies for being another on the list.

    I love this transition package and want to merge it with my existing layout, but I need the gotoPage(n) function for the main navigation menu.

    Thank you for offering to share 🙂

  2. Stan,

    Thanx for the great work. Could you send me the code?

    Thanx in advance,

    Lennard

  3. Hello great tutorial , I have a question – pls help. I get the zip file open html and all other files.
    I want to use “pt-page-moveToTop” effect and del all rest of un needed info. Where to attached this class? Can someone just point me.

    Thx

  4. Hi Stan,

    I’ve been trying to implement your brilliant code, but getting stuck on function gotoPage(page – number). Chrome is picking up a lot of illegal tokens and so I’m trying to fix them. Could you please email a copy of your working code? Thanks in advance!

    mjszone@yahoo.ca

    • Hi Stan,

      Could you send me your code as well? Hopefully in a zip with supporting files so I can see how it works. Particularly I’m trying to get it to work with transitioning to specific pages. Thanks!

      jlee@gyver.com

    • try with this : function gotoPage(pageNumber)
      Issue is the – between page and number (page-number), it doesnt work :d

      I put a new comment on page 8, take a look

  5. Hi Stan!

    Thanx for the code! Aaaaaand could you please send me also the code for specific page? :))))

    Thanx in advance,
    Ana

  6. @Pedro Botelho
    Great Tutorial and sample code.

    I was trying to integrate some of the transition in my project but still not able to integrate it. Can you be more specific how to do a specific transition on a specific page.

    @Stan
    I’d love to see your code for targeting specific pages. It would be highly helpful if you can mail me the sample
    My email jobin (at) fafadiatech (dot) com

  7. Has anybody had any luck with implementing this into their/a site yet I’d love to be able to just do a simple button to implement a transition to another page but cant for the life of me understand the js files 🙁

  8. is there a way to make a youtube video autoplay after transitioning to the page that contains it?
    I currently have two pages, the second one has a youtube video that autoplays upon page load.

  9. Thank you for your response to this solution, specific page, I’ll finally be able to continue working.

  10. Hey, does anyone know how to get the buttons resizing with the browser?. Its parked on the page and won’t move, i tried a few different things, but it appears something is keeping it glued there and i can’t shift it. Any ideas?

  11. Hi,

    could somebody please give me hint how I to trigger those effects automatically onLoad of the page?

    Thanks

  12. Hi thanks a lot for sharing your work!
    Could you help me to code to go to specific pages in navigation menu?

    Best!

  13. Please, email me example (blackzero.rs@gmail.com) with commands to call transition with separate buttons. Example: onClick -> Button 1 or Button 2 = load page1.html or page2.html using some transitions. When i click some button, i want to go directrly to that page using transition effects… Sorry for my bad English… Many, many Thanks! 🙁

  14. Hi is there any way I can get the code for Page Transitions with accualy redirect to another page.. From home to contact and so on…
    please send me the code if available to stavrosazar@gmail.com.

    Kind Regards.

  15. Hi guys didn’t found yet how to redirect to a specific page… This is a great work, but still I need some help with redirecting..

    If you have a sample code how to go about doing that, please email the code at stavrosazar@gmail.com

    kind regards

    • I share the last post of Jobin page5, and this is great and very useful. Everything works if you want to implement some code to go to specific pages, all is here on github!!

      Please take a look at

      https://github.com/icodebuster/transition.js

      I have added the following features
      – Next page transition
      – Previous page transition
      – Go to a particular page
      – Add custom animation
      – Add a list of animation to be played randomly

      Thank’s Jobin!!

  16. Hi there, i’m kind of new to all of this.

    Is there a tutorial on how to add page transitions to an existing html5 website ? If not, what do i have to do to create these transitions for an existing site ?

    Regards

  17. Hello,
    I was looking at this but I would like to know if there is any possibility to do the same but going to anoter html, from one html to another.
    Is it possible?

    Thanks!

  18. Amazing work people! Really. I’m a newbie and I really can’t figure out how to apply any of the transitions from the current page to a new page. For example if i’m now in “main.html” and i want to go to “people.html” by using the Flip right transition how do i like the “people.html” page? I just see <a href=”#” rel=”nofollow”> and if i change the # nothing happens… Thanks in advance.

  19. Hi,
    Just a quick question.
    Is it possible to use Page Transitions on WordPress?
    And if yes, how to implement it?
    Thanks in advance.
    Philippe

    • Hi Philippe,
      I was wondering if you figured out how to use the Page Transitions on WordPress? Going from page to page or however. Please let me know if you did it would be greatly appreciated.

  20. 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?

  21. 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.

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

    Thank you!

  23. 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.

  24. 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!!

  25. 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.

  26. 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.

  27. 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.

  28. 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.