From db180f3e2bc2c761bb8408c05e617ba49319c4e7 Mon Sep 17 00:00:00 2001
From: Georgy Marchuk <gmarcuk@gmail.com>
Date: Thu, 25 Oct 2018 23:31:51 +0200
Subject: [PATCH] add animationInStart and animationOutStart events

---
 dist/swup.js              | 2 ++
 dist/swup.min.js          | 2 +-
 package.json              | 2 +-
 readme.md                 | 2 ++
 src/modules/loadPage.js   | 1 +
 src/modules/renderPage.js | 1 +
 6 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/dist/swup.js b/dist/swup.js
index 1b46dd8b..0208b958 100644
--- a/dist/swup.js
+++ b/dist/swup.js
@@ -987,6 +987,7 @@ module.exports = function (data, popstate) {
 
     if (!popstate || this.options.animateHistoryBrowsing) {
         // start animation
+        this.triggerEvent('animationOutStart');
         document.documentElement.classList.add('is-changing');
         document.documentElement.classList.add('is-leaving');
         document.documentElement.classList.add('is-animating');
@@ -1147,6 +1148,7 @@ module.exports = function (page, popstate) {
         this.cache.empty(this.options.debugMode);
     }
     setTimeout(function () {
+        _this.triggerEvent('animationInStart');
         document.documentElement.classList.remove('is-animating');
     }, 10);
 
diff --git a/dist/swup.min.js b/dist/swup.min.js
index e2e60457..19196fcc 100644
--- a/dist/swup.min.js
+++ b/dist/swup.min.js
@@ -1 +1 @@
-(function e(t,n){if(typeof exports==="object"&&typeof module==="object")module.exports=n();else if(typeof define==="function"&&define.amd)define([],n);else if(typeof exports==="object")exports["Swup"]=n();else t["Swup"]=n()})(window,function(){return function(e){var t={};function n(o){if(t[o]){return t[o].exports}var r=t[o]={i:o,l:false,exports:{}};e[o].call(r.exports,r,r.exports,n);r.l=true;return r.exports}n.m=e;n.c=t;n.d=function(e,t,o){if(!n.o(e,t)){Object.defineProperty(e,t,{enumerable:true,get:o})}};n.r=function(e){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(e,"__esModule",{value:true})};n.t=function(e,t){if(t&1)e=n(e);if(t&8)return e;if(t&4&&typeof e==="object"&&e&&e.__esModule)return e;var o=Object.create(null);n.r(o);Object.defineProperty(o,"default",{enumerable:true,value:e});if(t&2&&typeof e!="string")for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o};n.n=function(e){var t=e&&e.__esModule?function t(){return e["default"]}:function t(){return e};n.d(t,"a",t);return t};n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};n.p="";return n(n.s=1)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||false;o.configurable=true;if("value"in o)o.writable=true;Object.defineProperty(e,o.key,o)}}return function(t,n,o){if(n)e(t.prototype,n);if(o)e(t,o);return t}}();function r(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}var i=function(){function e(){r(this,e);this.link=document.createElement("a")}o(e,[{key:"setPath",value:function e(t){this.link.href=t}},{key:"getPath",value:function e(){var t=this.link.pathname;if(t[0]!="/"){t="/"+t}return t}},{key:"getAddress",value:function e(){var t=this.link.pathname+this.link.search;if(t[0]!="/"){t="/"+t}return t}},{key:"getHash",value:function e(){return this.link.hash}}]);return e}();t.default=i},function(e,t,n){"use strict";var o=n(2);var r=i(o);function i(e){return e&&e.__esModule?e:{default:e}}e.exports=r.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n){if(Object.prototype.hasOwnProperty.call(n,o)){e[o]=n[o]}}}return e};var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||false;o.configurable=true;if("value"in o)o.writable=true;Object.defineProperty(e,o.key,o)}}return function(t,n,o){if(n)e(t.prototype,n);if(o)e(t,o);return t}}();var i=n(3);var s=z(i);var a=n(5);var l=z(a);var u=n(0);var c=z(u);var d=n(6);var f=z(d);var h=n(7);var p=z(h);var g=n(8);var m=z(g);var v=n(9);var w=z(v);var y=n(10);var E=z(y);var b=n(11);var P=z(b);var S=n(12);var T=z(S);var k=n(13);var L=z(k);var A=n(14);var x=z(A);var H=n(15);var C=z(H);var M=n(16);var O=z(M);var R=n(17);var _=z(R);var j=n(18);var q=z(j);var U=n(19);var D=z(U);var F=n(20);var B=z(F);var I=n(21);var N=z(I);var K=n(22);var W=z(K);function z(e){return e&&e.__esModule?e:{default:e}}function V(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}var X=function(){function e(t){V(this,e);var n={cache:true,animationSelector:'[class*="transition-"]',elements:["#swup"],pageClassPrefix:"",debugMode:false,scroll:true,doScrollingRightAway:false,animateScroll:true,scrollFriction:.3,scrollAcceleration:.04,preload:true,support:true,plugins:[],skipPopStateHandling:function e(t){if(t.state&&t.state.source=="swup"){return false}return true},animateHistoryBrowsing:false,LINK_SELECTOR:'a[href^="'+window.location.origin+'"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup])',FORM_SELECTOR:"form[data-swup-form]"};this.transition={};var r=o({},n,t);this.mobile=false;this.scrollToElement=null;this.preloadPromise=null;this.options=r;this.plugins=[];this.getUrl=x.default;this.cache=new l.default;this.link=new c.default;this.transitionEndEvent=(0,f.default)();this.getDataFromHtml=m.default;this.getPage=p.default;this.scrollTo=C.default;this.loadPage=w.default;this.renderPage=E.default;this.goBack=P.default;this.createState=T.default;this.triggerEvent=L.default;this.classify=O.default;this.doScrolling=_.default;this.markSwupElements=q.default;this.updateTransition=D.default;this.preloadPages=B.default;this.usePlugin=N.default;this.log=W.default;this.enable=this.enable;this.destroy=this.destroy;if(window.innerWidth<=767){this.mobile=true}if(this.options.debugMode){window.swup=this}this.getUrl();this.enable()}r(e,[{key:"enable",value:function e(){var t=this;if(this.options.support){if(!("pushState"in window.history)){console.warn("pushState is not supported");return}if((0,f.default)()){this.transitionEndEvent=(0,f.default)()}else{console.warn("transitionEnd detection is not supported");return}if(typeof Promise==="undefined"||Promise.toString().indexOf("[native code]")===-1){console.warn("Promise is not supported");return}}this.delegatedListeners={};this.delegatedListeners.click=(0,s.default)(document,this.options.LINK_SELECTOR,"click",this.linkClickHandler.bind(this));this.delegatedListeners.mouseover=(0,s.default)(document.body,this.options.LINK_SELECTOR,"mouseover",this.linkMouseoverHandler.bind(this));this.delegatedListeners.formSubmit=(0,s.default)(document,this.options.FORM_SELECTOR,"submit",this.formSubmitHandler.bind(this));window.addEventListener("popstate",this.popStateHandler.bind(this));var n=this.getDataFromHtml(document.documentElement.outerHTML);n.url=this.currentUrl;if(this.options.cache){this.cache.cacheUrl(n,this.options.debugMode)}this.markSwupElements(document.documentElement);this.options.plugins.forEach(function(e){return t.usePlugin(e)});window.history.replaceState(Object.assign({},window.history.state,{url:window.location.href,random:Math.random(),source:"swup"}),document.title,window.location.href);if(this.options.animateHistoryBrowsing){window.history.scrollRestoration="manual"}this.triggerEvent("enabled");document.documentElement.classList.add("swup-enabled");this.triggerEvent("pageView");this.preloadPages()}},{key:"destroy",value:function e(){this.delegatedListeners.click.destroy();this.delegatedListeners.mouseover.destroy();window.removeEventListener("popstate",this.popStateHandler.bind(this));this.cache.empty();document.querySelectorAll("[data-swup]").forEach(function(e){delete e.dataset.swup});this.triggerEvent("disabled");document.documentElement.classList.remove("swup-enabled")}},{key:"linkClickHandler",value:function e(t){if(!t.metaKey){this.triggerEvent("clickLink");var n=new c.default;t.preventDefault();n.setPath(t.delegateTarget.href);if(n.getAddress()==this.currentUrl||n.getAddress()==""){if(n.getHash()!=""){this.triggerEvent("samePageWithHash");var o=document.querySelector(n.getHash());if(o!=null){if(this.options.scroll){var r=o.getBoundingClientRect().top+window.pageYOffset;this.scrollTo(document.body,r)}history.replaceState({url:n.getAddress()+n.getHash(),random:Math.random(),source:"swup"},document.title,n.getAddress()+n.getHash())}else{console.warn("Element for offset not found ("+n.getHash()+")")}}else{this.triggerEvent("samePage");if(this.options.scroll){this.scrollTo(document.body,0,1)}}}else{if(n.getHash()!=""){this.scrollToElement=n.getHash()}var i=t.delegateTarget.dataset.swupClass;if(i!=null){this.updateTransition(window.location.pathname,n.getAddress(),t.delegateTarget.dataset.swupClass);document.documentElement.classList.add("to-"+i)}else{this.updateTransition(window.location.pathname,n.getAddress())}this.loadPage({url:n.getAddress()},false)}}else{this.triggerEvent("openPageInNewTab")}}},{key:"linkMouseoverHandler",value:function e(t){var n=this;this.triggerEvent("hoverLink");if(this.options.preload){var o=new c.default;o.setPath(t.delegateTarget.href);if(o.getAddress()!=this.currentUrl&&!this.cache.exists(o.getAddress())&&this.preloadPromise==null){this.preloadPromise=new Promise(function(e,t){n.getPage({url:o.getAddress()},function(r,i){if(i.status===500){n.triggerEvent("serverError");t(o.getAddress());return}else{var s=n.getDataFromHtml(r,i);if(s!=null){s.url=o.getAddress();n.cache.cacheUrl(s,n.options.debugMode);n.triggerEvent("pagePreloaded")}else{t(o.getAddress());return}}e();n.preloadPromise=null})});this.preloadPromise.route=o.getAddress()}}}},{key:"formSubmitHandler",value:function e(t){if(!t.metaKey){this.triggerEvent("submitForm");t.preventDefault();var n=t.target;var o=new FormData(n);var r=new c.default;r.setPath(n.action);if(r.getHash()!=""){this.scrollToElement=r.getHash()}if(n.method.toLowerCase()!="get"){this.cache.remove(r.getAddress());this.loadPage({url:r.getAddress(),method:n.method,data:o})}else{var i=r.getAddress()||window.location.href;var s=n.querySelectorAll("input");if(i.indexOf("?")==-1){i+="?"}else{i+="&"}s.forEach(function(e){if(e.type=="checkbox"||e.type=="radio"){if(e.checked){i+=encodeURIComponent(e.name)+"="+encodeURIComponent(e.value)+"&"}}else{i+=encodeURIComponent(e.name)+"="+encodeURIComponent(e.value)+"&"}});i=i.slice(0,-1);this.cache.remove(i);this.loadPage({url:i})}}else{this.triggerEvent("openFormSubmitInNewTab")}}},{key:"popStateHandler",value:function e(t){var n=new c.default;if(this.options.skipPopStateHandling(t))return;n.setPath(t.state?t.state.url:window.location.pathname);if(n.getHash()!=""){this.scrollToElement=n.getHash()}else{t.preventDefault()}this.triggerEvent("popState");this.loadPage({url:n.getAddress()},t)}}]);return e}();t.default=X},function(e,t,n){var o=n(4);function r(e,t,n,o,r){var i=s.apply(this,arguments);e.addEventListener(n,i,r);return{destroy:function(){e.removeEventListener(n,i,r)}}}function i(e,t,n,o,i){if(typeof e.addEventListener==="function"){return r.apply(null,arguments)}if(typeof n==="function"){return r.bind(null,document).apply(null,arguments)}if(typeof e==="string"){e=document.querySelectorAll(e)}return Array.prototype.map.call(e,function(e){return r(e,t,n,o,i)})}function s(e,t,n,r){return function(n){n.delegateTarget=o(n.target,t);if(n.delegateTarget){r.call(e,n)}}}e.exports=i},function(e,t){var n=9;if(typeof Element!=="undefined"&&!Element.prototype.matches){var o=Element.prototype;o.matches=o.matchesSelector||o.mozMatchesSelector||o.msMatchesSelector||o.oMatchesSelector||o.webkitMatchesSelector}function r(e,t){while(e&&e.nodeType!==n){if(typeof e.matches==="function"&&e.matches(t)){return e}e=e.parentNode}}e.exports=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||false;o.configurable=true;if("value"in o)o.writable=true;Object.defineProperty(e,o.key,o)}}return function(t,n,o){if(n)e(t.prototype,n);if(o)e(t,o);return t}}();function r(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}var i=function(){function e(){r(this,e);this.pages={};this.count=0;this.last=null}o(e,[{key:"cacheUrl",value:function e(t,n){this.count++;if(t.url in this.pages===false){this.pages[t.url]=t}this.last=this.pages[t.url];if(n){this.displayCache()}}},{key:"getPage",value:function e(t){return this.pages[t]}},{key:"displayCache",value:function e(){console.groupCollapsed("Cache ("+Object.keys(this.pages).length+")");for(var t in this.pages){console.log(this.pages[t])}console.groupEnd()}},{key:"exists",value:function e(t){if(t in this.pages)return true;return false}},{key:"empty",value:function e(t){this.pages={};this.count=0;this.last=null;if(t){console.log("Cache cleared")}}},{key:"remove",value:function e(t){delete this.pages[t]}}]);return e}();t.default=i},function(e,t,n){"use strict";e.exports=function e(){var t=document.createElement("div");var n={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var o in n){if(t.style[o]!==undefined){return n[o]}}return false}},function(e,t,n){"use strict";var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n){if(Object.prototype.hasOwnProperty.call(n,o)){e[o]=n[o]}}}return e};e.exports=function(e){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var n={url:window.location.pathname+window.location.search,method:"GET",data:null};var r=o({},n,e);var i=new XMLHttpRequest;i.onreadystatechange=function(){if(i.readyState===4){if(i.status!==500){t(i.responseText,i)}else{t(null,i)}}};i.open(r.method,r.url,true);i.setRequestHeader("X-Requested-With","swup");i.send(r.data);return i}},function(e,t,n){"use strict";e.exports=function(e,t){var n=this;var o=e.replace("<body",'<div id="swupBody"').replace("</body>","</div>");var r=document.createElement("div");r.innerHTML=o;var i=[];for(var s=0;s<this.options.elements.length;s++){if(r.querySelector(this.options.elements[s])==null){console.warn("Element "+this.options.elements[s]+" is not found in cached page.");return null}else{[].forEach.call(document.body.querySelectorAll(this.options.elements[s]),function(e,t){r.querySelectorAll(n.options.elements[s])[t].dataset.swup=i.length;i.push(r.querySelectorAll(n.options.elements[s])[t].outerHTML)})}}var a={title:r.querySelector("title").innerText,pageClass:r.querySelector("#swupBody").className,originalContent:e,blocks:i,responseURL:t!=null?t.responseURL:window.location.href};return a}},function(e,t,n){"use strict";var o=Array.prototype.forEach;e.exports=function(e,t){var n=this;var r=null;if(this.options.doScrollingRightAway&&!this.scrollToElement){this.doScrolling(t)}var i=[];if(!t||this.options.animateHistoryBrowsing){document.documentElement.classList.add("is-changing");document.documentElement.classList.add("is-leaving");document.documentElement.classList.add("is-animating");if(t){document.documentElement.classList.add("is-popstate")}document.documentElement.classList.add("to-"+this.classify(e.url));var s=document.querySelectorAll(this.options.animationSelector);o.call(s,function(e){var t=new Promise(function(t){e.addEventListener(n.transitionEndEvent,function(n){if(e==n.target){t()}})});i.push(t)});Promise.all(i).then(function(){n.triggerEvent("animationOutDone")});if(this.scrollToElement!=null){var a=e.url+this.scrollToElement}else{var a=e.url}if(!t)this.createState(a)}else{this.triggerEvent("animationSkipped")}if(this.cache.exists(e.url)){var l=new Promise(function(e){e()});this.triggerEvent("pageRetrievedFromCache")}else{if(!this.preloadPromise||this.preloadPromise.route!=e.url){var l=new Promise(function(t,o){n.getPage(e,function(r,i){if(i.status===500){n.triggerEvent("serverError");o(e.url);return}else{var s=n.getDataFromHtml(r,i);if(s!=null){s.url=e.url}else{o(e.url);return}n.cache.cacheUrl(s,n.options.debugMode);n.triggerEvent("pageLoaded")}t()})})}else{var l=this.preloadPromise}}Promise.all(i.concat([l])).then(function(){r=n.cache.getPage(e.url);n.renderPage(r,t);n.preloadPromise=null}).catch(function(e){n.options.skipPopStateHandling=function(){window.location=e;return true};window.history.go(-1)})}},function(e,t,n){"use strict";var o=n(0);var r=i(o);function i(e){return e&&e.__esModule?e:{default:e}}var s=Array.prototype.forEach;e.exports=function(e,t){var n=this;document.documentElement.classList.remove("is-leaving");var o=new r.default;o.setPath(e.responseURL);if(window.location.pathname!==o.getPath()){window.history.replaceState({url:o.getPath(),random:Math.random(),source:"swup"},document.title,o.getPath())}if(!t||this.options.animateHistoryBrowsing){document.documentElement.classList.add("is-rendering")}this.triggerEvent("willReplaceContent");for(var i=0;i<e.blocks.length;i++){document.body.querySelector('[data-swup="'+i+'"]').outerHTML=e.blocks[i]}document.title=e.title;if(this.options.pageClassPrefix!==false){document.body.className.split(" ").forEach(function(e){if(e!=""&&e.includes(n.options.pageClassPrefix)){document.body.classList.remove(e)}})}if(e.pageClass!=""){e.pageClass.split(" ").forEach(function(e){if(e!=""&&e.includes(n.options.pageClassPrefix)){document.body.classList.add(e)}})}this.triggerEvent("contentReplaced");this.triggerEvent("pageView");if(!this.options.cache){this.cache.empty(this.options.debugMode)}setTimeout(function(){document.documentElement.classList.remove("is-animating")},10);if(!this.options.doScrollingRightAway||this.scrollToElement){this.doScrolling(t)}var a=document.querySelectorAll(this.options.animationSelector);var l=[];s.call(a,function(e){var t=new Promise(function(t){e.addEventListener(n.transitionEndEvent,function(n){if(e==n.target){t()}})});l.push(t)});this.preloadPages();Promise.all(l).then(function(){n.triggerEvent("animationInDone");document.documentElement.className.split(" ").forEach(function(e){if(new RegExp("^to-").test(e)||e==="is-changing"||e==="is-rendering"||e==="is-popstate"){document.documentElement.classList.remove(e)}})});this.getUrl();this.scrollToElement=null}},function(e,t,n){"use strict";e.exports=function(e,t){setTimeout(function(){document.body.classList.remove("is-changing");history.back()},100)}},function(e,t,n){"use strict";e.exports=function(e){window.history.pushState({url:e||window.location.href.split(window.location.hostname)[1],random:Math.random(),source:"swup"},document.getElementsByTagName("title")[0].innerText,e||window.location.href.split(window.location.hostname)[1])}},function(e,t,n){"use strict";e.exports=function(e){if(this.options.debugMode){console.log("%cswup:"+"%c"+e,"color: #343434","color: #009ACD")}var t=new CustomEvent("swup:"+e,{detail:e});document.dispatchEvent(t)}},function(e,t,n){"use strict";e.exports=function(){this.currentUrl=window.location.pathname+window.location.search}},function(e,t,n){"use strict";e.exports=function(e,t){var n=this;var o=arguments.length>2&&arguments[2]!==undefined?arguments[2]:this.options.animateScroll;var r=1-this.options.scrollFriction;var i=this.options.scrollAcceleration;var s=0;var a=0;var l=0;var u=0;var c=0;var d=null;function f(){return document.body.scrollTop||document.documentElement.scrollTop}var h=function e(){var t=p();m();if(c===1&&l>s||c===-1&&l<s){d=requestAnimationFrame(e)}else{window.scrollTo(0,l);n.triggerEvent("scrollDone")}};function p(){var e=u-s;var t=e*i;g(t);a*=r;s+=a;return e}var g=function e(t){a+=t};var m=function e(){window.scrollTo(0,s)};window.addEventListener("mousewheel",function(e){if(d){cancelAnimationFrame(d);d=null}},{passive:true});var v=function e(t,o){s=f();c=s>t?-1:1;u=t+c;l=t;a=0;if(s!=l){h()}else{n.triggerEvent("scrollDone")}};this.triggerEvent("scrollStart");if(o==0){window.scrollTo(0,t);this.triggerEvent("scrollDone")}else{v(t)}}},function(e,t,n){"use strict";e.exports=function(e){var t=e.toString().toLowerCase().replace(/\s+/g,"-").replace(/\//g,"-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-").replace(/^-+/,"").replace(/-+$/,"");if(t[0]=="/")t=t.splice(1);if(t=="")t="homepage";return t}},function(e,t,n){"use strict";e.exports=function(e){if(this.options.scroll&&(!e||this.options.animateHistoryBrowsing)){if(this.scrollToElement!=null){var t=document.querySelector(this.scrollToElement);if(t!=null){var n=t.getBoundingClientRect().top+window.pageYOffset;this.scrollTo(document.body,n)}else{console.warn("Element for offset not found ("+this.scrollToElement+")")}this.scrollToElement=null}else{this.scrollTo(document.body,0)}}}},function(e,t,n){"use strict";e.exports=function(e){var t=this;var n=0;for(var o=0;o<this.options.elements.length;o++){if(e.querySelector(this.options.elements[o])==null){console.warn("Element "+this.options.elements[o]+" is not in current page.")}else{[].forEach.call(document.body.querySelectorAll(this.options.elements[o]),function(r,i){e.querySelectorAll(t.options.elements[o])[i].dataset.swup=n;n++})}}}},function(e,t,n){"use strict";e.exports=function(e,t,n){if(e=="/"){e="/homepage"}if(t=="/"){t="/homepage"}this.transition={from:e.replace("/",""),to:t.replace("/","")};if(n){this.transition.custom=n}}},function(e,t,n){"use strict";var o=n(0);var r=i(o);function i(e){return e&&e.__esModule?e:{default:e}}e.exports=function(){var e=this;if(this.options.preload){var t=function t(n){var o=new r.default;o.setPath(n);if(o.getAddress()!=e.currentUrl&&!e.cache.exists(o.getAddress())&&e.preloadPromise==null){e.getPage({url:o.getAddress()},function(t,n){if(n.status===500){e.triggerEvent("serverError");return}else{var r=e.getDataFromHtml(t,n);if(r!=null){r.url=o.getAddress();e.cache.cacheUrl(r,e.options.debugMode);e.triggerEvent("pagePreloaded")}}})}};document.querySelectorAll("[data-swup-preload]").forEach(function(e){t(e.href)})}}},function(e,t,n){"use strict";e.exports=function(e,t){var n=this;t=Object.assign({},e.options,t);e.options=t;var o=function e(){var t=n.cache.getPage(window.location.pathname+window.location.search);var o=document.createElement("html");o.innerHTML=t.originalContent;return o};this.plugins.push(e);e.exec(t,this,o);return this.plugins}},function(e,t,n){"use strict";e.exports=function(e){if(this.options.debugMode){console.log(e+"%c","color: #009ACD")}}}])});
\ No newline at end of file
+(function e(t,n){if(typeof exports==="object"&&typeof module==="object")module.exports=n();else if(typeof define==="function"&&define.amd)define([],n);else if(typeof exports==="object")exports["Swup"]=n();else t["Swup"]=n()})(window,function(){return function(e){var t={};function n(o){if(t[o]){return t[o].exports}var r=t[o]={i:o,l:false,exports:{}};e[o].call(r.exports,r,r.exports,n);r.l=true;return r.exports}n.m=e;n.c=t;n.d=function(e,t,o){if(!n.o(e,t)){Object.defineProperty(e,t,{enumerable:true,get:o})}};n.r=function(e){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(e,"__esModule",{value:true})};n.t=function(e,t){if(t&1)e=n(e);if(t&8)return e;if(t&4&&typeof e==="object"&&e&&e.__esModule)return e;var o=Object.create(null);n.r(o);Object.defineProperty(o,"default",{enumerable:true,value:e});if(t&2&&typeof e!="string")for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o};n.n=function(e){var t=e&&e.__esModule?function t(){return e["default"]}:function t(){return e};n.d(t,"a",t);return t};n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};n.p="";return n(n.s=1)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||false;o.configurable=true;if("value"in o)o.writable=true;Object.defineProperty(e,o.key,o)}}return function(t,n,o){if(n)e(t.prototype,n);if(o)e(t,o);return t}}();function r(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}var i=function(){function e(){r(this,e);this.link=document.createElement("a")}o(e,[{key:"setPath",value:function e(t){this.link.href=t}},{key:"getPath",value:function e(){var t=this.link.pathname;if(t[0]!="/"){t="/"+t}return t}},{key:"getAddress",value:function e(){var t=this.link.pathname+this.link.search;if(t[0]!="/"){t="/"+t}return t}},{key:"getHash",value:function e(){return this.link.hash}}]);return e}();t.default=i},function(e,t,n){"use strict";var o=n(2);var r=i(o);function i(e){return e&&e.__esModule?e:{default:e}}e.exports=r.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n){if(Object.prototype.hasOwnProperty.call(n,o)){e[o]=n[o]}}}return e};var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||false;o.configurable=true;if("value"in o)o.writable=true;Object.defineProperty(e,o.key,o)}}return function(t,n,o){if(n)e(t.prototype,n);if(o)e(t,o);return t}}();var i=n(3);var s=z(i);var a=n(5);var l=z(a);var u=n(0);var c=z(u);var d=n(6);var f=z(d);var h=n(7);var p=z(h);var g=n(8);var m=z(g);var v=n(9);var w=z(v);var y=n(10);var E=z(y);var b=n(11);var P=z(b);var S=n(12);var T=z(S);var k=n(13);var L=z(k);var A=n(14);var x=z(A);var H=n(15);var C=z(H);var M=n(16);var O=z(M);var R=n(17);var _=z(R);var j=n(18);var q=z(j);var U=n(19);var D=z(U);var F=n(20);var B=z(F);var I=n(21);var N=z(I);var K=n(22);var W=z(K);function z(e){return e&&e.__esModule?e:{default:e}}function V(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}var X=function(){function e(t){V(this,e);var n={cache:true,animationSelector:'[class*="transition-"]',elements:["#swup"],pageClassPrefix:"",debugMode:false,scroll:true,doScrollingRightAway:false,animateScroll:true,scrollFriction:.3,scrollAcceleration:.04,preload:true,support:true,plugins:[],skipPopStateHandling:function e(t){if(t.state&&t.state.source=="swup"){return false}return true},animateHistoryBrowsing:false,LINK_SELECTOR:'a[href^="'+window.location.origin+'"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup])',FORM_SELECTOR:"form[data-swup-form]"};this.transition={};var r=o({},n,t);this.mobile=false;this.scrollToElement=null;this.preloadPromise=null;this.options=r;this.plugins=[];this.getUrl=x.default;this.cache=new l.default;this.link=new c.default;this.transitionEndEvent=(0,f.default)();this.getDataFromHtml=m.default;this.getPage=p.default;this.scrollTo=C.default;this.loadPage=w.default;this.renderPage=E.default;this.goBack=P.default;this.createState=T.default;this.triggerEvent=L.default;this.classify=O.default;this.doScrolling=_.default;this.markSwupElements=q.default;this.updateTransition=D.default;this.preloadPages=B.default;this.usePlugin=N.default;this.log=W.default;this.enable=this.enable;this.destroy=this.destroy;if(window.innerWidth<=767){this.mobile=true}if(this.options.debugMode){window.swup=this}this.getUrl();this.enable()}r(e,[{key:"enable",value:function e(){var t=this;if(this.options.support){if(!("pushState"in window.history)){console.warn("pushState is not supported");return}if((0,f.default)()){this.transitionEndEvent=(0,f.default)()}else{console.warn("transitionEnd detection is not supported");return}if(typeof Promise==="undefined"||Promise.toString().indexOf("[native code]")===-1){console.warn("Promise is not supported");return}}this.delegatedListeners={};this.delegatedListeners.click=(0,s.default)(document,this.options.LINK_SELECTOR,"click",this.linkClickHandler.bind(this));this.delegatedListeners.mouseover=(0,s.default)(document.body,this.options.LINK_SELECTOR,"mouseover",this.linkMouseoverHandler.bind(this));this.delegatedListeners.formSubmit=(0,s.default)(document,this.options.FORM_SELECTOR,"submit",this.formSubmitHandler.bind(this));window.addEventListener("popstate",this.popStateHandler.bind(this));var n=this.getDataFromHtml(document.documentElement.outerHTML);n.url=this.currentUrl;if(this.options.cache){this.cache.cacheUrl(n,this.options.debugMode)}this.markSwupElements(document.documentElement);this.options.plugins.forEach(function(e){return t.usePlugin(e)});window.history.replaceState(Object.assign({},window.history.state,{url:window.location.href,random:Math.random(),source:"swup"}),document.title,window.location.href);if(this.options.animateHistoryBrowsing){window.history.scrollRestoration="manual"}this.triggerEvent("enabled");document.documentElement.classList.add("swup-enabled");this.triggerEvent("pageView");this.preloadPages()}},{key:"destroy",value:function e(){this.delegatedListeners.click.destroy();this.delegatedListeners.mouseover.destroy();window.removeEventListener("popstate",this.popStateHandler.bind(this));this.cache.empty();document.querySelectorAll("[data-swup]").forEach(function(e){delete e.dataset.swup});this.triggerEvent("disabled");document.documentElement.classList.remove("swup-enabled")}},{key:"linkClickHandler",value:function e(t){if(!t.metaKey){this.triggerEvent("clickLink");var n=new c.default;t.preventDefault();n.setPath(t.delegateTarget.href);if(n.getAddress()==this.currentUrl||n.getAddress()==""){if(n.getHash()!=""){this.triggerEvent("samePageWithHash");var o=document.querySelector(n.getHash());if(o!=null){if(this.options.scroll){var r=o.getBoundingClientRect().top+window.pageYOffset;this.scrollTo(document.body,r)}history.replaceState({url:n.getAddress()+n.getHash(),random:Math.random(),source:"swup"},document.title,n.getAddress()+n.getHash())}else{console.warn("Element for offset not found ("+n.getHash()+")")}}else{this.triggerEvent("samePage");if(this.options.scroll){this.scrollTo(document.body,0,1)}}}else{if(n.getHash()!=""){this.scrollToElement=n.getHash()}var i=t.delegateTarget.dataset.swupClass;if(i!=null){this.updateTransition(window.location.pathname,n.getAddress(),t.delegateTarget.dataset.swupClass);document.documentElement.classList.add("to-"+i)}else{this.updateTransition(window.location.pathname,n.getAddress())}this.loadPage({url:n.getAddress()},false)}}else{this.triggerEvent("openPageInNewTab")}}},{key:"linkMouseoverHandler",value:function e(t){var n=this;this.triggerEvent("hoverLink");if(this.options.preload){var o=new c.default;o.setPath(t.delegateTarget.href);if(o.getAddress()!=this.currentUrl&&!this.cache.exists(o.getAddress())&&this.preloadPromise==null){this.preloadPromise=new Promise(function(e,t){n.getPage({url:o.getAddress()},function(r,i){if(i.status===500){n.triggerEvent("serverError");t(o.getAddress());return}else{var s=n.getDataFromHtml(r,i);if(s!=null){s.url=o.getAddress();n.cache.cacheUrl(s,n.options.debugMode);n.triggerEvent("pagePreloaded")}else{t(o.getAddress());return}}e();n.preloadPromise=null})});this.preloadPromise.route=o.getAddress()}}}},{key:"formSubmitHandler",value:function e(t){if(!t.metaKey){this.triggerEvent("submitForm");t.preventDefault();var n=t.target;var o=new FormData(n);var r=new c.default;r.setPath(n.action);if(r.getHash()!=""){this.scrollToElement=r.getHash()}if(n.method.toLowerCase()!="get"){this.cache.remove(r.getAddress());this.loadPage({url:r.getAddress(),method:n.method,data:o})}else{var i=r.getAddress()||window.location.href;var s=n.querySelectorAll("input");if(i.indexOf("?")==-1){i+="?"}else{i+="&"}s.forEach(function(e){if(e.type=="checkbox"||e.type=="radio"){if(e.checked){i+=encodeURIComponent(e.name)+"="+encodeURIComponent(e.value)+"&"}}else{i+=encodeURIComponent(e.name)+"="+encodeURIComponent(e.value)+"&"}});i=i.slice(0,-1);this.cache.remove(i);this.loadPage({url:i})}}else{this.triggerEvent("openFormSubmitInNewTab")}}},{key:"popStateHandler",value:function e(t){var n=new c.default;if(this.options.skipPopStateHandling(t))return;n.setPath(t.state?t.state.url:window.location.pathname);if(n.getHash()!=""){this.scrollToElement=n.getHash()}else{t.preventDefault()}this.triggerEvent("popState");this.loadPage({url:n.getAddress()},t)}}]);return e}();t.default=X},function(e,t,n){var o=n(4);function r(e,t,n,o,r){var i=s.apply(this,arguments);e.addEventListener(n,i,r);return{destroy:function(){e.removeEventListener(n,i,r)}}}function i(e,t,n,o,i){if(typeof e.addEventListener==="function"){return r.apply(null,arguments)}if(typeof n==="function"){return r.bind(null,document).apply(null,arguments)}if(typeof e==="string"){e=document.querySelectorAll(e)}return Array.prototype.map.call(e,function(e){return r(e,t,n,o,i)})}function s(e,t,n,r){return function(n){n.delegateTarget=o(n.target,t);if(n.delegateTarget){r.call(e,n)}}}e.exports=i},function(e,t){var n=9;if(typeof Element!=="undefined"&&!Element.prototype.matches){var o=Element.prototype;o.matches=o.matchesSelector||o.mozMatchesSelector||o.msMatchesSelector||o.oMatchesSelector||o.webkitMatchesSelector}function r(e,t){while(e&&e.nodeType!==n){if(typeof e.matches==="function"&&e.matches(t)){return e}e=e.parentNode}}e.exports=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||false;o.configurable=true;if("value"in o)o.writable=true;Object.defineProperty(e,o.key,o)}}return function(t,n,o){if(n)e(t.prototype,n);if(o)e(t,o);return t}}();function r(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}var i=function(){function e(){r(this,e);this.pages={};this.count=0;this.last=null}o(e,[{key:"cacheUrl",value:function e(t,n){this.count++;if(t.url in this.pages===false){this.pages[t.url]=t}this.last=this.pages[t.url];if(n){this.displayCache()}}},{key:"getPage",value:function e(t){return this.pages[t]}},{key:"displayCache",value:function e(){console.groupCollapsed("Cache ("+Object.keys(this.pages).length+")");for(var t in this.pages){console.log(this.pages[t])}console.groupEnd()}},{key:"exists",value:function e(t){if(t in this.pages)return true;return false}},{key:"empty",value:function e(t){this.pages={};this.count=0;this.last=null;if(t){console.log("Cache cleared")}}},{key:"remove",value:function e(t){delete this.pages[t]}}]);return e}();t.default=i},function(e,t,n){"use strict";e.exports=function e(){var t=document.createElement("div");var n={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var o in n){if(t.style[o]!==undefined){return n[o]}}return false}},function(e,t,n){"use strict";var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n){if(Object.prototype.hasOwnProperty.call(n,o)){e[o]=n[o]}}}return e};e.exports=function(e){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var n={url:window.location.pathname+window.location.search,method:"GET",data:null};var r=o({},n,e);var i=new XMLHttpRequest;i.onreadystatechange=function(){if(i.readyState===4){if(i.status!==500){t(i.responseText,i)}else{t(null,i)}}};i.open(r.method,r.url,true);i.setRequestHeader("X-Requested-With","swup");i.send(r.data);return i}},function(e,t,n){"use strict";e.exports=function(e,t){var n=this;var o=e.replace("<body",'<div id="swupBody"').replace("</body>","</div>");var r=document.createElement("div");r.innerHTML=o;var i=[];for(var s=0;s<this.options.elements.length;s++){if(r.querySelector(this.options.elements[s])==null){console.warn("Element "+this.options.elements[s]+" is not found in cached page.");return null}else{[].forEach.call(document.body.querySelectorAll(this.options.elements[s]),function(e,t){r.querySelectorAll(n.options.elements[s])[t].dataset.swup=i.length;i.push(r.querySelectorAll(n.options.elements[s])[t].outerHTML)})}}var a={title:r.querySelector("title").innerText,pageClass:r.querySelector("#swupBody").className,originalContent:e,blocks:i,responseURL:t!=null?t.responseURL:window.location.href};return a}},function(e,t,n){"use strict";var o=Array.prototype.forEach;e.exports=function(e,t){var n=this;var r=null;if(this.options.doScrollingRightAway&&!this.scrollToElement){this.doScrolling(t)}var i=[];if(!t||this.options.animateHistoryBrowsing){this.triggerEvent("animationOutStart");document.documentElement.classList.add("is-changing");document.documentElement.classList.add("is-leaving");document.documentElement.classList.add("is-animating");if(t){document.documentElement.classList.add("is-popstate")}document.documentElement.classList.add("to-"+this.classify(e.url));var s=document.querySelectorAll(this.options.animationSelector);o.call(s,function(e){var t=new Promise(function(t){e.addEventListener(n.transitionEndEvent,function(n){if(e==n.target){t()}})});i.push(t)});Promise.all(i).then(function(){n.triggerEvent("animationOutDone")});if(this.scrollToElement!=null){var a=e.url+this.scrollToElement}else{var a=e.url}if(!t)this.createState(a)}else{this.triggerEvent("animationSkipped")}if(this.cache.exists(e.url)){var l=new Promise(function(e){e()});this.triggerEvent("pageRetrievedFromCache")}else{if(!this.preloadPromise||this.preloadPromise.route!=e.url){var l=new Promise(function(t,o){n.getPage(e,function(r,i){if(i.status===500){n.triggerEvent("serverError");o(e.url);return}else{var s=n.getDataFromHtml(r,i);if(s!=null){s.url=e.url}else{o(e.url);return}n.cache.cacheUrl(s,n.options.debugMode);n.triggerEvent("pageLoaded")}t()})})}else{var l=this.preloadPromise}}Promise.all(i.concat([l])).then(function(){r=n.cache.getPage(e.url);n.renderPage(r,t);n.preloadPromise=null}).catch(function(e){n.options.skipPopStateHandling=function(){window.location=e;return true};window.history.go(-1)})}},function(e,t,n){"use strict";var o=n(0);var r=i(o);function i(e){return e&&e.__esModule?e:{default:e}}var s=Array.prototype.forEach;e.exports=function(e,t){var n=this;document.documentElement.classList.remove("is-leaving");var o=new r.default;o.setPath(e.responseURL);if(window.location.pathname!==o.getPath()){window.history.replaceState({url:o.getPath(),random:Math.random(),source:"swup"},document.title,o.getPath())}if(!t||this.options.animateHistoryBrowsing){document.documentElement.classList.add("is-rendering")}this.triggerEvent("willReplaceContent");for(var i=0;i<e.blocks.length;i++){document.body.querySelector('[data-swup="'+i+'"]').outerHTML=e.blocks[i]}document.title=e.title;if(this.options.pageClassPrefix!==false){document.body.className.split(" ").forEach(function(e){if(e!=""&&e.includes(n.options.pageClassPrefix)){document.body.classList.remove(e)}})}if(e.pageClass!=""){e.pageClass.split(" ").forEach(function(e){if(e!=""&&e.includes(n.options.pageClassPrefix)){document.body.classList.add(e)}})}this.triggerEvent("contentReplaced");this.triggerEvent("pageView");if(!this.options.cache){this.cache.empty(this.options.debugMode)}setTimeout(function(){n.triggerEvent("animationInStart");document.documentElement.classList.remove("is-animating")},10);if(!this.options.doScrollingRightAway||this.scrollToElement){this.doScrolling(t)}var a=document.querySelectorAll(this.options.animationSelector);var l=[];s.call(a,function(e){var t=new Promise(function(t){e.addEventListener(n.transitionEndEvent,function(n){if(e==n.target){t()}})});l.push(t)});this.preloadPages();Promise.all(l).then(function(){n.triggerEvent("animationInDone");document.documentElement.className.split(" ").forEach(function(e){if(new RegExp("^to-").test(e)||e==="is-changing"||e==="is-rendering"||e==="is-popstate"){document.documentElement.classList.remove(e)}})});this.getUrl();this.scrollToElement=null}},function(e,t,n){"use strict";e.exports=function(e,t){setTimeout(function(){document.body.classList.remove("is-changing");history.back()},100)}},function(e,t,n){"use strict";e.exports=function(e){window.history.pushState({url:e||window.location.href.split(window.location.hostname)[1],random:Math.random(),source:"swup"},document.getElementsByTagName("title")[0].innerText,e||window.location.href.split(window.location.hostname)[1])}},function(e,t,n){"use strict";e.exports=function(e){if(this.options.debugMode){console.log("%cswup:"+"%c"+e,"color: #343434","color: #009ACD")}var t=new CustomEvent("swup:"+e,{detail:e});document.dispatchEvent(t)}},function(e,t,n){"use strict";e.exports=function(){this.currentUrl=window.location.pathname+window.location.search}},function(e,t,n){"use strict";e.exports=function(e,t){var n=this;var o=arguments.length>2&&arguments[2]!==undefined?arguments[2]:this.options.animateScroll;var r=1-this.options.scrollFriction;var i=this.options.scrollAcceleration;var s=0;var a=0;var l=0;var u=0;var c=0;var d=null;function f(){return document.body.scrollTop||document.documentElement.scrollTop}var h=function e(){var t=p();m();if(c===1&&l>s||c===-1&&l<s){d=requestAnimationFrame(e)}else{window.scrollTo(0,l);n.triggerEvent("scrollDone")}};function p(){var e=u-s;var t=e*i;g(t);a*=r;s+=a;return e}var g=function e(t){a+=t};var m=function e(){window.scrollTo(0,s)};window.addEventListener("mousewheel",function(e){if(d){cancelAnimationFrame(d);d=null}},{passive:true});var v=function e(t,o){s=f();c=s>t?-1:1;u=t+c;l=t;a=0;if(s!=l){h()}else{n.triggerEvent("scrollDone")}};this.triggerEvent("scrollStart");if(o==0){window.scrollTo(0,t);this.triggerEvent("scrollDone")}else{v(t)}}},function(e,t,n){"use strict";e.exports=function(e){var t=e.toString().toLowerCase().replace(/\s+/g,"-").replace(/\//g,"-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-").replace(/^-+/,"").replace(/-+$/,"");if(t[0]=="/")t=t.splice(1);if(t=="")t="homepage";return t}},function(e,t,n){"use strict";e.exports=function(e){if(this.options.scroll&&(!e||this.options.animateHistoryBrowsing)){if(this.scrollToElement!=null){var t=document.querySelector(this.scrollToElement);if(t!=null){var n=t.getBoundingClientRect().top+window.pageYOffset;this.scrollTo(document.body,n)}else{console.warn("Element for offset not found ("+this.scrollToElement+")")}this.scrollToElement=null}else{this.scrollTo(document.body,0)}}}},function(e,t,n){"use strict";e.exports=function(e){var t=this;var n=0;for(var o=0;o<this.options.elements.length;o++){if(e.querySelector(this.options.elements[o])==null){console.warn("Element "+this.options.elements[o]+" is not in current page.")}else{[].forEach.call(document.body.querySelectorAll(this.options.elements[o]),function(r,i){e.querySelectorAll(t.options.elements[o])[i].dataset.swup=n;n++})}}}},function(e,t,n){"use strict";e.exports=function(e,t,n){if(e=="/"){e="/homepage"}if(t=="/"){t="/homepage"}this.transition={from:e.replace("/",""),to:t.replace("/","")};if(n){this.transition.custom=n}}},function(e,t,n){"use strict";var o=n(0);var r=i(o);function i(e){return e&&e.__esModule?e:{default:e}}e.exports=function(){var e=this;if(this.options.preload){var t=function t(n){var o=new r.default;o.setPath(n);if(o.getAddress()!=e.currentUrl&&!e.cache.exists(o.getAddress())&&e.preloadPromise==null){e.getPage({url:o.getAddress()},function(t,n){if(n.status===500){e.triggerEvent("serverError");return}else{var r=e.getDataFromHtml(t,n);if(r!=null){r.url=o.getAddress();e.cache.cacheUrl(r,e.options.debugMode);e.triggerEvent("pagePreloaded")}}})}};document.querySelectorAll("[data-swup-preload]").forEach(function(e){t(e.href)})}}},function(e,t,n){"use strict";e.exports=function(e,t){var n=this;t=Object.assign({},e.options,t);e.options=t;var o=function e(){var t=n.cache.getPage(window.location.pathname+window.location.search);var o=document.createElement("html");o.innerHTML=t.originalContent;return o};this.plugins.push(e);e.exec(t,this,o);return this.plugins}},function(e,t,n){"use strict";e.exports=function(e){if(this.options.debugMode){console.log(e+"%c","color: #009ACD")}}}])});
\ No newline at end of file
diff --git a/package.json b/package.json
index 37fb68ab..199d514d 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "swup",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "Animated page transitions with css.",
   "main": "lib/index.js",
   "scripts": {
diff --git a/readme.md b/readme.md
index 0d457908..46baf3d4 100755
--- a/readme.md
+++ b/readme.md
@@ -311,11 +311,13 @@ document.addEventListener('swup:contentReplaced', event => {
 * **swup:pageView** - similar as previous, except it is once triggered on load
 * **swup:hoverLink** - triggers when link is hovered
 * **swup:clickLink** - triggers when link is clicked
+* **swup:animationOutStart** - triggers when animation *OUT* starts (class `is-animating` is added to html tag)
 * **swup:animationOutDone** - triggers when transition of all animated elements is done (after click of link and before content is replaced)
 * **swup:pagePreloaded** - triggers when the preload of some page is done
 * **swup:pageLoaded** - triggers when loading of some page is done (differs from previous only by the source of event - hover/click)
 * **swup:scrollStart** - triggers when built in scroll is started
 * **swup:scrollDone** - triggers when built in scroll is done
+* **swup:animationInStart** - triggers when animation *IN* starts (class `is-animating` is removed from html tag)
 * **swup:animationInDone** - triggers when transition of all animated elements is done (after content is replaced)
 * **swup:pageRetrievedFromCache** - triggers when page is retrieved from cache and no request is necessary
 * **swup:submitForm** - triggers when form is submitted trough swup (right before submission)
diff --git a/src/modules/loadPage.js b/src/modules/loadPage.js
index d709a3b1..ba8b533f 100755
--- a/src/modules/loadPage.js
+++ b/src/modules/loadPage.js
@@ -12,6 +12,7 @@ module.exports = function (data, popstate) {
 
     if (!popstate || this.options.animateHistoryBrowsing) {
         // start animation
+        this.triggerEvent('animationOutStart')
         document.documentElement.classList.add('is-changing')
         document.documentElement.classList.add('is-leaving')
         document.documentElement.classList.add('is-animating')
diff --git a/src/modules/renderPage.js b/src/modules/renderPage.js
index 5088c0ca..d6f43335 100755
--- a/src/modules/renderPage.js
+++ b/src/modules/renderPage.js
@@ -59,6 +59,7 @@ module.exports = function (page, popstate) {
         this.cache.empty(this.options.debugMode)
     }
     setTimeout(() => {
+        this.triggerEvent('animationInStart')
         document.documentElement.classList.remove('is-animating')
     }, 10)