Full Page Transition Animations with jQuery and CSS3 - Page Transition

File Size: 37.9 KB
Views Total: 18454
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Full Page Transition Animations with jQuery and CSS3 - Page Transition

Page Transition is a super lightweight (~4kb unminified) jQuery plugin for implementing smooth CSS3 powered full page transition animations within your HTML document.

How to use it:

1. Load the animations.css file in the header for the CSS3 animations.

<link rel="stylesheet" href="animations.css">

2. Add multiple pages to the html document.

  • data-to: the page ID you want to transition to.
  • data-transition: animation type. Available values: horizontal, vertical, horizontal-easing, vertical-easing, horizontal-fade, and vertical-fade. Refer to animation.css for more animations.
<div id="page-1" class="page">
  <h1>Page One</h1>
  <button class="transition" 
          NEXT PAGE

<div id="page-2" class="page">
  <h1>Page Two</h1>
  <button class="transition" 
          NEXT PAGE

<div id="page-3" class="page">
  <h1>Page Three</h1>
  <button class="transition" 
          NEXT PAGE

3. Make the pages full window.

.page {
  height: 100%;
  overflow: hidden;
  position: absolute;
  visibility: hidden;
  width: 100%;

.current-page {
  visibility: visible;
  z-index: 1;

4. Include the latest jQuery library and the jQuery Page Transition plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="page-transitions.js"></script>

Change log:


This awesome jQuery plugin is developed by white-git. For more Advanced Usages, please check the demo page or visit the official website.