[SOLVED] Difficulty getting JavaScript animation to work with AngularJS Directive

Difficulty getting JavaScript animation to work with AngularJS Directive

function percentToPixel(perc) {
  return ($(".stepNavContainer").outerWidth() / 100) * parseFloat(perc);
}

var app = angular.module('app', ["ngAnimate"]);
app.controller("appController", function($scope) {

});

app.directive("init-modal", function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.init = function() {
        TweenMax.set($("#cursor"), {
          x: percentToPixel("0") + "px",
          xPercent: -50
        });
        TweenMax.set($("#joinModalNavStep1"), {
          x: percentToPixel("0") + "px",
          xPercent: -50
        });
        TweenMax.set($("#joinModalNavStep2"), {
          x: percentToPixel("50") + "px",
          xPercent: -50
        });
        TweenMax.set($("#joinModalNavStep3"), {
          x: percentToPixel("100") + "px",
          xPercent: -50
        });
      };
    }
  };
});



app.directive("step-modal", function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      var tlStepNavAnimation = new TimelineMax();
      tlStepNavAnimation.to(cursor, 1, {
        x: percentToPixel("0") + "px",
        xPercent: -50,
        ease: Back.easeInOut
      });
      tlStepNavAnimation.addPause();
      tlStepNavAnimation.to(cursor, 1, {
        x: percentToPixel("50") + "px",
        xPercent: -50,
        ease: Back.easeInOut
      });
      tlStepNavAnimation.addPause();
      tlStepNavAnimation.to(cursor, 1, {
        x: percentToPixel("100") + "px",
        xPercent: -50,
        ease: Back.easeInOut
      });

      scope.play = function() {
        tlStepNavAnimation.play();
      };

      scope.reverse = function() {
        tlStepNavAnimation.reverse();
      };
    }
  };
});

html,
body {
  overflow: hidden;
}
body {
  background-color: white;
  margin: 0;
  padding: 0;
}
.stepNavContainer {
  position: relative;
  height: 50px;
  width: 50%;
  left: 25%;
  border: 1px solid red;
}
.circle {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
#cursor {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background: #c32026;
  border-radius: 50%;
}
.step {
  background: #999999;
}
.btn {
  width: 100px;
  height: 50px;
  border: 1px solid black;
}

<!DOCTYPE html>
<html ng-app="app" ng-controller="appController">

<head>
  <title>Title of the document</title>
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div init-modal ng-click="init()" id="setupBtn" class="btn">
    <span>Setup</span>
  </div>

  <div step-modal ng-click="reverse()" id="previousBtn" class="btn">
    <span>Previous</span>
  </div>

  <div id="nextBtn" class="btn">
    <span step-modal ng-click="play()">Next</span>
  </div>
  <div init-modal class="stepNavContainer">


    <span id="joinModalNavStep1" class="circle step"></span>


    <span id="joinModalNavStep2" class="circle step"></span>


    <span id="joinModalNavStep3" class="circle step"></span>

    <span id="cursor" class="circle"></span>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
</body>

</html>

So, I have a working JavaScript animation (Greensock) that you can see here http://codepen.io/jstafford/pen/VaLgvK . I am trying to plug this into an AngularJS directive, but I am not even making it inside the directives for Setup (init-modal directive) or Next and Previous (step-modal directive) buttons. 1) Push Setup button to setup the three circles and cursor at their initial positions which triggers the init-modal directive 2) Then the pushing of Next button or Previoius button triggers the step-modal directive to cause the step animation to occur. I am new to AngularJS and I am trying to do this the AngularJS way but really struggling. Any help greatly appreciated.

Solution

First, give a camel case name to your directive:

app.directive("initModal", function() {
  return {
    restrict: 'E',
    link: function(){}
  }
}

restrict: 'E' => Element: <init-modal></init-modal>

restrict: 'A' => Attribute: <div init-modal></div>

restrict: 'C' => Classname: <div class="init-modal"></div>

Angular's directive documentation