animated-page-transition-2
July 9, 2015 | 89 Feedbacks

Animated Page Transition #2

An ajax powered page transition, with a slide-in content animation triggered by a side tabbed navigation.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

We’ve been experimenting lately with a CSS powered animation that replaces the refresh of the web page while the content is updated using ajax. Today’s nugget is based on the same idea, but with a different execution: this time a simple hover effect turns into a loading bar, that finally expands with new content!

Icons from our Nucleo library.

Creating the structure

The html structure is composed of a .cd-main element, wrapping the page content, a .cd-side-navigation, containing the side navigation, and a #cd-loading-bar to create the loading bar animation.

Adding style

The .cd-side-navigation is in fixed position, with a height: 100% and an overflow: hidden, while its child <ul> has an overflow-y: auto (so that you can scroll inside it if the navigation is higher than the viewport).

To create the line visible when you hover over each navigation item, we used the a::after pseudo-elements. They are in absolute position, have a width: 4px , a top: 0 and a right: -4px.
One note: we assigned a width: calc(100%- 4px) to each list item elements to be able to place the a::after elements inside the .cd-side-navigation (since it has an overflow: hidden).

When a user selects a new item in the side navigation, a new .cd-section element is created and inserted in the DOM (you can find more details in the ‘Events handling’ section).

By default, this new .cd-section element is translated to the left, outside the viewport (translateX(-100%)). It is then moved back into the viewport (using the .visible class ) to replace the old content.

Events handling

The index.html file contains only the ‘Intro’ content. A different html file has been created for each navigation item (services.html, contact.html, ..) with exactly the same structure, but with different .cd-section content.

When a user clicks one of the item in the side navigation, the triggerAnimation() function is executed. This function triggers the loading bar animation (loadingBarAnimation() function) and loads the new content (loadNewContent() function).

For the loading bar animation, we have been using Velocity.js: at the beginning of the animation,  the #cd-loading-bar is placed right next to the selected navigation item (its height equal to the one of the list item). Its scaleY value is then animated to create the loading effect.

When a new page is selected, a new .cd-section element is created and inserted into the DOM. The load() function is then used to load the new content (we used a data-menu attribute assigned to the navigation list items to determine the file content to be loaded). Once the new html has been loaded, the loading bar animation is completed, the old content is replaced by the new one and the new page is added to the window.history (using the pushState() method).

To trigger the same animation effect when user clicks the browser back button, we listen for the popstate event, and execute the triggerAnimation() function when it is fired.

Changelog

