A Collection of Page Transitions

Excelent, Stunning, This will be helpful,….

Great work! And works pretty fine in IE10.

O.O no words man… this is awesome and so much inspiring!!

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

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

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

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.

Awesome ))

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

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.

Is there any way to do something like this with php pages on a CMS?

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

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

Yeah!

Very cool…

Thanks!

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

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.

Hi Stan, could you send me your code, my email is: hoanglong0190@gmail.com , I’ve been looking solution for this for a while, thanks in advanced!

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

Hi Stan!
I would appreciate seeing your code for targeting specific pages. educ83@gmail.com
Thanks!

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

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)