AJAX Transitions

The key feature of Rubenz is its seamless transitions between pages. This technique is called AJAX or, to be more precise PJAX. It can be enabled in Theme Options -> AJAX Transitions -> Enable Seamless AJAX Transitions.

AJAX Transitions option is enabled. Advanced users can also define jQuery selectors for elements to prevent AJAX working on.

There is one more important requirement to make AJAX transitions function properly. You have to set your permalinks structure to the one of following:

“Plain” style is not compatible with AJAX transitions
Transition example. Open it in lightbox to see the animation

All transitions are based on the featured image of the page (or portfolio item). If you don’t have featured image set for the page you have a link, then there will be a simple “curtain-slide” transition.

Set a featured image for the page. Otherwise you won’t see image transition.

The logic behind AJAX transitions

  1. All the featured images of all the pages will be placed on each page. They are loaded in background and are not blocking page rendering.
  2. When transition is prepairing the theme waits till the next page featured image is loaded. Please make sure to optimize all your featured images before uploading them to WordPress. I recommend to use TinyPNG free service for the images optimization.
  3. There are some places in the theme where Image Transitions will run. Those are: Fullscreen Slider, Halfscreen Slider, Masonry Grid, Bottom Navigation Portfolio, Fullscreen Overlay Menu.
  4. If Image Transition can’t be executed (for example, there is no featured image on the next page), then the fallback Curtain Slide will run.
  5. Page <head> is partially updated when transitions are successful. This includes page title, page custom css, OG tags, Meta tags. Common theme styles and plugin styles are loaded only once and are not updated as it’s not needed.
  6. If theme can’t fetch the next page within 6 seconds, the transition fails and regular page reload will occur.
  7. AJAX transitions are compatible with W3 Total Cache plugin Use it to minimize PHP calls to the server and speed up your website even more.