From 060f01a4b8a445c8da38235c0dcc8f8c5d19fc81 Mon Sep 17 00:00:00 2001
From: Joe Workman <joe@workmanmail.com>
Date: Tue, 10 Jun 2014 19:16:22 -0700
Subject: [PATCH] Orbit is alive!!!!

In Foundation v5.2, Orbit was overhauled to include CSS animations. Everyone has been plagued with issues ever since. This release rolls back Orbit to its former glory.

I also went through all of the commits to Orbit since 5.2 and tried to add all of the bug fixes and features back in. The only known feature that was not added back in was the ability to completely turn off the Orbit timer. The code base was too different to easily merge that feature back in.
---
 doc/pages/components/orbit.html        |  11 +-
 js/foundation/foundation.orbit.js      | 384 ++++++++-----------------
 scss/foundation/_settings.scss         |   4 -
 scss/foundation/components/_orbit.scss | 226 ++++++---------
 4 files changed, 216 insertions(+), 409 deletions(-)

diff --git a/doc/pages/components/orbit.html b/doc/pages/components/orbit.html
index a7eeafaf8..e11a5e943 100644
--- a/doc/pages/components/orbit.html
+++ b/doc/pages/components/orbit.html
@@ -135,6 +135,11 @@ $orbit-slide-number-bg: rgba(0,0,0,0);
 $orbit-slide-number-font-color: #fff;
 $orbit-slide-number-padding: rem-calc(5px);
 
+// Hide controls on small
+$orbit-nav-hide-for-small: true;
+$orbit-bullet-hide-for-small: true;
+$orbit-timer-hide-for-small: true;
+
 // Graceful Loading Wrapper and preloader
 $wrapper-class: "slideshow-wrapper";
 $preloader-class: "preloader";
