Switch to VelocityJS for view transitions, slow down some transitions

assets/css/src/box.styl

@@ -43,7 +43,7 @@
     bottom: 0
     background-color: rgba(255, 255, 255, 0.0)
     opacity: 0
-    transition: all 200ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
+    transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
 
     &:hover
       background-color: rgba(255, 255, 255, 0.7)

assets/css/src/modal.styl

@@ -90,7 +90,7 @@ body.mailpoet_modal_opened
   padding: 0
   margin: 0
   width: 100%
-  transition: margin 0.3s ease-out
+  transition: margin 250ms ease-out
 
 .mailpoet_panel_wrapper
   background-color: #f1f1f1
@@ -200,4 +200,4 @@ body.mailpoet_modal_opened
   0%
   50%
     background-color: #064E6D
-  100%
+  100%

assets/css/src/newsletter_editor/components/sidebar.styl

@@ -31,8 +31,8 @@ $widget-icon-width = 30px
       margin-top: 0
 
   .mailpoet_region_content
-    max-height: 2000px
+    max-height: 100%
-    transition: max-height 300ms ease
+    transition: max-height 350ms ease
     padding: 0 20px
     margin-top: 12px
 

assets/js/src/newsletter_editor/blocks/base.js

@@ -11,8 +11,9 @@ define([
     'underscore',
     'jquery',
     'mailpoet',
-    'modal'
+    'modal',
-  ], function(App, Marionette, SuperModel, _, jQuery, MailPoet, Modal) {
+    'velocity-animate'
+  ], function(App, Marionette, SuperModel, _, jQuery, MailPoet, Modal, Velocity) {
 
   "use strict";
 
@@ -128,24 +129,37 @@ define([
       }
     },
     deleteBlock: function() {
-      this.transitionOut().done(function() {
+      this.transitionOut().then(function() {
         this.model.destroy();
       }.bind(this));
     },
     transitionIn: function() {
-      return this._transition('mailpoet_block_transition_in');
+      return this._transition('slideDown', 'fadeIn', 'easeIn');
     },
     transitionOut: function() {
-      return this._transition('mailpoet_block_transition_out');
+      return this._transition('slideUp', 'fadeOut', 'easeOut');
     },
-    _transition: function(className) {
+    _transition: function(slideDirection, fadeDirection, easing) {
       var promise = jQuery.Deferred();
 
-      this.$el.addClass(className);
+      this.$el.velocity(
-      this.$el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd animationend', function() {
+        slideDirection,
-        this.$el.removeClass(className);
+        {
-        promise.resolve();
+          duration: 250,
-      }.bind(this));
+          easing: easing,
+          complete: function() {
+            promise.resolve();
+          }.bind(this),
+        }
+      ).velocity(
+        fadeDirection,
+        {
+          duration: 250,
+          easing: easing,
+          queue: false, // Do not enqueue, trigger animation in parallel
+        }
+      );
+
       return promise;
     },
   });

assets/js/src/newsletter_editor/blocks/container.js

@@ -248,20 +248,32 @@ define([
       }.bind(this));
     },
     transitionIn: function() {
-      return this._transition('mailpoet_block_transition_in');
+      return this._transition('slideDown', 'fadeIn', 'easeIn');
     },
     transitionOut: function() {
-      return this._transition('mailpoet_block_transition_out');
+      return this._transition('slideUp', 'fadeOut', 'easeOut');
     },
-    _transition: function(className) {
+    _transition: function(slideDirection, fadeDirection, easing) {
-      var that = this,
+      var promise = jQuery.Deferred();
-          promise = jQuery.Deferred();
+
+      this.$el.velocity(
+        slideDirection,
+        {
+          duration: 250,
+          easing: easing,
+          complete: function() {
+            promise.resolve();
+          }.bind(this),
+        }
+      ).velocity(
+        fadeDirection,
+        {
+          duration: 250,
+          easing: easing,
+          queue: false, // Do not enqueue, trigger animation in parallel
+        }
+      );
 
-      this.$el.addClass(className);
-      this.$el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd animationend', function() {
-        that.$el.removeClass(className);
-        promise.resolve();
-      });
       return promise;
     },
   });

assets/js/src/newsletter_editor/blocks/social.js

@@ -208,20 +208,32 @@ define([
       }.bind(this));
     },
     transitionIn: function() {
-      return this._transition('mailpoet_block_transition_in');
+      return this._transition('slideDown', 'fadeIn', 'easeIn');
     },
     transitionOut: function() {
-      return this._transition('mailpoet_block_transition_out');
+      return this._transition('slideUp', 'fadeOut', 'easeOut');
     },
-    _transition: function(className) {
+    _transition: function(slideDirection, fadeDirection, easing) {
-      var that = this,
+      var promise = jQuery.Deferred();
-          promise = jQuery.Deferred();
+
+      this.$el.velocity(
+        slideDirection,
+        {
+          duration: 250,
+          easing: easing,
+          complete: function() {
+            promise.resolve();
+          }.bind(this),
+        }
+      ).velocity(
+        fadeDirection,
+        {
+          duration: 250,
+          easing: easing,
+          queue: false, // Do not enqueue, trigger animation in parallel
+        }
+      );
 
-      this.$el.addClass(className);
-      this.$el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd animationend', function() {
-        that.$el.removeClass(className);
-        promise.resolve();
-      });
       return promise;
     },
   });

package.json

@@ -34,7 +34,8 @@
     "select2": "^4.0.0",
     "spectrum-colorpicker": "^1.6.2",
     "tinymce": "4.1.10",
-    "underscore": "1.8.3"
+    "underscore": "1.8.3",
+    "velocity-animate": "1.2.3"
   },
   "devDependencies": {
     "expose-loader": "latest",

webpack.config.js

@@ -77,7 +77,11 @@ baseConfig = {
       {
         include: /html2canvas.js$/,
         loader: 'expose-loader?html2canvas',
-      }
+      },
+      {
+        include: require.resolve('velocity-animate'),
+        loader: 'imports-loader?jQuery=jquery',
+      },
     ]
   }
 };
@@ -123,6 +127,7 @@ config.push(_.extend({}, baseConfig, {
       'sticky-kit',
       'blob',
       'filesaver',
+      'velocity-animate',
 
       'newsletter_editor/communicationsFix.js',
       'newsletter_editor/App',