<div class="models__window models__window--chapter-complete">
  <div class="modal__inner">
    <p>Well done!</p>
    <p>You're on your way!</p>
    <svg class="svg-tick" viewBox="0 0 40 40">
      <defs>
        <style>.tick{fill:#5fb5e3;}</style>
      </defs>
      <title>tick</title>
      <path class="tick" d="M35.65,4a3.4,3.4,0,0,0-4.76.67L14.54,26.35,8.8,20.62A3.4,3.4,0,0,0,4,25.43L15.26,36.69,36.32,8.75A3.4,3.4,0,0,0,35.65,4"></path>
    </svg>
    <h2>Complete</h2>
  </div>
</div>

.models__window {
  background-color: #555;
  width: 300px;
  height: 300px;
  margin: 20px auto;
  padding: 20px;
}

.modal__inner {
  width: 80%;
  margin: 0 auto;
  color: white;
  text-align: center;
}
.svg-tick {
  width: 100px;
}

var modalComplete = $('.models__window');
var modalInner = $('.modal__inner');
var tick = $('.svg-tick');
var tlComplete =new TimelineMax();
var going = false;

$(window).on('click', showhide);

function showhide()
{
  // console.log("play " + going);
  if(going === true)
  {
     tlComplete.play();
  }
  else
  {
    tlComplete.reverse();
  }
going = !going;
}

TweenMax.set(modalComplete, {
    opacity: 0,
    y: "250px",
    scaleX: 0.1,
    scaleY: 0.1
  });
TweenMax.set(modalInner, {
    opacity: 0,
    y: "30px"
  });

TweenMax.set(tick, { 
  opacity:0,
  scaleX: 0,
  scaleY: 0
});

tlComplete.add( TweenMax.to(modalComplete, 0.4, {
    display: 'block',
    y: "0",
    ease:Back.easeOut
  }));
tlComplete.add( TweenMax.to(modalComplete, 0.2, {
    opacity: 1,
  }), 0.0);

tlComplete.add( TweenMax.to(modalComplete, 0.3, {
    scaleY: 1,
    ease:Back.easeInOut
  }));
tlComplete.add( TweenMax.to(modalComplete, 0.30, {
    scaleX: 1,
    ease:Back.easeOut
  }));

tlComplete.add(
  TweenMax.to(modalInner, 0.15, { 
    opacity: 1,
    y: "0px",
    ease: Quad.easeOut
  })
);

tlComplete.add(
  TweenMax.to(tick, 0.2, { 
    opacity: 1,
    scaleX: 1,
    scaleY: 1,
    ease: Back.easeOut
  })
);