Javascript Animations with Greensock | Page Two

TweenLite & TweenMax

- Basically the same library

- TweenLite is lightweight version of TweenMax

- TweenLite doesn't have certain functions (yoyo, repeat, rounding)

TimelineLite & TimelineMax

- Also basically the same library

- TimelineLite is lightweight version of TimelineMax

- TimelineLite doesn't have certain functions (yoyo, repeat, rounding)

Methods available only to TimelineMax:

currentLabel()
getActive()
getLabelAfter()
getLabelBefore()
getlLabelsArray()
repeat()
repeatDelay()
tweenFromTo()
tweenTo()
yoyo()

Animations take a minimum of three arguments:

  1. Item being animated
  2. Length of animation (in seconds)
  3. Object containing css properties
  TweenLite.to(item, time, {object});

Implementation

<script src="http://www.naderdabit.me/greensock/TweenMax.min.js"></script>

window.onload = function(){
  var logo = document.getElementById("logo");
  TweenLite.to(logo, 1, {left:"632px"});
}

Implementation with jQuery

<script src="http://www.naderdabit.me/greensock/TweenMax.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

window.onload = function(){
  var logo = $('#logo');
  TweenLite.to(logo, 1, {left:"632px"});
}

TweenLite Codepen Example

View easing options ->

TweenMax Codepen Example

TimlineLite Codepen Example

TimlineMax Codepen Example

prev
next