Web and Mobile Apps Dev

Introduction

Since I wrote the auto scrolling animation code with jQuery two days ago, I struggled with the browser performance while running this animation. It seems that the animation needs lots of CPU power and it sometimes appears to be lagging. In order to solve the CPU issue, I included a jQuery plugin named Autoscroll. As the name applies, it automatically scrolls the specified element. This has the same feature as the code I wrote, but it’s a plugin and it will immediately stop the animation when in hover state whereas my code stops animation few seconds after the cursor was hovered over the element.

The Source Code

The following is the revised code:

if ($("#whoWeAreImages").length != 0) {
  // Scroll Animation for the images in the Who We Are page
 var $whoWeAreImages = $("#whoWeAreImages"),
     $wwa = $(".WWA:first"),
     $wwaLink = $whoWeAreImages.find("a"),
     $wwaImg = $whoWeAreImages.find("img"),
     scrollWidth = $whoWeAreImages.attr("scrollWidth"),
     wwaHTML = $whoWeAreImages.html();
  // Do the following once the page is loaded
 $whoWeAreImages.css({overflow:"hidden"})    // Hide the images scrollbar
 .scrollLeft(0)    // Make sure the scrollbar is at the beginning when the page is reloaded
  // Begin the animation
 .autoscroll({
  direction: 0,
  step: 50,
  onEvaluate: function() {
    // Click action for the images in the Who We Are page
   $wwaLink.fancybox({
    transitionIn: "elastic",
    transitionOut: "elastic"
   })
    // Remove the first set of images in order to limit loop
   if ($(this).scrollLeft() >= scrollWidth) {
    $wwa.remove();
    $(this).autoscroll("pause");
    $(this).attr("scrollLeft", "0");
    $(this).autoscroll("resume");
   }
  },
  onEdge: function(a) {
   if ($(this).attr("scrollLeft") != 0) {
     // Append the same images to the end of the last image if it finished scrolling to loop through the animation
    $(this).append(wwaHTML);
   }
  }
 })
 .autoscroll("addpausesource", $wwaImg);
}

Explanation

As you can see in the code, I optimized the code to use the chaining method for jQuery.

I also changed the way images were looped. When scrollLeft greater than or equals to scrollWidth, the first set of images will be removed/deleted, pause the animation, set scrollLeft to zero, and restart the animation.

This means that when the position of the scrollbar reaches the beginning of the second set of images (or second loop), delete the first set of images using :first pseudo selector and reset the scrollbar position to the beginning. Since the scrollbar position will be at the end of the first loop and the beginning of the second loop, remove the first loop and reset the scrollbar position have n0 effect on the animation. The animation would continue to loop through the images without interruption but it’s limited to two loops.

Although the code was optimized, the animation still has some lag. It will sometimes stop and continue without interaction, much like the under-powered graphics card. I have not yet find any solution to this issue yet. However, I found out that Mootools animation is sometimes more smooth than jQuery. I will try to use Mootools to animate the auto scroll later.

Do you believe that Mootools  animation is more smooth than jQuery? Please share your opinion in the discussion.