Edit on
div.wrapper
  h3 Nested Timelines

  //ghost's parts
  div.ghost
    div.eye
      div.pupil
    div.eye
      div.pupil
    div.bottom-ctn
      div.bottom1
      div.bottom2
      div.bottom3
  //pacman's parts  
  div.pacman
        div.pacmantop
        div.pacmanbottom
View Compiled
body {
  background-color: tan;
  margin: 0;
  padding: 0;
}

.wrapper {
  padding: 80px 80px;
  width: 50%;
  height: 30px;
  margin: 20px auto;
  background-color: black;
  border-radius: 10px;
  border-top: brown solid 17px;
  position: relative;
}

h3 {
  color: white;
  font-family: courier;
  letter-spacing: 1px;
  position: absolute;
  top: -38px;
  left: 10px;
}

/* all of the ghost's parts */
.ghost{
  background-color: red;
  height: 70px;
  width: 90px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  padding-top: 30px;
  position: relative;
  bottom: 25px;
  left: 30px;
  margin: 0 auto;
}

.eye {
  background-color: white;
  height: 30px;
  width: 30px;
  position: relative;
  margin: 0 auto;
  border-radius: 50%;
  display: inline-block;
}

.pupil {
  background-color: black;
  height: 10px;
  width: 10px;
  top: 11px;
  position: relative;
  margin: 0 auto;
  border-radius: 50%;
}

.bottom-ctn{
  width: 100%;
}

.bottom1, .bottom2, .bottom3{
  background-color: red;
  width: 31.2px;
  height: 30px;
  border-radius: 50%;
  position: relative;
  top: 20px;
  left: -1px;
  display: inline-block;
  margin: 0 -1px;
  float: right;
}

/* all of pacman's parts */
.pacmantop {
   height:65px;
   width:120px;
   border-radius: 90px 90px 0 0;
   background: yellow;
}

.pacmanbottom {
   height: 65px;
   width: 120px;
   border-radius: 0 0 90px 90px;
   background: yellow;
   position: relative;
  bottom: 11px;
}

.pacman {
    margin: 0 auto;
    position: relative;
    bottom: 135px;
}
// example of nested timelines

// ghost animations:
var look = new TimelineMax({repeat:1, repeatDelay:0});
look.to(".pupil", 1, {x:-10, y: 0})
  .to(".pupil", 0.5, {x:0, y:0});

var blink = new TimelineMax({repeat:1, repeatDelay:0});
blink.to(".eye", 0.1, {opacity: 0})
  .to(".eye", 0.1, {opacity: 1});

var mvRight = new TimelineMax();
mvRight.to(".ghost", 2, {x:60, y: 0});

// ghost's master timeline
var ghostAnimate = new TimelineMax();
ghostAnimate.add(look)
  .add(mvRight, 0.8)
  .add(blink);

// pacman animations:
var topJaw = new TimelineMax();
  topJaw.to(".pacmantop", 0.1, {rotation:-40});
var bottomJaw = new TimelineMax();
  bottomJaw.to(".pacmanbottom", 0.1, {rotation:40});

// pacman's master timeline
var pacmanAnimate = new TimelineMax({repeat:15, repeatDelay:0});
  pacmanAnimate.add(topJaw, 0.1)
   .add(bottomJaw, 0.1);

// Master Timeline:
var scene1 = new TimelineMax({repeat:1, repeatDelay:1});
scene1.add(pacmanAnimate)
.add(ghostAnimate, 0.5);
Rerun