Multiple Animations when a Waypoint is triggered

I would like to trigger following animation when a waypoint element is triggered (a simple bar chart):

• colored div changes width from 0 to 500px
• second div containing text is fading in

Problem: colored div works as expected, but I did not manage to get the second part working. Either it's not displayed at all or it's displayed all the time.

I already tried so ideas like working with a span-Tag but I still don't get it working.

This is my code:

<style>
.Waypoint-Bar{
  width: 100px;
  height: 10px;
  background-color: red;
  transition: all 440ms ease-in;

}

  .Waypoint-Bar-Animation{
    width: 500px;
    height: 10px;
    background-color: blue;
}

.bar-text {
  display: none;


}

.bar-text-animation {
  display: block;

}
</style>
</head>
<body>

  <div class="Waypoint-Bar"></div>
  <div class="bar-text">Text</div>

 </p>

<script>

var $bar-text = $('.bar-text');
var $waypointbar = $('.Waypoint-Bar');


$waypointbar.waypoint(function(direction) {
    if (direction == 'down') {
    $waypointbar.addClass('Waypoint-Bar-Animation');
    $bar-text.addClass('bar-text-animation');


  } else {
    $waypointbar.removeClass('Waypoint-Bar-Animation');
    $bar-text.removeClass('bar-text-animation');
  }
}, {offset: '53%'});


</script>