Blur effect

.eslintrc

@@ -8,7 +8,7 @@
   },
   "rules": {
     "no-cond-assign": 0,
-    "no-console": 0,
+    "no-console": 2,
     "no-constant-condition": 2,
     "no-control-regex": 2,
     "no-debugger": 2,

src/js/plugins/zoom.js

@@ -160,8 +160,14 @@ export default class Zoom {
    * Zoom In the slider, scales the slides and uses a grid layout to show them
    */
   zoomIn() {
-    this.ws_.disable();
+    this.ws_.el.classList.add('zooming', 'in');
+    this.zws_.el.classList.add('zooming', 'in');
     DOM.show(this.zws_.el);
+    setTimeout(() => {
+      this.ws_.el.classList.remove('zooming', 'in');
+      this.zws_.el.classList.remove('zooming', 'in');
+      this.ws_.disable();
+    }, 400);
     this.isZoomed_ = true;
     document.body.style.overflow = 'auto';
   }
@@ -170,8 +176,14 @@ export default class Zoom {
    * Zoom Out the slider, remove scale from the slides
    */
   zoomOut() {
+    this.ws_.el.classList.add('zooming', 'out');
+    this.zws_.el.classList.add('zooming', 'out');
+    setTimeout(() => {
+      this.ws_.el.classList.remove('zooming', 'out');
+      this.zws_.el.classList.remove('zooming', 'out');
       DOM.hide(this.zws_.el);
       this.ws_.enable();
+    }, 400);
     this.isZoomed_ = false;
     document.body.style.overflow = '';
   }

static/css/base.css

@@ -3333,12 +3333,6 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
 /*=========================================
 18. Zoom: Index of slides (grid)
 =========================================== */
-#webslides.disabled {
-	position: absolute;
-	width: 100%;
-	z-index: 0;
-	filter: blur(10px);
-}
 #webslides-zoomed.grid{
   -webkit-flex-direction: row;
   flex-direction: row;
@@ -3389,11 +3383,10 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
 .text-slide-number {
   text-align: center;
   display: inline-block;
-  /*border-radius: .3rem;
-  padding: 0 1.6rem;*/
   margin: .8rem auto;
 }
 
+
 @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation:landscape) {
   #webslides-zoomed.grid > .column {
     width: 50%;
@@ -3411,3 +3404,117 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
     transform: scale(0.5) translate(-50%, -50%);
   }
 }
+
+#webslides.disabled, #webslides.zooming {
+	position: absolute;
+	width: 100%;
+	z-index: 0;
+}
+#webslides.disabled {
+  filter: blur(10px);
+}
+#webslides-zoomed.zooming {
+  opacity: 1;
+  transform: scale(1);
+}
+#webslides.zooming.in {
+  -webkit-animation: bg-zoom-in 0.4s 1;
+  animation: bg-zoom-in 0.4s 1;
+}
+
+#webslides.zooming.out {
+  -webkit-animation: bg-zoom-out 0.4s 1;
+  animation: bg-zoom-out 0.4s 1;
+}
+
+#webslides-zoomed.zooming.in {
+  -webkit-animation: grid-zoom-in 0.4s 1;
+  animation: grid-zoom-in 0.4s 1;
+}
+
+#webslides-zoomed.zooming.out {
+  -webkit-animation: grid-zoom-out 0.4s 1;
+  animation: grid-zoom-out 0.4s 1;
+}
+
+@-webkit-keyframes bg-zoom-in {
+  0% {
+    filter: blur(0px);
+  }
+  100% {
+    filter: blur(10px);
+  }
+}
+@keyframes bg-zoom-in {
+  0% {
+    filter: blur(0px);
+  }
+  100% {
+    filter: blur(10px);
+  }
+}
+
+@-webkit-keyframes bg-zoom-out {
+  0% {
+    filter: blur(10px);
+  }
+  100% {
+    filter: blur(0px);
+  }
+}
+@keyframes bg-zoom-out {
+  0% {
+    filter: blur(10px);
+  }
+  100% {
+    filter: blur(0px);
+  }
+}
+
+@-webkit-keyframes grid-zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale(1.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes grid-zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale(1.2);
+    filter: blur(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0px);
+  }
+}
+
+@-webkit-keyframes grid-zoom-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.2);
+    filter: blur(10px);
+  }
+}
+@keyframes grid-zoom-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.2);
+    filter: blur(10px);
+  }
+}

static/css/colors.css

@@ -924,10 +924,6 @@ background-color:rgba(255,255,255 , 0.3);
 Zoom: Index of slides
 ============================== */
 
-#webslides-zoomed.grid {
-  background: #e3e5e9;
-}
-
 #webslides-zoomed.grid > .column > .wrap-zoom {
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
 }

static/js/webslides.js

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
  * Version: 1.2.1
- * Date: 2017-04-26
+ * Date: 2017-04-29
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -2723,8 +2723,16 @@ var Zoom = function () {
   }, {
     key: 'zoomIn',
     value: function zoomIn() {
-      this.ws_.disable();
+      var _this3 = this;
+
+      this.ws_.el.classList.add('zooming', 'in');
+      this.zws_.el.classList.add('zooming', 'in');
       __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.zws_.el);
+      setTimeout(function () {
+        _this3.ws_.el.classList.remove('zooming', 'in');
+        _this3.zws_.el.classList.remove('zooming', 'in');
+        _this3.ws_.disable();
+      }, 400);
       this.isZoomed_ = true;
       document.body.style.overflow = 'auto';
     }
@@ -2736,8 +2744,16 @@ var Zoom = function () {
   }, {
     key: 'zoomOut',
     value: function zoomOut() {
-      __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.zws_.el);
-      this.ws_.enable();
+      var _this4 = this;
+
+      this.ws_.el.classList.add('zooming', 'out');
+      this.zws_.el.classList.add('zooming', 'out');
+      setTimeout(function () {
+        _this4.ws_.el.classList.remove('zooming', 'out');
+        _this4.zws_.el.classList.remove('zooming', 'out');
+        __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(_this4.zws_.el);
+        _this4.ws_.enable();
+      }, 400);
       this.isZoomed_ = false;
       document.body.style.overflow = '';
     }
@@ -2750,14 +2766,14 @@ var Zoom = function () {
   }, {
     key: 'onWindowResize',
     value: function onWindowResize(ev) {
-      var _this3 = this;
+      var _this5 = this;
 
       if (this.isZoomed_) this.zoomOut();
 
       this.zws_.slides.forEach(function (elem) {
         var wrap = elem.el.parentElement;
         var div = wrap.parentElement;
-        _this3.setSizes_(div, wrap, elem);
+        _this5.setSizes_(div, wrap, elem);
       });
     }
   }]);