add animationInStart and animationOutStart events

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);
 

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": {

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)

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')

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)