diff --git a/example.html b/example.html
index 90d88e2..63fef8b 100644
--- a/example.html
+++ b/example.html
@@ -61,16 +61,18 @@ <h3>Oh, no! Daddy keeps disappearing.</h3>
         </div>
 
         <script type="text/javascript" src="splitpic.js" ></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
         <script type="text/javascript">
-            $(function () {
-                $('.splitpic-horizontal .splitpic-images').each(function (i, v) {
-                    var sp = new SplitPic(v);
-                });
-                $('.splitpic-vertical .splitpic-images').each(function (i, v) {
-                    var sp = new SplitPicVertical(v);
-                });
-            });
+        NodeList.prototype.forEach = Array.prototype.forEach;
+            (function() {
+                var horizontal = document.querySelectorAll('.splitpic-horizontal .splitpic-images');
+                for (var i = 0; i < horizontal.length; ++i) {
+                    var sp = new SplitPic(horizontal[i]);
+                }
+                var vertical = document.querySelectorAll('.splitpic-vertical .splitpic-images');
+                for (var i = 0; i < vertical.length; ++i) {
+                    var sp = new SplitPicVertical(vertical[i]);
+                }
+            })();
         </script>
     </body>
 </html>
diff --git a/splitpic.css b/splitpic.css
index 8167474..f69b3c6 100644
--- a/splitpic.css
+++ b/splitpic.css
@@ -1,6 +1,6 @@
 .splitpic .splitpic-images {
-        position: relative;
-        overflow: hidden;
+    position: relative;
+    overflow: hidden;
 }
 
 .splitpic-image {
@@ -24,6 +24,11 @@
     position: absolute;
     text-align: center;
     background-color: rgba(0, 0, 0, 0.50);
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+    -o-transition: all .2s ease-out;
+    -ms-transition: all .2s ease-out;
+    transition: all .2s ease-out;
 }
 .splitpic-bar {
     position: absolute;
diff --git a/splitpic.js b/splitpic.js
index babf784..fe60610 100644
--- a/splitpic.js
+++ b/splitpic.js
@@ -1,38 +1,33 @@
 (function (window) {
 
 function SplitPic(element) {
-    var el = $(element);
-    var leftPane = $('.splitpic-left-image', el);
-    var rightPane = $('.splitpic-right-image', el);
-    var bar = $('.splitpic-bar', el);
+    var leftPane = element.querySelector('.splitpic-left-image');
+    var bar = element.querySelector('.splitpic-bar');
     var infoHidden = false;
     // split the image at the cursor
     function updateSplit(x, isRelative) {
         var relativeX;
         if (!isRelative) {
-            var elOffset = el.offset();
-            relativeX = x - elOffset.left;
+            relativeX = x - element.offsetLeft;
         } else {
             relativeX = x;
         }
-        leftPane.css(
-            'clip', 'rect(0px, ' + relativeX + 'px, auto, 0px)'
-        );
-        bar.css('left',  relativeX - bar.width() / 2 + 'px');
+        leftPane.style.clipPath = 'rect(0px, ' + relativeX + 'px, auto, 0px)';
+        bar.style.left = relativeX + 'px';
     };
     // how much of the left image should we show at start? 50% if not specified
-    var startPercentage = parseInt(el.attr('data-start-percent'));
+    var startPercentage = parseInt(element.getAttribute('data-start-percent'));
     if (isNaN(startPercentage)) {
         startPercentage = 50;
     }
     startPercentage /= 100;
-    updateSplit(el.width() * startPercentage, true);
+    updateSplit(element.width * startPercentage, true);
     var isMoving = false;
     var lastX = 0,
         lastY = 0;
-    el.on('touchmove touchstart', function (event) {
+    element.addEventListener('touchmove', function (event) {
         if (!infoHidden) {
-            $('.splitpic-info', el).fadeOut(200);
+            element.querySelector('.splitpic-info').style.opacity = 0;
             infoHidden = true;
         }
         var touches;
@@ -60,65 +55,58 @@ function SplitPic(element) {
             lastY = touch.pageY;
         }
     });
-    el.on('touchend', function (event) {
+    element.addEventListener('touchend', function (event) {
         isMoving = false;
     });
-    el.on('mouseenter mousemove mouseleave', function (event) {
+    element.addEventListener('mousemove', function (event) {
         if (!infoHidden) {
-            $('.splitpic-info', el).fadeOut(200);
+            element.querySelector('.splitpic-info').style.opacity = 0;
             infoHidden = true;
         }
         updateSplit(event.pageX);
     });
-    
+
 };
 
 window.SplitPic = SplitPic;
 
 
 function SplitPicVertical(element) {
-    var el = $(element);
-    var overPane = $('.splitpic-left-image', el);
-    var underPane = $('.splitpic-right-image', el);
-    var bar = $('.splitpic-bar', el);
+    var overPane = element.querySelector('.splitpic-left-image');
+    var bar = element.querySelector('.splitpic-bar');
     var infoHidden = false;
     // split the image at the cursor
     function updateSplit(y, isRelative) {
         var relativeY;
         if (!isRelative) {
-            var elOffset = el.offset();
-            relativeY = y - elOffset.top;
+            relativeY = y - element.offsetTop;
         } else {
             relativeY = y;
         }
-        overPane.css(
-            'clip', 'rect(' + relativeY + 'px, auto, auto, 0px)'
-        );
-        bar.css('top',  relativeY - bar.height() / 2 + 'px');
+        overPane.style.clipPath = 'rect(' + relativeY + 'px, auto, auto, 0px)';
+        bar.style.top =  relativeY + 'px';
     };
     // this is necessary since we're using original crops and therefore the
     // image height won't be known until it's loaded.
     function setInitialPosition() {
         // how much of the left image should we show at start? 50% if not specified
-        var startPercentage = parseInt(el.attr('data-start-percent'));
+        var startPercentage = parseInt(element.getAttribute('data-start-percent'));
         if (isNaN(startPercentage)) {
             startPercentage = 50;
         }
         startPercentage /= 100;
-        updateSplit(el.height() * startPercentage, true);
+        updateSplit(element.clientHeight * startPercentage, true);
     }
-    var img = $('.splitpic-left-image img', element);
-    if (img[0].complete) {
+    var img = element.querySelector('.splitpic-left-image img');
+    img.addEventListener('load',function(){
         setInitialPosition();
-    } else {
-        img.load(setInitialPosition.bind(this));
-    }
+    });
     var isMoving = false;
     var lastX = 0,
         lastY = 0;
-    el.on('touchmove touchstart', function (event) {
+    element.addEventListener('touchmove', function (event) {
         if (!infoHidden) {
-            $('.splitpic-info', el).fadeOut(200);
+            element.querySelector('.splitpic-info').style.opacity = 0;
             infoHidden = true;
         }
         var touches;
@@ -148,17 +136,17 @@ function SplitPicVertical(element) {
             lastY = touch.pageY;
         }
     });
-    el.on('touchend', function (event) {
+    element.addEventListener('touchend', function (event) {
         isMoving = false;
     });
-    el.on('mouseenter mousemove mouseleave', function (event) {
+    element.addEventListener('mousemove', function (event) {
         if (!infoHidden) {
-            $('.splitpic-info', el).fadeOut(200);
+            element.querySelector('.splitpic-info').style.opacity = 0;
             infoHidden = true;
         }
         updateSplit(event.pageY);
     });
-    
+
 };
 
 window.SplitPic = SplitPic;