Page Transitions

This page is dedicated primarily to developers who are extending Zero One.

Zero One has a custom page transitions JavaScript library, which can be turned on in Site Settings -> Page Transitions (sidebar options).

It generally works pretty straightforward, rarely have conflicts if you add additional scripts to Zero One, but if you are adding an HTML toggle or clickable element that is not a URL, you should exclude those links from the transition process.

Links like modals, toggles, lightboxes, etc. Mostly JavaScript links that behave like toggles should be excluded from the transition process.

You do that by adding [data-no-transition] attribute to the link. For example:

// Modal example from Zero One
<div><a href="#modal-full" data-no-transition uk-search-icon uk-toggle></a></div>

We did that everywhere in Zero One where it needs to be added, but when you are extending Zero One and adding your additional templates and code, you should add [data-no-transition] attribute to the link whenever you want that link to be excluded from the transition process.

Last updated