An attempt to add an "animateHistoryBrowsing" option to make animatio…

…ns work not only when user navigates through links but also using back/forward buttons. May be useful for PWAs etc.

src/index.js

@@ -49,6 +49,7 @@ export default class Swup {
                 }
                 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]',

src/modules/loadPage.js

@@ -10,7 +10,7 @@ module.exports = function (data, popstate) {
 
     let animationPromises = []
 
-    if (!popstate) {
+    if (!popstate || this.options.animateHistoryBrowsing) {
         // start animation
         document.documentElement.classList.add('is-changing')
         document.documentElement.classList.add('is-leaving')
@@ -43,7 +43,8 @@ module.exports = function (data, popstate) {
         } else {
             var pop = data.url;
         }
-        this.createState(pop)
+        if(!popstate)
+            this.createState(pop)
     } else {
         // proceed without animating
         this.triggerEvent('animationSkipped')
@@ -98,6 +99,7 @@ module.exports = function (data, popstate) {
             }
 
             // go back to the actual page were still at
-            window.history.go(-1)
+            if(!this.options.animateHistoryBrowsing)
+                window.history.go(-1)
         });
 }

src/modules/renderPage.js

@@ -4,7 +4,7 @@ module.exports = function (page, popstate) {
     document.documentElement.classList.remove('is-leaving')
 
     // only add for non-popstate transitions
-    if (!popstate) {
+    if (!popstate||this.options.animateHistoryBrowsing) {
         document.documentElement.classList.add('is-rendering')
     }