July 9, 2015
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • Srinivas Reddy

    Hi Sebastiano. Thanks for a nice tutorial. I think the page stuck in tab or mobile view while you click on multiple pages twice or more.

  • アアン タミム

    amazing, so good. i love CSS3...

  • Martin

    Impressive work! Thanks for the Tutorial. Do you guys also get a bug in Chrome on window.history.pushState({path: url},”,url); on a local machine? I can not fix it … it works fine on my webserver .. please explain it to me :D

  • DarkLuci fer

    Impressive work nice share.. Thanks for the Tutorial. Any ideas how to make the loading bar horizontal

  • Juan Castellanos

    Wow Que gran trabajo!!

  • Jerz Obille

    good stuff !! i like! thank you

  • http://apple.com Calculadora

    Amazing, always amazing! you’re the best!

  • http://anyscreensize.com/ Menno Pietersen

    Very nice, so how will this work from a SEO standpoint?
    Will Google be able to find the pages and scan it?

    What about a no JS fallback?

    • http://codyhouse.co Claudia Romano

      Hi Menno,
      we have been using the pushState() method to change the url of the page so that google can analyze the proper content. So no problem with SEO.
      About no JS, each item in the .cd-side-navigation is an anchor tag linking to the proper page (projects.html, contact.html, …). If JS is not supported, clicking one of the items will redirect to the new page.

      • http://anyscreensize.com/ Menno Pietersen

        Thanks for that, it is a really nice effect!

  • http://metrothemes.me metrothemes

    Great Work , just notice that when i click another page main title remain same .

  • Anthony Collins

    Love the effect! Downloaded it to have a little play around and the new content won’t load. Is this because it’s a local file?

  • RegularOrdinaryAmerican

    Beautiful, I love this. Thank you for sharing. I can make good use of it.

  • MRG.NYC

    Very nice and inspiring. :)

  • http://www.prashantsani.com/spider Prashant

    Love The way you have used Progressive Enhancement in this. Incase there is no JS, this still works :D

  • Gurvinder Singh

    First of all, great work.
    I’ve downloaded this and added hero-slider within the intro page. The slider works fine when the page is loaded. Upon navigating to other tabs (i.e. services and projects) and then getting back to intro page, the slider doesn’t work at all. Couldn’t figure out the real bug. Any help will be appreciated.

    • Chris Schofield

      Hi Gurvinder. This is because on ajax request the slider is recreated and the JavaScript required to call it is only called once. (The first time) The solution would be to call it again once the new page has been loaded.

  • jwills543

    great work but doesn’t seem to work well in IE 11. I know IE is a crappy browser but any thoughts on that?

    • jack heeney

      works fine for me in IE

    • http://codyhouse.co Claudia Romano

      Hi, just tested it in IE 11 and it’s working fine. What kind of issue are you experiencing? thanks

    • jwills543

      Well, perhaps it’s the environment I’m working in. I was hoping to use the effect on a company intranet but the page doesn’t load properly in IE but then when I view it with Chrome, it looks fine. And IE happens to be our default browser. Don’t know if there are any insights to share. Thanks for the replies.

  • Sutton

    Hey there I was wondering if you could help me figure out how to accomplish something with this navigation…

    So I am trying to incorporate your menu with a bootstrap drop down menu similar to this:

    http://www.bootply.com/nZaxpxfiXz

    I want to stop the page transition when clicking certain links in the menu so that the menu has a chance to open and display links that will eventually lead to a page transition.

    The classes that I do not want to transition when clicked would be:

    .dropdown-submenu

    and

    .dropdown-toggle

    Any and all help is much appreciated.

    Loving your poetry.

  • Himansh Anand

    Awesome dude… Its a life save for one of my client. Thanks a ton

  • http://nextlayers.com/ Samson Egbedele

    Is it possible to change the background color to background image ?

    • http://codyhouse.co Claudia Romano

      Hi, yes you can add a background image to the .cd-section > header element.

  • jack heeney

    Hello,

    Great work here i really like this!

    Is there a way to make it autoplay through the tabs? and each page?

    If so could you please get back to me with an answer please?

    Thank you so much,

    Jack

  • Susette Norman

    great job!!!
    but is there a way to put the menu horizontal??

  • jack heeney

    Hello,

    I dont understand why but my previous question was removed without answer…

    I want to know if you can make this automatically transition between the pages on a timer??

    If this is possible can anyone help me out with this please?

    Thank you

    Jack

  • http://mattir.com Matt G.

    I’ve noticed on mobile Safari that the menu bar doesn’t shrink and the button bar at the bottom doesn’t go away. Is that because of the 100 vh set on the nav and .title?

  • Gustavo Jacob Maldonado Jr

    This demo does not render well on tablets nor smartphones…anyone else having this issue?

    • Valentin Tambosi

      Not over here. Works like a charme on iPhone 5 and iPad Air, both use Safari.

      • Gustavo Jacob Maldonado Jr

        are you sure? It does not render correctly on iPhone 5 or iPad 2nd Generation.

        • http://codyhouse.co Claudia Romano

          Hi, just tested it on iPhone5 (Safari) and it’s working fine. What kind of issue are you experiencing? Thanks

        • Valentin Tambosi

          Yes I’m sure.

    • aniym

      Viewing the demo right now Android Chrome on LG G2. Works fine.

  • LMS

    Hello! thank you so much for the beautiful design. I have added 2 icons at the bottom of the nav bar for links to facebook and twitter and I have them opening in a new window. The problem is, when the link opens in a new window and I go back to the website, the website is blank and is looking for an “undefined HTML” I know this is probably something I need to edit in jQuery but I’m not that experienced or confident enough to make that edit. Thoughts? Thank you!

  • www.codedcontainer.com

    I really like how the page interacts when you view the remaining content on a page. If this works for the IPAD I would be really amazed, only because I have had problems with sidebar navs in the past. Also, if you view the web page from an external source and you click on the back button it takes you through all the pages you viewed instead of taking you back to the original page.

  • http://www.example.com/ taylan

    HOW TO add links inside the main content area (cd-content) that would also help switch sections? for example, if you wanted to add a link to CONTACT from the cd-content of INDEX (in addition to the left nav)? thank you.

  • siska indria

    nice effect… but i have problem with jquery main.js when i have “” overflow browser height,

    barTop = selectedItem.offset().top,

    my console view above script eror

    anyone can help me

    • siska indria

      soory u can ignore this guys, i found the problem and i had fix….

  • http://knowkalpesh.in/ Kalpesh Singh

    Can I use this code for developing my personal website? Did you guys use Bootstrap for this?

    Excited to hear back from you!

  • danny

    can I use these on word press?

  • stivoox

    Great work, but other transitions can be used ??

  • Gil Alvaro

    Hi, this is awesome!! I am trying new things with this, I tried to ad external javascript to a single page but only works when the page is loaded and if I change pages and open again the same page doesn’t work. There is any way to make it load the javascript? Thank you!

    • Ibrahim Al-Masoudi

      did you find any soluation??

  • http://hobox.org/ JuanDavid

    Help, js no loading

  • Ysabelle

    some of the menubar doesn’t work, does this template require a specific version of a browser or what? thanks

  • marcoapaulo

    Hi!
    Is it possible to use this on WordPress? I’m trying to use it but after I click on the menu and the loading ends, nothing comes up. What do I need to change so it opens the content on each page?

    Thank you

    • Hana B. Mos

      Hi Marco, Have you found a solution for WordPress?
      I have hours trying to fix this on my WordPress, but I can’t find the issue!!

      • marcoapaulo

        No solution at all! I don’t get it, everything is fine, but for some reason, it doesn’t work… I’m going to give it a second try, maybe I’ve done something wrong, but I doubt it.

        • Hana B. Mos

          Thanks for replying.
          I wish Claudia could to give us a hand with this. It supposed to work fine once you upload it, but it doesn’t. I will try a few times too. If I get anything fixed I will let you know! :)

          • Julien Hoste

            Did anyone found the solution to make this work within wordpress?

  • http://www.lnch.co.uk Tom Lynch

    Love this! The execution is so simple yet makes for an amazing effect. I’m definitely going to be incorporating this into my newest web app template!

    Also reminded me about vh and vw units, I remember reading about these a long time ago but never got around to using them, they’ll save me TONNES of time messing around with daft resizing scripts!

    Awesome stuff as always, thanks guys!

  • MikeGarz

    Doesn’t seem to work anymore… Selecting the side tabs doesn’t change the pages.

    • http://codyhouse.co Claudia Romano

      Hi, I just tested the demo on Chrome (46.0.71) and it’s working fine. Which browser are you using and are you experiencing this issue with our demo? Thanks

      • EyeDropper

        Well, I’m using Chrome Version 46.0.2490.80 m . The lateral loading bar works fine But the menu links won’t work even if you give it a new href value. Are we supposed to change something else? Thanks

        • Ben John Pratt

          I was experiencing the same issue and it had me quite frustrated then I tried running in from one of my servers and it worked just fine. Can’t explain it but I believe it’s something to do with the fact that it was running locally and was unable to access a file through chrome(works fine locally with firefox though).

      • mehaboob

        hey

        • mehaboob

          can u pls help me
          …its not working ,,,,

  • Pascal Raginwulf

    Hello, first thanks for your work, it’s awesome! I’m trying to use animated page transition on my site but I have some issues with js: I have to use a specific JS file on one page, I tried to load it with the page content but it doesnt work every time… Do you have some advice? I’m quite beginner in jquery and i’m not sure to do it properly with your loading content system.
    Thanks

  • VeeMind

    I don’t understand why you used:

    /* Force Hardware Acceleration */
    @include backface-visibility(hidden);
    @include transform(translateZ(0));

    and why you added it only to .cd-title & #cd-loading-bar.

  • Fonzi

    Hi, thank you very muck for this. I have a question : I added links inside the main content area to my pages (in addition to the left nav). It works fine but I would like to add anchors on these pages. ( I use an horizontal scroll on my website) Example : a link on the homepage to a specific part on a other page. Do you know how ?

  • Rachana Podaralla

    Is it possible to add more pages to this design through the html? Or do you have to change something in the javascript?

    • http://codyhouse.co Claudia Romano

      Hi there, sure; you need to add new list items in the .cd-side-navigation element (and a .html file with the content you want to load). Hope this helps!

  • Ramsz

    Im loving this, it has one major flaw though. The address bar (in mobile chrome browser) does not hide when scrolling down. Has this been done on purpose? It takes a lot of screen. Please advice how to enable the bar going away when scrolling. Thank you.

    • Ramsz

      Yeah, didnt think I was getting an answer. Too bad because this thing ROCKS. Thanks for this code, hope you will find the time to reply.

      • http://codyhouse.co Claudia Romano

        Hi Ramsz, thanks for the heads-up! That’s because we set an height of 100vh to the main element; basically the section inside it scrolls, and not the body; this is why the address bar doesn’t disappear. You should try changing that (we’ll try to work on it, not sure when though). Cheers!

        • Ramsz

          Thanks so much for getting back at me! I replaced the .cd-main vh with height: auto; and this seems to take care of this! :D I hope this doesnt break anything so will keep testing BUT THANKS Claudia, you make the day smile and sun shine!

  • Mark Abdallah

    I can’t load any other jquery library, nothing get triggered for example on the second page. I’m trying to get this work: http://sachinchoolur.github.io/lightGallery/demos/html-markup.html. Any hints how to load other libraries? Thanks

  • Faisal

    Hi really nice work,but unfortunately page sliding animation is not working :(

    • http://codyhouse.co Claudia Romano

      Hi Faisal, just tested it on Chrome and it’s working fine. Which browser are you using and are you testing our demo or your own version? Please note that for the effect to work you need to upload the project on a local/live server. Cheers!

      • Faisal

        Hi, Now its working fine, Thanks you for your replay

  • Graphics Jadeja
  • Athrun San

    Is there a GitHub link to this? I would like to see the code

  • Athrun San

    Thank you Sebastiano!

  • Heppy Day
  • Heppy Day
  • sai teja

    hey…great design ……..i was unable to link my page with any of the tab….can you help ?

  • amruta

    page transition effect is not working on my local server..pls help

  • Tom Cat

    could you this, without the .html. For example WordPress sites…?

  • Budi Yogo Prasetyo

    Thanks information

  • Michael Heimes

    I’m really trying to make this work with WordPress. I have the data-name attributes set up. Containers are lined up. I stripped the html. I just can’t get it to load the page and keep getting “/undefined”.

    Has anyone figured this out?