Greensock Timeline Demo

Greensock Timeline Demo.markdown

Greensock Timeline Demo

A Pen by Rob Anderson on CodePen.

License.

index.html

<h1>Grid Using GreenSock <a href="http://greensock.com/timelinelite" target="_blank">TimelineLite</a></h1>
<button id="shuffle">Shuffle</button>
<button id="reorder">Reorder</button>
<button id="prepend">Prepend</button>
<button id="append">Append</button>
<button class="spacer"></button>
<button id="reset">Reset</button>  
<div id="container"></div>

script.js

var tl = new TimelineLite();
var boxes = [];
var numBoxes = 18;
var numBoxesToAdd = 6;

// Animation settings
var duration = 0.7;   // length of time in secods for box to fade in
var delay = 0.03;     // delay in secods before each new box appears

$(document).ready(function () {
  
  init();

  $('#shuffle').click(function () {

    $('#container').empty();
    appendBoxes(boxes, true);
  });
  
  $('#reorder').click(function () {

    var numBoxes = boxes.length;
    boxes = [];
    $('#container').empty();
    createBoxes(numBoxes);
    appendBoxes(boxes);
  });
  
  $('#prepend').click(function () {
   
    prependBoxes(addBoxes(numBoxesToAdd));
  });   
  
  $('#append').click(function () {

    appendBoxes(addBoxes(numBoxesToAdd));
  });
  
  $('#reset').click(function () {

    init();
  });  
});

function init () {
  
  boxes = [];
  $('#container').empty();
  createBoxes(numBoxes);
  appendBoxes(boxes);  
}

function createBoxes (num) {
  
  for (var i = 0; i < num; i += 1) {
    boxes.push(i + 1);
  }  
}

function addBoxes (num) {
  
  var numBoxes = boxes.length;
  var newBoxes = [];
  
  for (var i = 0; i < num; i += 1) {
    newBoxes.push(numBoxes + i + 1);
    boxes.push(numBoxes + i + 1);
  }

  return newBoxes;
}

function appendBoxes (collection, isShuffle) {  
  
  if (isShuffle) {
    shuffle(collection); 
  }
  
  tl.clear().restart();
  
  collection.forEach(function (box) {
  
    $('#container').append('<div class="box" id="box-' + box + '">' + box + '</div>');
    tl.from('#box-' + box, duration, {
      opacity: 0, 
      scale: 0,
      ease: Sine.easeIn
    }, '-=' + (duration - delay));
  });
}

function prependBoxes (collection) {  
  
  tl.clear().restart();
  
  collection.reverse().forEach(function (box, index) {
  
    $('#container').prepend('<div class="box" id="box-' + box + '">' + box + '</div>');
    tl.from('#box-' + box, duration, {
      opacity: 0, 
      scale: 0,
      ease: Sine.easeIn,
      delay: -(delay * (index + 1))
    }, '-=' + (duration - delay));
  });
}

function shuffle (array) {
  
  var currentIndex = array.length;
  var temporaryValue;
  var randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

style.css

$box-size = 100px
$box-color = #9acd32
$button-color = #555
$background = #3a3a4d
$color = #efefef

*
  box-sizing border-box

body
  margin 20px
  background $background
  font-family RobotoDraft, 'Helvetica Neue', Helvetica, Arial
  
h1
  color $color
  font-weight: normal
  font-weight 300
  margin-bottom 30px
  a
    color $color
    border-bottom 2px solid $color
    text-decoration none
    padding-bottom 3px
    &:hover
      color $tile-color
      border-color $box-color
  

#container
  overflow hidden
  width 720px
  .box
    display inline-block  
    float left
    width $box-size
    height $box-size
    margin 5px
    background $box-color
    text-align center
    font-size 20px
    line-height 100px

button
  float left
  width $box-size
  margin 0px 5px 20px 5px
  padding 10px 0px
  font-size 16px
  background $color
  color $333
  border none
  &:hover
    background darken($color, 10)
  &.spacer
    background $background

styles

<link href="//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&amp" rel="stylesheet" />