A Collection of Page Transitions

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

A Collection of Page Transitions

From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.

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:

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

Feedback 270

Comments are closed.
  1. Nice work…:) I tried to implement your work in my website…I want to know how can we call a particular page with the transition effect with the help of menu…Thank you 🙂

  2. The next step is to show an actual live example browsing from page-to-page. Right now the demo is pretty useless unless it provides more.

  3. Looks way too awesome…Will have to give it a shot…
    Will try on a dummy website with this…
    Thanks…

  4. Hey this is awesome! It gave me so many ideas for things I want to do, thanks for sharing!

  5. I’ve started doing this tutorial but when I’ve finished to read and write it nothing works…

  6. Even though the page slide effect does not work in IE9 the fallback is still fine with me.
    Works super awesome on IE10. Of course it works great with the other major browser
    vendors such as Chrome, Firefox, Safari and Opera on both Windows and Mac platforms.

  7. Hi Pedro,

    Amazing stuff on the site dude! Especially love these page transitions. Having a play around with the source file and I’m struggling to work out how to make each page transition link to a certain page. Could you lend me any advice on this?

    Thanks a lot

    • Hey Harry- Did Pedro ever respond or did you figure out how to link to a certain page or “point within the document” … im trying to do the same myself.

  8. Great work Cong !!!

    A question : Is it possible to add code to turn back / previous ?

    Thank you very much…

  9. Great transitions, overall a great example 🙂
    Now, i suppose there is no way to get the same transition effects while
    switching from one html document to another?
    I’m only asking because in this example, everything is in one place (one html document).

    • Here’s a trick – You can use JavaScript to load the next html file when a user clicks on the page. Thus, you never actually have them leaving your page 😉

    • Hey there Brody !

      Can you please provide some code for loading html document with this transition ?

  10. Nice to get some predefined css, saves me time building transitions on some projects.

  11. Hi, impressive work, this has been a big resource for my knowledge.
    but, had you ever note with the “scale transitions” that the back page turns black randomly after the animation ends?
    Im using chrome Version 27.0.1453.93.

  12. That’s actually very cool. Compiled together the set of great animations…awesome..

  13. Great work here. Thank you for this. It’s been something on my to-do list for a while, so this will save me a bunch of time.

  14. I am reading this from my android phone using chrome and when I checked the demo, after a few transitions the background turned black.

  15. These transitions are beautiful! But, how can I use them from a fixed menu?

  16. I had the same problem with blackness. I fixed it by adding opacity: 0; to the .pt-page and opacity: 1; to .pt-page-current, .no.js .pt-page.

    I don’t know if this works with all trasitions, but for the slides and flip ones I’m using, they work just fine.

    It seems that the problem is that the top-most page in the dom turns black when you transition away form it, covering up any pages underneath it.

    • Great fix @Jens Ahrengot Boddum, this fixes the problem for all transitions! Thanks!
      And obviously, big thanks to the author of the collection!

  17. Stunning work, really good!

    How can i use it these effects, without this menu, only on menu links ?

  18. Awesome stuff!
    I managed to implement it and I am a total newbie in this web building.
    A question though: how can I make it work on touch devices?

  19. Thx for this awesome tutorial. I was looking for something like this !

    PS :
    I’m still a newbie in javascript, and trying to improve myself.
    Is it possible to create a function, which enable to switch from page 1 to page 3 ? or going back to previous page instead of going foward ?
    I tried to edit pagetransitions.js, but I still have some issue.

  20. Very nice. But what about _real_ page transitions between two single html-pages?

  21. Thanks a lot for this tutorial!!!.. Does anyone has figured out how to switch from an specific page?…Thanks in advance

  22. Well, it seems I can’t post my button code … I’ll try with another way.
    I’m sorry for those double post again … there are anyway to delete them?

    Code :
    button id=”Page-Transition” onclick=”loadPreviousPage()”>PrevNextPageX</button

  23. Thanks for sharing these inspiring transitions. It’s clean, simple and beautiful. Brings life to all this stagnant information on the web.

  24. Hi I loved so much this tutorial, the animations, are awesome, when I added keyboard navigation and it worked just fine the code is :

    //* Using keykoard input to go to next Page >> $(window).keyup(function(event){ if( isAnimating ) { return false; } if( animcursor > 67 ) { animcursor = 1; } if(event.keyCode ==39){ nextPage( animcursor ); ++animcursor; } });

    But I ran accross a problem how to go to the previous page. I would like to see how it would look like. But thanks for the tutorial.

  25. This is awesome… is it possible to link to specific section/page ID? not just previous or next? I try to put section/page ID but it only works the same just to the next page.

  26. Great demo !!
    Is the “full screen” div required or is it possible to do the same animations with a “smaller internal” div ?

    • Thank you very much Jobin, your work is so great !!

      Everyone who is looking for a solution to go to specific page must take a look at your work!!!
      Thank you very much I was fighting with the code for a while to find your work.
      What a relief everything works perfectly!

      Thanks again Jobin !!!
      Best

  27. Here is my code for :
    – Go to previous page
    – Go to next page
    – Go to a specific page

    I’m using only 1 animation by direction, so I deleted switch (animation) from code, because I don’t need it.

    I’m using 2 javascript files :

    pageTransition.js : which enable to have pt-page-current on loading page
    _funcTransition.js : which enable pagetransition with previous/next/specific page

    pageTransition.js CODE :

    var PageTransitions = (function() { var $main = $( '#pt-main' ), $pages = $main.children( 'div.pt-page' ), animcursor = 1, pagesCount = $pages.length, current = 0, isAnimating = false, endCurrPage = false, endNextPage = false, animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' }, // animation end event name animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ], // support css animations support = Modernizr.cssanimations; $pages.each( function() { var $page = $( this ); $page.data( 'originalClassList', $page.attr( 'class' ) ); } ); $pages.eq( current ).addClass( 'pt-page-current' ); })();

    _fucnTransition.js CODE :

    // ————————————————————————————– //
    // VARIABLES
    // ————————————————————————————– //
    var $main = $( ‘#pt-main’ ),
    $pages = $main.children( ‘div.pt-page’ ),
    $iterate = $( ‘#Page-Transition’ ), // <– ID for my button
    pagesCount = $pages.length,
    current = 0,
    isAnimating = false,
    endCurrPage = false,
    endNextPage = false,
    animEndEventNames = {
    'WebkitAnimation' : 'webkitAnimationEnd',
    'OAnimation' : 'oAnimationEnd',
    'msAnimation' : 'MSAnimationEnd',
    'animation' : 'animationend'
    },
    // animation end event name
    animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
    // support css animations
    support = Modernizr.cssanimations;

    function onEndAnimation( $outpage, $inpage ) {
    endCurrPage = false;
    endNextPage = false;
    resetPage( $outpage, $inpage );
    isAnimating = false;
    }

    function resetPage( $outpage, $inpage ) {
    $outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
    $inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
    }

    // ————————————————————————————– //
    // loadNextPage
    // ————————————————————————————– //
    function loadNextPage() {

    if( isAnimating ) {
    return false;
    }

    isAnimating = true;

    var $currPage = $pages.eq( current );

    // if 0 < page < nb_page then ++
    if( current < pagesCount – 1 ) {
    ++current;
    }
    else {
    current = 0;
    }

    // I use only 1 animation style that's why I deleted switch animation
    var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
    outClass = 'pt-page-moveToLeft', inClass = 'pt-page-moveFromRight';

    $currPage.addClass( outClass ).on( animEndEventName, function() {
    $currPage.off( animEndEventName );
    endCurrPage = true;
    if( endNextPage ) {
    onEndAnimation( $currPage, $nextPage );
    }
    } );

    $nextPage.addClass( inClass ).on( animEndEventName, function() {
    $nextPage.off( animEndEventName );
    endNextPage = true;
    if( endCurrPage ) {
    onEndAnimation( $currPage, $nextPage );
    }
    } );

    if( !support ) {
    onEndAnimation( $currPage, $nextPage );
    }

    }

    // ————————————————————————————– //
    // loadPreviousPage
    // ————————————————————————————– //
    function loadPreviousPage() {

    if( isAnimating ) {
    return false;
    }

    isAnimating = true;

    var $currPage = $pages.eq( current );

    // if i'm on page1, i'll go page to last page (edit 3 by your last page)
    if( current == 0 ) {
    current = 3;
    }
    // if 1 < page <= nb_page then–
    else if( current <= pagesCount – 1 ) {
    –current;
    }
    // else go to page1
    else {
    current = 0;
    }

    // I use only 1 animation style that's why I deleted switch animation
    var $prevPage = $pages.eq( current ).addClass( 'pt-page-current' ),
    outClass = 'pt-page-moveToRight', inClass = 'pt-page-moveFromLeft';

    $currPage.addClass( outClass ).on( animEndEventName, function() {
    $currPage.off( animEndEventName );
    endCurrPage = true;
    if( endNextPage ) {
    onEndAnimation( $currPage, $prevPage );
    }
    } );

    $prevPage.addClass( inClass ).on( animEndEventName, function() {
    $prevPage.off( animEndEventName );
    endNextPage = true;
    if( endCurrPage ) {
    onEndAnimation( $currPage, $prevPage );
    }
    } );

    if( !support ) {
    onEndAnimation( $currPage, $prevPage );
    }

    }

    // ————————————————————————————– //
    // gotoPage(x) – Specific page
    // ————————————————————————————– //
    function gotoPage(page-number) {

    if( isAnimating ) {
    return false;
    }

    isAnimating = true;

    var $currPage = $pages.eq( current );

    // If page is different than page-number, then go to page-number
    if( current != page-number ) {
    current = page-number;
    }

    var $prevPage = $pages.eq( current ).addClass( 'pt-page-current' ),
    outClass = 'pt-page-moveToBottomEasing pt-page-ontop', inClass = 'pt-page-moveFromTop';

    $currPage.addClass( outClass ).on( animEndEventName, function() {
    $currPage.off( animEndEventName );
    endCurrPage = true;
    if( endNextPage ) {
    onEndAnimation( $currPage, $prevPage );
    }
    } );

    $prevPage.addClass( inClass ).on( animEndEventName, function() {
    $prevPage.off( animEndEventName );
    endNextPage = true;
    if( endCurrPage ) {
    onEndAnimation( $currPage, $prevPage );
    }
    } );

    if( !support ) {
    onEndAnimation( $currPage, $prevPage );
    }

    }

    And there are my button code :

    <button id="Page-Transition" class="btn" onclick="loadPreviousPage()">Previous</button> <button id="Page-Transition" class="btn" onclick="loadNextPage()">Next</button> <button id="Page-Transition" class="btn" onclick="gotoPage(page-number)">Specific page</button>

    I hope it could help you.
    People who I sended it seems to get it works.

    Cya

  28. Hi, first of all, nice work Pedro.
    Well, I managed to make the page move to a specific page using Stan’s code.
    But came across to a problem which I click the button of the current page showing, the page just moves showing a blank background. I’d like to make the page not move when clicking the button of the current page showing. Any solution?

  29. Simply amazing set of transitions. I’ve implemented these to switch between specific pages within my application. It really brings it to a whole new level. Thank you for publishing these.

  30. Hey everyone, i would like to just use one of the transition in one of my android app. Would anyone take the time to break it down to the basics, as i am pretty new to html apps.

    Thanks in advance.

    Vikram

  31. Hi @Stan ! Can u send me your files? don’t know why it doesn’t work for me. I have no response in all of buttons ( next, prev and specific page). I added your javascript files added id’s and still it doesn’t work. Will be great if u could send me your code on mail. Regards

    Bartek (tomczas91@gmail.com)

  32. Hi, these are AWESOME thank you! We have seen a number of items on websites like Themeforest etc that use different effects in your tutorials (especially “Thumbnail Grid with Expanding Preview” and “Caption Hover Effects “).
    Is it ok for us to use the code in the demos here for items for sale (assuming we credit the tutorial in the description!). Do not want to be cheeky or upset anyone! Thank you. J

  33. Is that HTML the best approach to take if you wan’t to keep some SEO? Having everything on the same page seems a bit odd. Isn’t there a way to make transitions without having to load the whole website with one file?