partial work

MMM-pages.js

@@ -14,7 +14,8 @@ Module.register('MMM-pages', {
     fixed: ['MMM-page-indicator'],
     animationTime: 1000,
     rotationTime: 0,
-    rotationDelay: 10000
+    rotationDelay: 10000,
+    slideAnimation: false,
   },
 
   /**
@@ -144,6 +145,35 @@ Module.register('MMM-pages', {
   animatePageChange: function() {
     const self = this;
 
+    if (this.config.slideAnimation) {
+      MM.getModules()
+        .exceptWithClass(this.config.fixed)
+        .exceptWithClass(this.config.modules[this.curPage])
+        .enumerate(module => {
+          const element = document.getElementById(module.data.identifier);
+          if (element) {
+            element.classList.add("mmm-pages-slide-out");
+            element.classList.remove("mmm-pages-slide-in");
+          }
+          setTimeout(() => {
+            module.hide(0, { lockString: self.identifier });
+            if (element) {
+              element.classList.remove("mmm-pages-slide-out");
+            }
+          }, self.config.animationTime);
+        });
+
+      MM.getModules()
+        .withClass(self.config.modules[self.curPage])
+        .enumerate((module) => {
+          const element = document.getElementById(module.data.identifier);
+          if (element) {
+            element.classList.add("mmm-pages-slide-in");
+          }
+          module.show(0, { lockString: self.identifier } );
+        });
+        
+    } else {
       // Hides all modules not on the current page. This hides any module not
       // meant to be shown.
       MM.getModules()
@@ -165,6 +195,7 @@ Module.register('MMM-pages', {
             );
           });
       }, this.config.animationTime / 2);
+    }
   },
 
   /**

pages.css

@@ -1,5 +1,6 @@
-/* This css page is reserved for future use. */
+.mmm-pages-slide-out {
-
+	transform: translateX(-200vw);
-.fullscreen.above {
+}
-	 z-index: -1
+.mmm-pages-slide-in {
+	transform: translateX(-100vw);
 }