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() {
-    DOM.hide(this.zws_.el);
+    this.ws_.el.classList.add('zooming', 'out');
-    this.ws_.enable();
+    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

@@ -39,7 +39,7 @@ WebSlides - Colors
 Base
 =========================================== */
 
-body, 
+body,
 /*index of slides: mini-slides same bg color as body */
 #webslides-zoomed.grid > .column > .wrap-zoom {
   color: #333;
@@ -379,7 +379,7 @@ nav li.email a:hover {
 }
 
 /*=========================================
-Features & Clients List 
+Features & Clients List
 =========================================== */
 
 .features li,.clients li  {
@@ -415,7 +415,7 @@ box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08);
 }
 
 /*===========================================
-flexblock.steps 
+flexblock.steps
 ============================================= */
 
 .steps li:nth-child(1) {
@@ -708,7 +708,7 @@ background-color: rgba(0, 20, 80, 0.06);
     border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
     -webkit-border-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
     -moz-border-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
-    
+
   }
 }
 
@@ -742,7 +742,7 @@ tr:nth-child(even)>td:hover {
 
 
 /*============================
-Browser (Screenshots) 
+Browser (Screenshots)
 ============================== */
 
 .browser {
@@ -802,7 +802,7 @@ button[type="submit"],
 input[type="submit"],
 .button,.button:hover,
 button[type="submit"]:hover,
-input[type="submit"]:hover 
+input[type="submit"]:hover
 {
   border: 1px solid #44d;
 }
@@ -823,7 +823,7 @@ background-color: #17d;
 .bg-primary .button,
 .bg-primary button,.bg-primary button:hover,
 .bg-primary input,
-[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost 
+[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost
 {
   border-color: #fff;
 }
@@ -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);
+      var _this4 = this;
-      this.ws_.enable();
+
+      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);
       });
     }
   }]);