@@ -192,10 +197,10 @@ $(document).foundation({
       timer_container_class: 'orbit-timer', // Class name given to the timer
       timer_paused_class: 'paused', // Class name given to the paused button
       timer_progress_class: 'orbit-progress', // Class name given to the progress bar
-      timer_show_progress_bar: true, // If the progress bar should get shown (false skips computation)
-      slides_container_class: 'orbit-slides-container', // Class name given to the
-      bullets_container_class: 'orbit-bullets',
+      slides_container_class: 'orbit-slides-container', // Class name given to the slide container
+      preloader_class: 'preloader', // Class given to the perloader
       slide_selector: 'li', // Default is '*' which selects all children under the container
+      bullets_container_class: 'orbit-bullets',
       bullets_active_class: 'active', // Class name given to the active bullet
       slide_number_class: 'orbit-slide-number', // Class name given to the slide number
       caption_class: 'orbit-caption', // Class name given to the caption
diff --git a/js/foundation/foundation.orbit.js b/js/foundation/foundation.orbit.js
index f9aa0366a..52b58ec72 100644
--- a/js/foundation/foundation.orbit.js
+++ b/js/foundation/foundation.orbit.js
@@ -17,16 +17,16 @@
         timer_container,
         idx = 0,
         animate,
-        adjust_height_after = false,
-        has_init_active = slides_container.find("." + settings.active_slide_class).length > 0;
+        timer,
+        locked = false,
+        adjust_height_after = false;
 
-    self.cache = {};
 
     self.slides = function() {
       return slides_container.children(settings.slide_selector);
     };
 
-    if (!has_init_active) {self.slides().first().addClass(settings.active_slide_class)};
+    self.slides().first().addClass(settings.active_slide_class);
 
     self.update_slide_number = function(index) {
       if (settings.slide_number) {
@@ -40,7 +40,7 @@
     };
 
     self.update_active_link = function(index) {
-      var link = $('[data-orbit-link="'+self.slides().eq(index).attr('data-orbit-slide')+'"]');
+      var link = $('a[data-orbit-link="'+self.slides().eq(index).attr('data-orbit-slide')+'"]');
       link.siblings().removeClass(settings.bullets_active_class);
       link.addClass(settings.bullets_active_class);
     };
@@ -49,7 +49,6 @@
       slides_container.wrap('<div class="'+settings.container_class+'"></div>');
       container = slides_container.parent();
       slides_container.addClass(settings.slides_container_class);
-      slides_container.addClass(settings.animation);
       
       if (settings.stack_on_small) {
         container.addClass(settings.stack_on_small_class);
@@ -63,9 +62,7 @@
       if (settings.timer) {
         timer_container = $('<div>').addClass(settings.timer_container_class);
         timer_container.append('<span>');
-        if (settings.timer_show_progress_bar) {
-            timer_container.append($('<div>').addClass(settings.timer_progress_class));
-        }
+        timer_container.append($('<div>').addClass(settings.timer_progress_class));
         timer_container.addClass(settings.timer_paused_class);
         container.append(timer_container);
       }
@@ -81,27 +78,22 @@
         container.append(bullets_container);
         bullets_container.wrap('<div class="orbit-bullets-container"></div>');
         self.slides().each(function(idx, el) {
-          var bullet = $('<li>').attr('data-orbit-slide', idx)
-            .on('click', self.link_bullet);
+          var bullet = $('<li>').attr('data-orbit-slide', idx).on('click', self.link_bullet);;
           bullets_container.append(bullet);
         });
       }
 
     };
 
-    self._prepare_direction = function(next_idx, current_direction) {
-      var dir = 'next';
-      if (next_idx <= idx) { dir = 'prev'; }
-      
-      if (settings.animation === 'slide') {    
-        setTimeout(function(){
-          slides_container.removeClass("swipe-prev swipe-next");
-          if (dir === 'next') {slides_container.addClass("swipe-next");}
-          else if (dir === 'prev') {slides_container.addClass("swipe-prev");}
-        },0);
-      }
-      
+    self._goto = function(next_idx, start_timer) {
+      // if (locked) {return false;}
+      if (next_idx === idx) {return false;}
+      if (typeof timer === 'object') {timer.restart();}
       var slides = self.slides();
+
+      var dir = 'next';
+      locked = true;
+      if (next_idx < idx) {dir = 'prev';}
       if (next_idx >= slides.length) {
         if (!settings.circular) return false;
         next_idx = 0;
@@ -109,53 +101,29 @@
         if (!settings.circular) return false;
         next_idx = slides.length - 1;
       }
-      var current = $(slides.get(idx))
-        , next = $(slides.get(next_idx));
-      
-      return [dir, current, next, next_idx];
-    };
-
-    self._goto = function(next_idx, start_timer) {
-      if (next_idx === null) {return false;}
-      if (self.cache.animating) {return false;}
-      if (next_idx === idx) {return false;}
-      if (typeof self.cache.timer === 'object') {self.cache.timer.restart();}
       
-      var slides = self.slides();
-      self.cache.animating = true;
-      var res = self._prepare_direction(next_idx)
-        , dir = res[0]
-        , current = res[1]
-        , next = res[2]
-        , next_idx = res[3];
+      var current = $(slides.get(idx));
+      var next = $(slides.get(next_idx));
 
-      // This means that circular is disabled and we most likely reached the last slide.
-      if (res === false) return false;
+      current.css('zIndex', 2);
+      current.removeClass(settings.active_slide_class);
+      next.css('zIndex', 4).addClass(settings.active_slide_class);
 
       slides_container.trigger('before-slide-change.fndtn.orbit');
       settings.before_slide_change();
-      idx = next_idx;
-
-      current.css("transitionDuration", settings.animation_speed+"ms");
-      next.css("transitionDuration", settings.animation_speed+"ms");
+      self.update_active_link(next_idx);
       
       var callback = function() {
         var unlock = function() {
-          if (start_timer === true) {self.cache.timer.restart();}
+          idx = next_idx;
+          locked = false;
+          if (start_timer === true) {timer = self.create_timer(); timer.start();}
           self.update_slide_number(idx);
-          // Remove "animate-in" class as late as possible to avoid "flickering" (especially with variable_height).
-          next.removeClass("animate-in");
-          next.addClass(settings.active_slide_class);
-          self.update_active_link(next_idx);
           slides_container.trigger('after-slide-change.fndtn.orbit',[{slide_number: idx, total_slides: slides.length}]);
           settings.after_slide_change(idx, slides.length);
-          setTimeout(function(){
-            self.cache.animating = false;
-          }, 100);
-          
         };
         if (slides_container.height() != next.height() && settings.variable_height) {
-          slides_container.animate({'min-height': next.height()}, 250, 'linear', unlock);
+          slides_container.animate({'height': next.height()}, 250, 'linear', unlock);
         } else {
           unlock();
         }
@@ -169,7 +137,7 @@
       };
 
       if (next.height() > slides_container.height() && settings.variable_height) {
-        slides_container.animate({'min-height': next.height()}, 250, 'linear', start_animation);
+        slides_container.animate({'height': next.height()}, 250, 'linear', start_animation);
       } else {
         start_animation();
       }
@@ -178,19 +146,13 @@
     self.next = function(e) {
       e.stopImmediatePropagation();
       e.preventDefault();
-      self._prepare_direction(idx + 1);
-      setTimeout(function(){
-        self._goto(idx + 1);
-    }, 100);
+      self._goto(idx + 1);
     };
     
     self.prev = function(e) {
       e.stopImmediatePropagation();
       e.preventDefault();
-      self._prepare_direction(idx - 1);
-      setTimeout(function(){
-        self._goto(idx - 1)
-      }, 100);
+      self._goto(idx - 1);
     };
 
     self.link_custom = function(e) {
@@ -198,38 +160,24 @@
       var link = $(this).attr('data-orbit-link');
       if ((typeof link === 'string') && (link = $.trim(link)) != "") {
         var slide = container.find('[data-orbit-slide='+link+']');
-        if (slide.index() != -1) {
-          setTimeout(function(){
-            self._goto(slide.index());
-          },100);
-        }
+        if (slide.index() != -1) {self._goto(slide.index());}
       }
     };
 
-    // Click handler for slides and bullets.
     self.link_bullet = function(e) {    
       var index = $(this).attr('data-orbit-slide');
       if ((typeof index === 'string') && (index = $.trim(index)) != "") {
         if(isNaN(parseInt(index)))
         {
           var slide = container.find('[data-orbit-slide='+index+']');
-          if (slide.index() != -1) {
-            index = slide.index() + 1;
-            self._prepare_direction(index);
-            setTimeout(function(){
-              self._goto(index);
-            },100);
-          }
+          if (slide.index() != -1) {self._goto(slide.index() + 1);}
         }
         else
         {
-          index = parseInt(index);
-          self._prepare_direction(index);
-          setTimeout(function(){
-            self._goto(index);
-          },100);
+          self._goto(parseInt(index));
         }
       }
+
     }
 
     self.timer_callback = function() {
@@ -244,7 +192,7 @@
           if ($(this).height() > h) { h = $(this).height(); }
         });
       }
-      slides_container.css('minHeight', String(h)+'px');
+      slides_container.height(h);
     };
 
     self.create_timer = function() {
@@ -257,39 +205,29 @@
     };
 
     self.stop_timer = function() {
-      if (typeof self.cache.timer === 'object') self.cache.timer.stop();
+      if (typeof timer === 'object') timer.stop();
     };
 
     self.toggle_timer = function() {
       var t = container.find('.'+settings.timer_container_class);
       if (t.hasClass(settings.timer_paused_class)) {
-        if (typeof self.cache.timer === 'undefined') {self.cache.timer = self.create_timer();}
-        self.cache.timer.start();     
+        if (typeof timer === 'undefined') {timer = self.create_timer();}
+        timer.start();     
       }
       else {
-        if (typeof self.cache.timer === 'object') {self.cache.timer.stop();}
+        if (typeof timer === 'object') {timer.stop();}
       }
     };
 
     self.init = function() {
       self.build_markup();
       if (settings.timer) {
-        self.cache.timer = self.create_timer(); 
-        Foundation.utils.image_loaded(this.slides().find('img'), self.cache.timer.start);
-      }
-      
-      animate = new CSSAnimation(settings, slides_container);
-
-      if (has_init_active) {
-        var $init_target = slides_container.find("." + settings.active_slide_class),
-            animation_speed = settings.animation_speed;
-        settings.animation_speed = 1;
-        if (idx != $init_target.index()) {
-            $init_target.removeClass('active');
-            self._goto($init_target.index());
-        }
-        settings.animation_speed = animation_speed;
+        timer = self.create_timer(); 
+        Foundation.utils.image_loaded(this.slides().children('img'), timer.start);
       }
+      animate = new FadeAnimation(settings, slides_container);
+      if (settings.animation === 'slide') 
+        animate = new SlideAnimation(settings, slides_container);        
 
       container.on('click', '.'+settings.next_class, self.next);
       container.on('click', '.'+settings.prev_class, self.prev);
@@ -297,76 +235,46 @@
       if (settings.next_on_click) {
         container.on('click', '.'+settings.slides_container_class+' [data-orbit-slide]', self.link_bullet);
       }
-      
+
       container.on('click', self.toggle_timer);
       if (settings.swipe) {
-        slides_container.on('touchstart.fndtn.orbit',function(e) {
-          if (self.cache.animating) {return;}
+        container.on('touchstart.fndtn.orbit', function(e) {
           if (!e.touches) {e = e.originalEvent;}
-          e.preventDefault();
+          var data = {
+            start_page_x: e.touches[0].pageX,
+            start_page_y: e.touches[0].pageY,
+            start_time: (new Date()).getTime(),
+            delta_x: 0,
+            is_scrolling: undefined
+          };
+          container.data('swipe-transition', data);
           e.stopPropagation();
-
-          self.cache.start_page_x = e.touches[0].pageX;
-          self.cache.start_page_y = e.touches[0].pageY;
-          self.cache.start_time = (new Date()).getTime();
-          self.cache.delta_x = 0;
-          self.cache.is_scrolling = null;
-          self.cache.direction = null;
-          
-          self.stop_timer(); // does not appear to prevent callback from occurring          
         })
-        .on('touchmove.fndtn.orbit',function(e) {
-          if (Math.abs(self.cache.delta_x) > 5) {
-            e.preventDefault();
-            e.stopPropagation();
+        .on('touchmove.fndtn.orbit', function(e) {
+          if (!e.touches) { e = e.originalEvent; }
+          // Ignore pinch/zoom events
+          if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
+
+          var data = container.data('swipe-transition');
+          if (typeof data === 'undefined') {data = {};}
+
+          data.delta_x = e.touches[0].pageX - data.start_page_x;
+
+          if ( typeof data.is_scrolling === 'undefined') {
+            data.is_scrolling = !!( data.is_scrolling || Math.abs(data.delta_x) < Math.abs(e.touches[0].pageY - data.start_page_y) );
           }
 
-          if (self.cache.animating) {return;}          
-          requestAnimationFrame(function(){
-            if (!e.touches) { e = e.originalEvent; }
-
-            // Ignore pinch/zoom events
-            if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
-
-            self.cache.delta_x = e.touches[0].pageX - self.cache.start_page_x;
-
-            if (self.cache.is_scrolling === null) {
-              self.cache.is_scrolling = !!( self.cache.is_scrolling || Math.abs(self.cache.delta_x) < Math.abs(e.touches[0].pageY - self.cache.start_page_y) );
-            }
-
-            if (self.cache.is_scrolling) {
-              return;
-            }
-            
-            var direction = (self.cache.delta_x < 0) ? (idx+1) : (idx-1);
-            if (self.cache.direction !== direction) {
-              var res = self._prepare_direction(direction);
-              self.cache.direction = direction;
-              self.cache.dir = res[0];
-              self.cache.current = res[1];
-              self.cache.next = res[2];
-            }
-
-            if (settings.animation === 'slide') {
-              var offset, next_offset;
-              
-              offset = (self.cache.delta_x / container.width()) * 100;
-              if (offset >= 0) {next_offset = -(100 - offset);}
-              else {next_offset = 100 + offset;}
-
-              self.cache.current.css("transform","translate3d("+offset+"%,0,0)");
-              self.cache.next.css("transform","translate3d("+next_offset+"%,0,0)");
-            }
-          });
+          if (!data.is_scrolling && !data.active) {
+            e.preventDefault();
+            var direction = (data.delta_x < 0) ? (idx+1) : (idx-1);
+            data.active = true;
+            self._goto(direction);
+          }
         })
         .on('touchend.fndtn.orbit', function(e) {
-          if (self.cache.animating) {return;}
-          e.preventDefault();
+          container.data('swipe-transition', {});
           e.stopPropagation();
-          setTimeout(function(){
-            self._goto(self.cache.direction);
-          }, 50);
-        });
+        })
       }
       container.on('mouseenter.fndtn.orbit', function(e) {
         if (settings.timer && settings.pause_on_hover) {
@@ -375,18 +283,17 @@
       })
       .on('mouseleave.fndtn.orbit', function(e) {
         if (settings.timer && settings.resume_on_mouseout) {
-          self.cache.timer.start();
+          timer.start();
         }
       });
       
       $(document).on('click', '[data-orbit-link]', self.link_custom);
       $(window).on('load resize', self.compute_dimensions);
-      var children = this.slides().find('img');
-      Foundation.utils.image_loaded(children, self.compute_dimensions);
-      Foundation.utils.image_loaded(children, function() {
+      Foundation.utils.image_loaded(this.slides().children('img'), self.compute_dimensions);
+      Foundation.utils.image_loaded(this.slides().children('img'), function() {
         container.prev('.'+settings.preloader_class).css('display', 'none');
-        self.update_slide_number(idx);
-        self.update_active_link(idx);
+        self.update_slide_number(0);
+        self.update_active_link(0);
         slides_container.trigger('ready.fndtn.orbit');
       });
     };
@@ -398,7 +305,6 @@
     var self = this,
         duration = settings.timer_speed,
         progress = el.find('.'+settings.timer_progress_class),
-        do_progress = progress && progress.css('display') != 'none',
         start, 
         timeout,
         left = -1;
@@ -415,18 +321,15 @@
       clearTimeout(timeout);
       el.addClass(settings.timer_paused_class);
       left = -1;
-      if (do_progress) {self.update_progress(0);}
-      self.start();
+      self.update_progress(0);
     };
 
     this.start = function() {
       if (!el.hasClass(settings.timer_paused_class)) {return true;}
       left = (left === -1) ? duration : left;
       el.removeClass(settings.timer_paused_class);
-      if (do_progress) {
-          start = new Date().getTime();
-          progress.animate({'width': '100%'}, left, 'linear');
-      }
+      start = new Date().getTime();
+      progress.animate({'width': '100%'}, left, 'linear');
       timeout = setTimeout(function() {
         self.restart();
         callback();
@@ -438,99 +341,58 @@
       if (el.hasClass(settings.timer_paused_class)) {return true;}
       clearTimeout(timeout);
       el.addClass(settings.timer_paused_class);
-      if (do_progress) {
-          var end = new Date().getTime();
-          left = left - (end - start);
-          var w = 100 - ((left / duration) * 100);
-          self.update_progress(w);
-      }
+      var end = new Date().getTime();
+      left = left - (end - start);
+      var w = 100 - ((left / duration) * 100);
+      self.update_progress(w);
       el.trigger('timer-stopped.fndtn.orbit');
     };
   };
+  
+  var SlideAnimation = function(settings, container) {
+    var duration = settings.animation_speed;
+    var is_rtl = ($('html[dir=rtl]').length === 1);
+    var margin = is_rtl ? 'marginRight' : 'marginLeft';
+    var animMargin = {};
+    animMargin[margin] = '0%';
 
-  var CSSAnimation = function(settings, container) {
-    var animation_end = "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend";
+    this.next = function(current, next, callback) {
+      current.animate({marginLeft:'-100%'}, duration);
+      next.animate(animMargin, duration, function() {
+        current.css(margin, '100%');
+        callback();
+      });
+    };
+
+    this.prev = function(current, prev, callback) {
+      current.animate({marginLeft:'100%'}, duration);
+      prev.css(margin, '-100%');
+      prev.animate(animMargin, duration, function() {
+        current.css(margin, '100%');
+        callback();
+      });
+    };
+  };
+
+  var FadeAnimation = function(settings, container) {
+    var duration = settings.animation_speed;
+    var is_rtl = ($('html[dir=rtl]').length === 1);
+    var margin = is_rtl ? 'marginRight' : 'marginLeft';
 
     this.next = function(current, next, callback) {
-      if (Modernizr.csstransitions) {
-        next.on(animation_end, function(e){
-          next.unbind(animation_end);
-          current.removeClass("active animate-out");
-          container.children().css({
-            "transform":"",
-            "-ms-transform":"",
-            "-webkit-transition-duration":"",
-            "-moz-transition-duration": "",
-            "-o-transition-duration": "",
-            "transition-duration":""
-          });
-          callback();
-        });
-      } else {
-        setTimeout(function(){
-          current.removeClass("active animate-out");
-          container.children().css({
-            "transform":"",
-            "-ms-transform":"",
-            "-webkit-transition-duration":"",
-            "-moz-transition-duration": "",
-            "-o-transition-duration": "",
-            "transition-duration":""
-          });
-          callback();
-        }, settings.animation_speed);
-      }
-      container.children().css({
-        "transform":"",
-        "-ms-transform":"",
-        "-webkit-transition-duration":"",
-        "-moz-transition-duration": "",
-        "-o-transition-duration": "",
-        "transition-duration":""
+      next.css({'margin':'0%', 'opacity':'0.01'});
+      next.animate({'opacity':'1'}, duration, 'linear', function() {
+        current.css('margin', '100%');
+        callback();
       });
-      current.addClass("animate-out");
-      next.addClass("animate-in");
     };
 
     this.prev = function(current, prev, callback) {
-      if (Modernizr.csstransitions) {
-        prev.on(animation_end, function(e){
-          prev.unbind(animation_end);
-          current.removeClass("active animate-out");
-          container.children().css({
-            "transform":"",
-            "-ms-transform":"",
-            "-webkit-transition-duration":"",
-            "-moz-transition-duration": "",
-            "-o-transition-duration": "",
-            "transition-duration":""
-          });
-          callback();
-        });
-      } else {
-        setTimeout(function(){
-          current.removeClass("active animate-out");
-          container.children().css({
-            "transform":"",
-            "-ms-transform":"",
-            "-webkit-transition-duration":"",
-            "-moz-transition-duration": "",
-            "-o-transition-duration": "",
-            "transition-duration":""
-          });
-          callback();
-        }, settings.animation_speed);
-      }
-      container.children().css({
-        "transform":"",
-        "-ms-transform":"",
-        "-webkit-transition-duration":"",
-        "-moz-transition-duration": "",
-        "-o-transition-duration": "",
-        "transition-duration":""
+      prev.css({'margin':'0%', 'opacity':'0.01'});
+      prev.animate({'opacity':'1'}, duration, 'linear', function() {
+        current.css('margin', '100%');
+        callback();
       });
-      current.addClass("animate-out");
-      prev.addClass("animate-in");
     };
   };
 
@@ -540,7 +402,7 @@
   Foundation.libs.orbit = {
     name: 'orbit',
 
-    version: '5.2.3',
+    version: '5.1.1',
 
     settings: {
       animation: 'slide',
@@ -560,7 +422,6 @@
       timer_container_class: 'orbit-timer',
       timer_paused_class: 'paused',
       timer_progress_class: 'orbit-progress',
-      timer_show_progress_bar: true,
       slides_container_class: 'orbit-slides-container',
       preloader_class: 'preloader',
       slide_selector: '*',
@@ -585,7 +446,6 @@
     },
 
     events : function (instance) {
-      var self = this;
       var orbit_instance = new Orbit(this.S(instance), this.S(instance).data('orbit-init'));
       this.S(instance).data(self.name + '-instance', orbit_instance);
     },
diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index 70924a2d8..4a2b458d5 100644
--- a/scss/foundation/_settings.scss
+++ b/scss/foundation/_settings.scss
@@ -767,10 +767,6 @@
 // $orbit-slide-number-font-color: #fff;
 // $orbit-slide-number-padding: rem-calc(5);
 
-// We use these to controls the css animation
-// $orbit-animation-speed: 500ms;
-// $orbit-animation-ease: ease-in-out;
-
 // Hide controls on small
 // $orbit-nav-hide-for-small: true;
 // $orbit-bullet-hide-for-small: true;
diff --git a/scss/foundation/components/_orbit.scss b/scss/foundation/components/_orbit.scss
index 0054e1700..b9e01c683 100644
--- a/scss/foundation/components/_orbit.scss
+++ b/scss/foundation/components/_orbit.scss
@@ -18,7 +18,7 @@ $orbit-caption-padding: rem-calc(10 14) !default;
 $orbit-caption-height: auto !default;
 
 // We use these to control the left/right nav styles
-$orbit-nav-bg: transparent !default;
+$orbit-nav-bg: none !default;
 $orbit-nav-bg-hover: rgba(0,0,0,0.3) !default;
 $orbit-nav-arrow-color: #fff !default;
 $orbit-nav-arrow-color-hover: #fff !default;
@@ -37,10 +37,6 @@ $orbit-slide-number-bg: rgba(0,0,0,0) !default;
 $orbit-slide-number-font-color: #fff !default;
 $orbit-slide-number-padding: rem-calc(5) !default;
 
-// We use these to controls the css animation
-$orbit-animation-speed: 500ms !default;
-$orbit-animation-ease: ease-in-out !default;
-
 // Graceful Loading Wrapper and preloader
 $wrapper-class: "slideshow-wrapper" !default;
 $preloader-class: "preloader" !default;
@@ -50,33 +46,25 @@ $orbit-nav-hide-for-small: true !default;
 $orbit-bullet-hide-for-small: true !default;
 $orbit-timer-hide-for-small: true !default;
 
-// CSS Transform
-// This function is needed in order to put in all of the browser prefixes.
-// The normal tranform attribute still does not work properly across all browsers.
-// In order to receive the transitionEnd events then you will still need to use the vendor prefixes
-@mixin translate3d($x,$y,$z) {
-  -ms-transform:translate($x,$y);
-
-  -webkit-transform: translate3d($x,$y,$z);
-     -moz-transform: translate3d($x,$y,$z);
-       -o-transform: translate3d($x,$y,$z);
-          transform: translate3d($x,$y,$z);
-}
-
-@mixin rotate($d) {
-  -webkit-transform: rotate($d);
-     -moz-transform: rotate($d);
-      -ms-transform: rotate($d);
-       -o-transform: rotate($d);
-          transform: rotate($d);
-}
 
 @include exports("orbit") {
   @if $include-html-orbit-classes {
 
+    @-webkit-keyframes rotate {
+      from { -webkit-transform: rotate(0deg); }
+      to { -webkit-transform: rotate(360deg); }
+    }
+    @-moz-keyframes rotate {
+      from { -moz-transform: rotate(0deg); }
+      to { -moz-transform: rotate(360deg); }
+    }
+    @-o-keyframes rotate {
+      from { -o-transform: rotate(0deg); }
+      to { -o-transform: rotate(360deg); }
+    }
     @keyframes rotate {
-      from { @include rotate(0deg); }
-      to { @include rotate(360deg); }
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
     }
 
     /* Orbit Graceful Loading */
@@ -103,6 +91,9 @@ $orbit-timer-hide-for-small: true !default;
 
           .orbit-caption { display: block; }
         }
+        .orbit-bullets li {
+          display: inline-block;
+        }
       }
 
       // Orbit preloader
@@ -125,6 +116,7 @@ $orbit-timer-hide-for-small: true !default;
       }
     }
 
+ 
     .orbit-container {
       overflow: hidden;
       width: 100%;
@@ -142,61 +134,24 @@ $orbit-timer-hide-for-small: true !default;
 
         img { display: block; max-width: 100%; }
 
-        &.fade > li {
-          opacity: 0;
-          transition: opacity $orbit-animation-speed $orbit-animation-ease;
-          @include translate3d(0,0,0);
-          &.animate-in {
-            opacity: 1;
-            z-index: 20;
-            transition: opacity $orbit-animation-speed $orbit-animation-ease;
-          }
-          &.animate-out {
-            z-index: 10;
-            transition: opacity $orbit-animation-speed $orbit-animation-ease;
-          }
-        }
-
-        &.swipe-next > li {
-          @include translate3d(100%,0,0);
-          &.animate-in {
-            @include translate3d(0,0,0);
-            transition-duration:$orbit-animation-speed;
-          }
-          &.animate-out {
-            @include translate3d(-100%,0,0);
-            transition-duration:$orbit-animation-speed;
-          }
-        }
-
-        &.swipe-prev > li {
-          @include translate3d(-100%,0,0);
-          &.animate-in {
-            @include translate3d(0,0,0);
-            transition-duration:$orbit-animation-speed;
-          }
-          &.animate-out {
-            @include translate3d(100%,0,0);
-            transition-duration:$orbit-animation-speed;
-          }
-        }
-
-        > li {
+        &>* {
           position: absolute;
           top: 0;
-          left: 0;
           width: 100%;
-          @include translate3d(100%,0,0);
-
-          > a { display: block; }
+          @if $text-direction == rtl {
+            margin-right: 100%;
+          }
+          @else {
+            margin-left: 100%;
+          }
 
-          &.active {
-            opacity: 1;
-            // "relative" positioning is required for variable height of children.
-            position:relative;
-            top: 0;
-            left: 0;
-            @include translate3d(0,0,0);
+          &:first-child {
+            @if $text-direction == rtl {
+            margin-right: 0%;
+            }
+            @else {
+            margin-left: 0%;
+            }
           }
 
           .orbit-caption {
@@ -221,7 +176,7 @@ $orbit-timer-hide-for-small: true !default;
         top: 10px;
         #{$default-float}: 10px;
         font-size: 12px;
-        span { font-weight: $font-weight-bold; padding: $orbit-slide-number-padding;}
+        span { font-weight: 700; padding: $orbit-slide-number-padding;}
         color: $orbit-slide-number-font-color;
         background: $orbit-slide-number-bg;
         z-index: 10;
@@ -243,8 +198,6 @@ $orbit-timer-hide-for-small: true !default;
             position: relative;
             right: 20px;
             top: 5px;
-          } @else {
-              display:none; // This is used by the Javascript to not create a handler.
           }
         }
 
@@ -260,7 +213,7 @@ $orbit-timer-hide-for-small: true !default;
           border-top: none;
           border-bottom: none;
         }
-
+      
         // Pause button
         &.paused {
           & > span {
@@ -270,16 +223,15 @@ $orbit-timer-hide-for-small: true !default;
             height: 14px;
             border: inset 8px;
             border-left-style: solid;
-            @include rotate(180deg);
             border-color: transparent #fff transparent transparent;
-            &.dark {
+            &.dark { 
               border-color: transparent #333 transparent transparent;
             }
           }
         }
       }
-
-
+      
+      
 
       &:hover .orbit-timer > span { display: block; }
 
@@ -333,38 +285,37 @@ $orbit-timer-hide-for-small: true !default;
           border-#{$default-float}-color: $orbit-nav-arrow-color-hover;
         }
       }
+    }
 
-      .orbit-bullets-container { text-align: center; }
-      .orbit-bullets {
-        margin: 0 auto 30px auto;
-        overflow: hidden;
-        position: relative;
-        top: 10px;
+    .orbit-bullets-container { text-align: center; }
+    .orbit-bullets {
+      margin: 0 auto 30px auto;
+      overflow: hidden;
+      position: relative;
+      top: 10px;
+      float: none;
+      text-align: center;
+      display: block;
+
+      li {
+        cursor:pointer;
+        display: inline-block;
+        width: $orbit-bullet-radius;
+        height: $orbit-bullet-radius;
+        background: $orbit-bullet-nav-color;
+        // float: $default-float;
         float: none;
-        text-align: center;
-        display: block;
-        cursor: pointer;
-
-        li {
-          display: inline-block;
-          width: $orbit-bullet-radius;
-          height: $orbit-bullet-radius;
-          background: $orbit-bullet-nav-color;
-          // float: $default-float;
-          float: none;
-          margin-#{$opposite-direction}: 6px;
-          @include radius(1000px);
-
-          &.active {
-            background: $orbit-bullet-nav-color-active;
-          }
+        margin-#{$opposite-direction}: 6px;
+        @include radius(1000px);
 
-          &:last-child { margin-#{$opposite-direction}: 0; }
+        &.active {
+          background: $orbit-bullet-nav-color-active;
         }
+
+        &:last-child { margin-#{$opposite-direction}: 0; }
       }
     }
 
-
     .touch {
       .orbit-container {
         .orbit-prev,
@@ -389,36 +340,31 @@ $orbit-timer-hide-for-small: true !default;
     }
 
     @media #{$small-only} {
-        .orbit-stack-on-small {
-
-            .orbit-slides-container {height: auto !important;}
-            .orbit-slides-container > * {
-                position: relative !important;
-                margin-left: 0% !important;
-                opacity: 1 !important;
-                -webkit-transform: none !important;
-                   -moz-transform: none !important;
-                    -ms-transform: none !important;
-                     -o-transform: none !important;
-                        transform: none !important;
-                transition: none !important;
-            }
-
-            @if $orbit-timer-hide-for-small {
-                .orbit-timer{display: none;}
-            }
-            @if $orbit-nav-hide-for-small {
-                .orbit-next,.orbit-prev{display: none;}
-            }
-            @if $orbit-bullet-hide-for-small {
-                .orbit-bullets{display: none;}
-            }
-
-            .orbit-slide-number {
-              display: none;
-            }
+      .orbit-stack-on-small {
+        .orbit-slides-container {height: auto !important;}
+        .orbit-slides-container > * {
+          position: relative;
+          margin:0% !important;
+          opacity:1 !important;
         }
-    }
+        .orbit-timer,
+        .orbit-next,
+        .orbit-prev,
+        .orbit-bullets,
+        .orbit-slide-number {
+          display: none;
+        }
+      }
 
+      @if $orbit-timer-hide-for-small {
+         .orbit-timer{display: none;}
+      }
+      @if $orbit-nav-hide-for-small {
+         .orbit-next,.orbit-prev{display: none;}
+      }
+      @if $orbit-bullet-hide-for-small {
+         .orbit-bullets{display: none;}
+      }
+    }
   }
 }
-- 
2.47.2