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.
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>