<div ng-app="bounce" ng-controller="bounceController">

  <button ng-click="spinIt()">Spin it</button>

  <button ng-click="hideIt()">Hide it</button>

  <button ng-click="showIt()">Show it</button>

  <div ng-show="boxVisible" class="blackbox animation-target">
  </div>

</div>

body {
  margin: 20px;
  background-color: #333;
  text-align: center;
}

.blackbox {
  background-color: black;
  font-color: white;
  width: 100px;
  height: 100px;
  border-radius: 3px;
  margin: 0 auto;
  margin-top: 20px;
}

angular.module('bounce', [
  'bounce.controllers'
]);

angular.module('bounce.controllers', []).
controller('bounceController', function($scope) {

  $scope.boxVisible = true; // show box initially

  $scope.showIt = function() {
    $scope.boxVisible = true; // show it, then apply anim
    var bounce = new Bounce();
    bounce.scale({
      from: {
        x: .5,
        y: 1
      },
      to: {
        x: 1,
        y: 1
      },
      easing: "bounce",
      duration: 1000,
      delay: 0,
      bounces: 4,
      stiffness: 1
    }).scale({
      from: {
        x: 1,
        y: .5
      },
      to: {
        x: 1,
        y: 1
      },
      easing: "bounce",
      duration: 1000,
      delay: 0,
      bounces: 6,
      stiffness: 1
    });
    bounce.applyTo(document.querySelectorAll(".animation-target"));
  }

  $scope.hideIt = function() {
    var bounce = new Bounce();
    bounce.scale({
      from: {
        x: 1,
        y: 1
      },
      to: {
        x: 0.1,
        y: 1
      },
      easing: "bounce",
      duration: 500,
      delay: 0,
      bounces: 4,
      stiffness: 3
    }).scale({
      from: {
        x: 1,
        y: 1
      },
      to: {
        x: 1,
        y: 0.1
      },
      easing: "bounce",
      duration: 250,
      delay: 250,
      bounces: 4,
      stiffness: 1
    });
    bounce.applyTo(document.querySelectorAll(".animation-target")).then(function() {
      // need to get the scope of the element, then 
      // set visibility to false to completely hide it
      var scope = angular.element($(".blackbox")).scope();
      scope.$apply(function() {
        scope.boxVisible = false;
      });
    });

  }

  $scope.spinIt = function() {
    $scope.boxVisible = true;
    var bounce = new Bounce();
    bounce.rotate({
      from: 0,
      to: 90,
      bounces: 4,
      duration: 1000,
      delay: 0,
      stiffness: 3
    }).skew({
      from: {
        x: 0,
        y: 0
      },
      to: {
        x: 20,
        y: 20
      },
      easing: "sway",
      duration: 1000,
      delay: 0,
      bounces: 4,
      stiffness: 3
    });
    bounce.applyTo(document.querySelectorAll(".animation-target"));
  }
});