Timeline doesn't finish/pause for added timelines

[Fakebook]

 I created a simple example of what I've been working on.  Basically, I want to do the following with multiple timelines.

 

In my example, only one box should be moving at a time.  Currently, multiple will play at the same time.  So, red box moves and stops, then green box moves and stops, then blue box moves and stops, then finally red box moves again and then stops.

 

It is also important that I use functions, because in my working project example I am taking advantage of certain callback functions.

var tl = new TimelineMax({
    repeat: -1
  }),
  tl2 = new TimelineMax(),
  tl3 = new TimelineMax();

tl.to("#one", 1, {
  left: 300
});

tl.add(tl2);
tl.add(tl3);

tl.to("#one", 1, {
  left: 60
});

function timeline2() {

  tl2.to("#two", 1, {
    left: 400
  });

}

function timeline3() {
  tl3.to("#three", 1, {
    left: 300
  });
}

timeline2();
timeline3();

See the Pen KVXdrB by NerdOrDie (@NerdOrDie) on CodePen

[OSUblake]

What are you trying to do? You might be setting things up in a way that's not going to work. But here's how to get it working like you described.

See the Pen Ywryop?editors=001 by osublake (@osublake) on CodePen