A Collection of Page Transitions

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

By in Playground on
A Collection of Page Transitions
Demo Code

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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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!

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.

Simple CSS Line Hover Animations for Links

Building a Scrollable and Draggable Timeline with GSAP

Lines to Content Layout Animation

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 270

Comments are closed.

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

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

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

  4. Hey. Thanks for this awesome effect.

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

    🙂

    Thanks

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

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

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

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

  11. Hello,
    This is a very awesome collection of page transition! But I have limited skills in coding, and I tried to do it but I just failed to do that.
    Does anyone can tell me how can I apply the transition that I want on my page with only one button?

  12. Hi there, I’m trying to implement the transitions to my website but I can’t seem to be able to do it. I have a one page website with anchor links. I have given the li the data-animation number, 67 in my case, however, if I use the menu wrapper, my whole menu dissapears

  13. Hi… i like the wonderful transitions. thanx for sharing… but , i had a problem… its not working in firefox.. please help. sory for my poor english..

  16. wow great stuff, how can we do this on some menu/navigation for various button, thanks

  18. Hi, i use this but it is hard to emplement other jquery? Why? I can use only this. Other jquery corrupted the transition.

  19. Hi,
    Probably I’m a dumb but I don’t understand how to use this transition system between two html pages ?
    Can you explain me?
    What ever it’s very beautiful.
    Thank you

  20. Hello,

    a wonderful piece of code … i really love it!

    I got one question: How can i change the current page with a function. i mean, without clicking something?

    Something like this:

    function changePage() {
    gotoPage(3);
    }

    Kisses
    M

  22. Hello 🙂 Does this code works on Android Web Browser? Because I’m testing, and it seems not to work :X

  23. Hello. I wanted to ask if it is possible to link someone not to the main page,but straight to the sections. For example if class=”pt-page pt-page-2″ has id=”contacts” how I can link it straight to contacts section when typing in my browser widow?

  24. Great work , its really awesome , but can anyone show me how can I apply the same effect from one page to another , example how can I flip the page when I click on the link to open the respective page

  25. Hi

    Awesome collections

    I want to add ‘back button’ on every slides and when click on back button go to previous slide. How can achieve?
    Please help me.

    Thanks in advance

  27. Hello everyone.

    I turned the page transitions into a full blown slider for use in my personal projects. Features include:

    – Fully responsive.
    – Will fit any screen.
    – Can be used to slide images or entire pages.
    – Animatable layers.
    – Ability to use different options for different screens.
    – Ability to load different images for different screens.
    – Thumbnail previews.
    – API functions like goToSlide(), goForward(), goBack(), destroy() etc
    – Callback functions like onLoad(), afterSlide() etc
    – Sliced effects
    – + much more.

    If anyone is interested I can post it on github. Here are a few demos:

    1. Image slider with preset effects. Demo

    2. Image slider with selectable effects. Demo

    3. One page concept site with sliding pages. Demo

    Cheers.

    • Hello Arnold, very nice effects you got here. Well done.
      I’m particularly interested by the “move Over V” transition that I have to do for a gallery in a website I’m currently coding.
      I guess a github could help a lot, or if you have any advices on how to achieve it, let me know.

      Have a nice day!

    • Sorry for responding so late!

      I don’t get any email notifications when a new comment is posted so I was not aware of any responses. Anyway, I’ll post the code on github this week and share the link.

    • Hi Anrold, I’ve seen your slider and it’s wonderful, I’d like to use it but I can’t find a download/github link or a tutorial..
      Can you help me?

  29. Thank you for awesome page transitions, however I found difficulty in implementation, instruction of implementation is not proper.
    Thank you @Jobin Kurian for proper instructions for implementation.

  30. does it works for wordpress? if works, can you tell me step to make page transitions? sorry, i haven’t skill in coding

  32. So how in the world would I create a button to switch from the page-1 div to the page-4 div?