May 15, 2013 GK Bryn

Animated Zepto Page Transitions with CSS

Animated Zepto page transitions with CSS are not something I have had to deal with before myself, mostly due to the fact that to make it work well, there is a need to hi-jack the users browser to some extent. On the internet this is generally a no-no. “You can’t hi-jack my browser…it’s my browser, i’ll make it work, how I want it to work.” And quite right too…for the everyday, public-facing, user friendly website.

But what about if its not public facing? What if its only available to internal staff? What if its a web based presentation for high-level staff at a global company, who want to impress their bosses on the other side of the world, and show their forward thinking by displaying their latest information using new and exciting ways? Well… I don’t know about yourselves, but I think thats a different kettle of fish altogether.

So, I’ve been dug in with those crazy boys from Flock London over the last 6 weeks, and together we’ve been putting together a couple of these presentations, one of which was a very specific design idea that needed some sort of animated page transition to make it work. This proved to be a very frustrating couple of days, hence this post.

After traipsing around the forums and finding that most people on the same route as myself have been told that it’s bad practice, I came across this post on Github by David Gileadi about Zepto Animated CSS Page Transistions – and it was a great starting point.

The Zepto library is based on the popular jQuery Library, but is a cut down version containing only the functions needed to create these page transitions, standing alone at a mere 55kb.

Dave’s post provides a .zip file with all code and guidance you need to start to implement it on your own sites – it was in doing this i found a little issue and needed to learn how this worked before i could rectify it. I needed specific page transitions – ‘slide up’, ‘slide down’, ‘slide left’ and ‘slide right’. The Slide up and slide down function worked perfectly, but the left and right worked differently. The up/down slides worked by sliding one page off-screen, at the same time as the next page slides on. The left/right slides, slid the next page on over the top of the current page…left/right needed to work the same way as up/down for this presentation.

In the end it was just the CSS that needed updating. I edited the CSS selectors for the left/right slide (that were already in place, i might add) to reflect the values found in the up/down slide CSS selectors, and made them slide the x-axis, instead of the y-axis. This worked beautifully, and provided exactly the effect we were looking for.

Using Zepto Page Transitions
There are myriad options for different types of page transitions using the zepto library, but we only needed a set few. Check the links to the original post on github, for a run-down of all other features.

1) Include ‘zepto.js’ & ‘transition.js’ in your header – mind your paths to the files :

<script src="js/zepto.js"></script>
<script src="js/transition.js"></script>
<link href="transition.css" rel="stylesheet" type="text/css" />

2) Include the initialisation script just before the closing ‘head’ tag on pages using the transitions.

document.write('<script src='
('__proto__' in {} ? 'zepto' : 'jquery')

3) Add the required ‘data-transition’ code to your relevant ‘a’ tags.
Our example uses the following values:
‘slide’ = Slide Page Left
‘slideright’ = Slide Page Right
‘slideup’ = Slide Page Up
‘slidedown’ = Slide Page Down

Example Use:
<a href="page.html" data-transition="slideup">Slide Page Up</a>
<a href="page.html" data-transition="slide">Slide Page Left</a>
<a href="page.html" data-transition="slideright">Slide Page Right</a>
<a href="page.html" data-transition="slidedown">Slide Page Down</a>

Things to Note :
Remember to include both ‘.js’ files and the CSS file in the header.
Remember to add the initialisation script to every page you wish to use transitions on.
Any use of Javascript of jQuery should be included on the first page the transitions start from.

This link below provides a .rar file, created here at Growing Kenneth with demo files of our working version, should you wish to use them for yourself in the way that we set them up. Clicky here – GKZeptoPageTransitionsDemo.rar

Props to David Gileadi for sourcing and laying out this info in a way that is easily understood – find all the documentation for Zepto Animated CSS Page Transitions, including all the different transition types and more in-depth usage info etc, at Dave’s post on Github, by far the best place to start for Animated CSS Page Transitions.

Tagged: , , ,

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.