AJAX Transitions

Note: You need to use any web-server to make AJAX transitions work. Otherwise you will get errors like this:

 "Access to XMLHttpRequest at '...' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

The template is powered by smooth AJAX transitions thanks to Barba.js plugin. Here is the correct markup for all the template pages:

<body>
  <div data-barba="wrapper">
    ...
    <div class="page-wrapper" data-barba="container">
      <main class="page-wrapper__content">
        ...
      </main>
    </div>
    ...
  </div>
</body>

Everything outside Barba container [data-barba=”container”] will remain unchanged from page to page. This could be page header and page scripts.

To turn off AJAX transitions, simply remove attribute [data-barba=”wrapper”] from div.

<body>
  ...
</body>

Typography transitions

Cassio has exclusive text animation between pages. When a user clicks on a link the script checks if the heading inside the link is eligible for text flying transition.

<a class="figure-portfolio figure-portfolio-big text-right" href="project-6.html" data-pjax-link="flyingHeading">
  ...
  <div class="figure-portfolio-big__content">
    <h4 class="figure-portfolio-big__heading split-text js-text-to-fly js-split-text" data-split-text-type="lines, words, chars" data-split-text-set="chars">Loft Apartment</h4>
  </div>
</a>
  1. Link should have [data-pjax-link=”flyingHeading”] set.
  2. Heading inside the link should have .js-text-to-fly class.
  3. The actual heading should be split into chars. So they can fly independently.
  4. Text in the current and next headings should be the same. That way the script will have correct amount of chars for calculation.

The next page should also be prepared accordingly.

<section class="section section-masthead section-masthead_big-heading section-fullheight text-center bg-white" data-os-animation="data-os-animation">
  <div class="section-fullheight__inner">
    <h1 class="js-text-to-fly split-text js-split-text section-masthead__heading section-masthead__heading-big text-xxl" data-split-text-type="lines, words, chars" data-split-text-set="chars">Projects 001</h1>
  </div>
</section>

So the page which is being loaded should also have the heading split to chars with “js-text-to-fly”.

The rest attributes and visual styling can be really whatever you need. For example, you can have different colors, font sizes, margins, etc. The transition will work even you have 2-rows heading in the current page and 1-row heading in the next page!

3rd-party scripts AJAX compatibility

When extending the template functionality with a JavaScript plugin that’s not included to the package, you may run into an issue. Your plugin may work good after the initial site load. But when it comes to any AJAX transition it doesn’t initialize. This is an expected behavior due to the nature of AJAX technology. All the 3rd-party scripts you need to re-init manually each time an AJAX transition occurs.

You can do this by placing the initialization code of your plugin inside initComponents() function wrapper in HTML/js/components.js file:

function initComponents($scope = window.$document) {

	window.PageHeader = new Header();

	if (typeof window.PageMenu === 'undefined') {
		window.PageMenu = new MenuOverlay();
	}

	new SectionMasthead($scope);
	new SectionPortfolio($scope);
	new SectionNavProjects($scope);
	new SectionFullscreenSlider($scope);
	new SectionContent($scope);
	new SectionAbout($scope);
	new SectionServices($scope);
	new SectionTestimonials($scope);
	new SectionAwards($scope);
	new SliderImages($scope);
	new SliderProjects($scope);
	new SliderLetters($scope);
	$('.js-video').magnificPopup();
	new ScrollDown();
	new Form();
	new GMap($scope);
	new ButtonCircle($scope);
	new Grid();

	fixMobileBarHeight();
	lazyLoad($scope);
	$('[data-art-parallax]').artParallax({
		ScrollMagicController: window.SMController,
		SmoothScrollController: window.SB
	});

	// your custom plugin init here

}

initComponents() function is called each time a new page is loaded (normal or AJAX way).

AJAX-compatible scripts

Some of the popular scripts are already AJAX-compatible with Cassio template. It means that you don’t have to write any additional functions to make them work flawlessly. Those include:

  • Google Analytics
  • Facebook Pixel
  • Yandex.Metrika

If you need to fine tune those ad tracking update functions, please take a look PJAXUpdateTrackers() function in HTML/js/components.js file.