Can anyone help me figure out why my animation class isn't triggering in this codepen? I can access the controller methods fine, but the animation class doesn't seem to work properly. Any ideas on what I might be missing?
Check out the codepen with the AngularJS animation link here.
I'm trying to incorporate a base animation into the animation class mentioned above. It's working fine, so that's not the issue.
You can view the codepen with the base animation link here for reference.
This setup involves clicking on each circle to make it active. The timeline transitions from a filled circle to an empty circle with a stroke when a banner slide is "active", and reverts back when not active.
angular.module("appBanner", [])
.controller('bannerCtrl', function($scope) {
// Controller code goes here
})
.animation('.navCircleTransition', function($window) {
// Animation class definition here
});
function navCircleAnimate(el, direction) {
// Function code for animating circles
}.navCircleContainer {
// CSS styling for layout
}
body {
background: #333;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div ng-app="appBanner" ng-controller="bannerCtrl" class="navCircleContainer">
<!-- HTML structure for the animated circles -->
</div>