Adding the animation to the toggle. added a stupid important tag that will need to be fixed.

dist/ratchet.css

@@ -1016,8 +1016,8 @@ input[type="button"] {
   box-shadow: inset 0 0 0 0 #e1e1e1;
   -webkit-transition-property: box-shadow, border;
   transition-property: box-shadow, border;
-  -webkit-transition-duration: 0.4s;
-  transition-duration: 0.4s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
 }
 .toggle .toggle-handle {
   position: absolute;
@@ -1031,10 +1031,10 @@ input[type="button"] {
   border-radius: 100px;
   -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-  -webkit-transition-property: -webkit-transform, border, width, margin;
-  transition-property: -webkit-transform, border, width, margin;
-  -webkit-transition-duration: 0.1s;
-  transition-duration: 0.1s;
+  -webkit-transition-property: -webkit-transform, border, width;
+  transition-property: -webkit-transform, border, width;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
   -webkit-transition-timing-function: ease-in-out;
   transition-timing-function: ease-in-out;
 }
@@ -1052,7 +1052,8 @@ input[type="button"] {
   transform: translate3d(17px, 0, 0);
 }
 .toggle.active .toggle-handle:active {
-  margin-left: -7px;
+  -webkit-transform: translate3d(10px, 0, 0) !important;
+  transform: translate3d(10px, 0, 0) !important;
 }
 
 .content.fade {

dist/ratchet.js

@@ -731,7 +731,7 @@
     var handle      = toggle.querySelector('.toggle-handle');
     var current     = e.touches[0];
     var toggleWidth = toggle.offsetWidth;
-    var handleWidth = handle.offsetWidth;
+    var handleWidth = 28;
     var offset      = (toggleWidth - handleWidth) - 2;
 
     touchMove = true;
@@ -754,7 +754,7 @@
 
     var handle      = toggle.querySelector('.toggle-handle');
     var toggleWidth = toggle.offsetWidth;
-    var handleWidth = handle.offsetWidth;
+    var handleWidth = 28;
     var offset      = (toggleWidth - handleWidth) - 2;
     var slideOn     = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
 

lib/js/toggles.js

@@ -44,7 +44,7 @@
     var handle      = toggle.querySelector('.toggle-handle');
     var current     = e.touches[0];
     var toggleWidth = toggle.offsetWidth;
-    var handleWidth = handle.offsetWidth;
+    var handleWidth = 28;
     var offset      = (toggleWidth - handleWidth) - 2;
 
     touchMove = true;
@@ -67,7 +67,7 @@
 
     var handle      = toggle.querySelector('.toggle-handle');
     var toggleWidth = toggle.offsetWidth;
-    var handleWidth = handle.offsetWidth;
+    var handleWidth = 28;
     var offset      = (toggleWidth - handleWidth) - 2;
     var slideOn     = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
 

lib/sass/toggles.scss

@@ -11,7 +11,7 @@
   border-radius: 20px;
   @include box-shadow(inset 0 0 0 0 #e1e1e1);
   @include transition-property(box-shadow, border);
-  @include transition-duration(.4s);
+  @include transition-duration(.2s);
 
   // Sliding handle
   .toggle-handle {
@@ -25,13 +25,13 @@
     border: 1px solid rgba(0, 0, 0, .2);
     border-radius: 100px;
     @include box-shadow(0 3px 3px rgba(0,0,0,.08));
-    @include transition-property(-webkit-transform, border, width, margin);
-    @include transition-duration(.1s);
+    @include transition-property(-webkit-transform, border, width);
+    @include transition-duration(.2s);
     @include transition-timing-function(ease-in-out);
   }
 
   &:active .toggle-handle {
-      width: 35px;
+    width: 35px;
   }
 
   // Active state for toggle
@@ -46,7 +46,7 @@
     @include transform(translate3d(17px,0,0));
 
     &:active {
-      margin-left: -7px;
+      @include transform(translate3d(10px,0,0) !important);
     }
   }
 }