TweenLite is better than jQuery Animation September 10, 2012

I'm used to using TweenLite by Greensock from my Flash/AS3 days. I was happy that jQuery has some basic animation and easing but I missed the control that I had from TweenLite. Enter Greensock's Javscript library. You may wonder why you need more than jQuery's animation function? I'll tell you a few reasons:

It's faster and easier on the CPU

I can't stress how important that is. I just finished up a site with a lot of animation and I'm frustrated with how much older computers struggle with the site. The load on the cpu gets even worse with phones and tablets (even the iPad 3 struggles with animation). Check out Greensock's benchmark page to see just how much better it is (hint, you don't want the fps to drop below 30fps).

More robust featureset

- Better animation Sequencing
- Better easing functions
- Slow-Motion animation (think bullet-time)

Some Code

I wrote a few jQuery plugins/functions that you may find handy. These functions just replace existing functions in jQuery so you can just continue using a syntax that is familiar to you. I've listed the coffeescript version first (if you're not familiar with coffeescript, it's time to check it out) and then translated into pure javascript below:

 

#overwrite jquery fadeIn function to use TweenLite
$.fn.fadeIn = (duration,easing=Power1.easeOut,completeFunction=null) ->
  TweenLite.to($(this),0,{css:{autoAlpha:0}})
  $(this).css("display","block")
  tweenObj = {css:{autoAlpha:1},ease:easing}
  if completeFunction != null
    tweenObj.onComplete = completeFunction
  TweenLite.to($(this),duration,tweenObj)

$.fn.fadeTo = (toAlpha,duration,easing=Power1.easeOut,completeFunction=null) ->
  $el = $(this)
  _onFadeOutComplete = () ->
    $el.css("display","none")
    if completeFunction != null then completeFunction.call(this)
  if $(this).css("display")=="none"
    TweenLite.to($(this),0,{css:{autoAlpha:0}})
    $(this).css("display","block")
  tweenObj = {css:{autoAlpha:toAlpha},ease:easing}
  if toAlpha == 0
    tweenObj.onComplete = _onFadeOutComplete
  else
    if completeFunction != null then tweenObj.onComplete = completeFunction
  TweenLite.to($(this),duration,tweenObj)

#overwrite jquery fadeOut function to use TweenLite
$.fn.fadeOut = (duration,easing=Power1.easeOut,completeFunction=null) ->
  $el = $(this)
  _onFadeOutComplete = () ->
    $el.css("display","none")
    if completeFunction != null then completeFunction.call(this)
  TweenLite.to($el,duration,{css:{autoAlpha:1},ease:easing,onComplete:_onFadeOutComplete})
	

And here's the pure javascript code:

//jQuery plugins to replace existing jQuery animation fade functions
//notes:
// - the easing function in TweenLite is not passed in as a string
//   but as a function
// - TweenLite uses seconds instead of milliseconds so .4 instead of 400
//   as your time value
$.fn.fadeIn = function(duration, easing, completeFunction) {
  var tweenObj;
  if (easing == null) {
    easing = Power1.easeOut;
  }
  if (completeFunction == null) {
    completeFunction = null;
  }
  TweenLite.to($(this), 0, {
    css: {
      autoAlpha: 0
    }
  });
  $(this).css("display", "block");
  tweenObj = {
    css: {
      autoAlpha: 1
    },
    ease: easing
  };
  if (completeFunction !== null) {
    tweenObj.onComplete = completeFunction;
  }
  return TweenLite.to($(this), duration, tweenObj);
};

$.fn.fadeTo = function(toAlpha, duration, easing, completeFunction) {
  var $el, tweenObj, _onFadeOutComplete;
  if (easing == null) {
    easing = Power1.easeOut;
  }
  if (completeFunction == null) {
    completeFunction = null;
  }
  $el = $(this);
  _onFadeOutComplete = function() {
    $el.css("display", "none");
    if (completeFunction !== null) {
      return completeFunction.call(this);
    }
  };
  if ($(this).css("display") === "none") {
    TweenLite.to($(this), 0, {
      css: {
        autoAlpha: 0
      }
    });
    $(this).css("display", "block");
  }
  tweenObj = {
    css: {
      autoAlpha: toAlpha
    },
    ease: easing
  };
  if (toAlpha === 0) {
    tweenObj.onComplete = _onFadeOutComplete;
  } else {
    if (completeFunction !== null) {
      tweenObj.onComplete = completeFunction;
    }
  }
  return TweenLite.to($(this), duration, tweenObj);
};

$.fn.fadeOut = function(duration, easing) {
  var $el, _onFadeOutComplete;
  if (easing == null) {
    easing = Power1.easeOut;
  }
  $el = $(this);
  _onFadeOutComplete = function() {
    return $el.css("display", "none");
  };
  return TweenLite.to($el, duration, {
    css: {
      autoAlpha: 1
    },
    ease: easing,
    onComplete: _onFadeOutComplete
  });
};

Example Useage (pure javascript)

var onAnimationComplete = function() {
  alert("animation complete!")
}
$('#my-element-to-animate').fadeIn(.4,Quad.easeInOut,onAnimationComplete);