Page Transition Plugin
A plugin to create smooth transitions between pages.
Projects /
Projects /
A plugin to create smooth transitions between pages.
The Page Transition plugin is used to create animated transitions between website pages: the refresh of the webpage is replaced by a smooth animation that takes place while the new page content is loaded and injected into the DOM.
Use the PageTransition object to initialize the plugin:
new PageTransition({
beforeLeave: false, // function running before the leaveAnimation
leaveAnimation: function(initContent, link, cb) {
// animation used to hide the initial page content
},
progressAnimation: function(link) {
// progress animation - it runs if the leave animation is complete but the new content is not available yet
},
beforeEnter: false, // function running before the enterAnimation and after the new content has been injected into the page
enterAnimation: function(initContent, newContent, link, cb) {
// animation used to show the new page content
},
afterEnter: false, // function running once the enterAnimation is complete
loadFunction: false, // function used to load new content - if false, a standard Ajax call will be used
srLoadingMessage: false,
srLoadedMessage: false
});Add a .js-page-trans__content class to the content section that will be updated while transitioning between pages.
Wrap this section in a .js-page-trans element:
<body class="js-page-trans">
<!-- place here content that won't change between pages -->
<main class="js-page-trans__content">
<!-- this element will be replaced when transitioning between pages -->
</main>
<!-- place here content that won't change between pages -->
</body>Add a class of .js-page-trans-link to each <a> element that should trigger a smooth page transition.
The plugin comes with some options that you can use to create your custom animations.
This is the animation used to hide the page initial content.
new PageTransition({
leaveAnimation: function(initContent, link, cb) {
// initContent: .js-page-trans__content element
// link: href of the <a> element the user clicked
// cb: callback function -> run it once the animation is complete
// example of animation
Util.addClass(initContent, 'opacity-0');
initContent.addEventListener('transitionend', function (){
cb();
}, {once : true});
},
// additional options here
});This is the animation used to show the page new content.
new PageTransition({
enterAnimation: function(initContent, newContent, link, cb) {
// initContent: .js-page-trans__content element - with old page content
// newContent: .js-page-trans__content element - with the new page content
// link: href of the <a> element the user clicked
// cb: callback function -> run it once the animation is complete
// example of animation
Util.addClass(newContent, 'opacity-1');
newContent.addEventListener('transitionend', function (){
cb();
}, {once : true});
},
// additional options here
});This animation runs if the leaveAnimation function is complete but the new page content has not been loaded yet.
You can use this function to run custom code before the leaveAnimation starts.
You can use this function to run custom code before the enterAnimation starts. At this point, the new page content has already been injected into the DOM (both new page and old page content are present in the DOM).
You can use this function to run custom code right after the enterAnimation is complete.
Custom function you can use to retrieve the content of the new page. If this is not provided, a standard Ajax call will be performed to retrieve the new page content.
new PageTransition({
loadFunction: function(link, cb) {
// link: href of the <a> element the user clicked
// cb: callback function -> run it once the new content has been retrieved, passing the new content as argument
},
// additional options here
});You can use the srLoadingMessage and srLoadedMessage options to customize the messages announced to Screen Readers during the page transition (defaults are 'New content is being loaded' and 'New content has been loaded').
After the new page content has been injected into the DOM, you may need to re-initialize its JavaScript. For example, if a carousel element is present on the new page, you will need to initialize it. Use the afterEnter option for that:
new PageTransition({
afterEnter: function(newContent, link) {
var carouselEl = newContent.getElementsByClassName('js-carousel');
for(var i = 0; i < carouselEl.length; i++) {
new Carousel({element: carouselEl[i]});
}
},
// additional options here
});You will need to do that for all your page interactive elements (e.g., accordion, tabs, ...).
Alternatively, you can have a different JavaScript file for each page and load it when required. For example, let's say you have a home.js file for your Home page and an about.js file for the About page. You can then create a pageTransition.js file containing the Page Transition plugin and the PageTransition object initialization:
<body class="js-page-trans">
<!-- place here content that won't change between pages -->
<main class="js-page-trans__content">
<!-- this element will be replaced when transitioning between pages -->
</main>
<!-- place here content that won't change between pages -->
<script id="page-script" src="assets/js/home.js"></script>
<script src="assets/js/pageTransition.js"></script>
</body>Your afterEnter function would then be something like:
new PageTransition({
afterEnter: function(newContent, link) {
var pageScript = document.getElementById('page-script');
if(pageScript) pageScript.remove();
// append new script
var script = document.createElement('script');
script.setAttribute('src', 'assets/js/about.js'); // the src value should change according to the link value
script.setAttribute('id','page-script');
document.body.appendChild(script);
},
// additional options here
});
