Non-smooth tweening of Greensock JavaScript in Angular Animation Class

Question

"use strict";
angular.module("app", ['ngAnimate'])
  .controller('appCtrl', function($scope, $timeout) {

    $timeout(function() {
      $scope.currentIndex = 0;
    });

    $scope.isCurrentIndex = function(index) {
      return $scope.currentIndex === index;
    }

    $scope.setCurrentIndex = function(index) {
      $scope.currentIndex = index;

    }

  })
  .animation('.navModalCircleTransition', function() {
    return {
      addClass: function(element, className, done) {

        if (className === 'active') {
          TweenMax.set(element, {
            background: "#000000"
          });
          TweenMax.to(element, 1, {
            background: "#C32026",
            onComplete: done
          });

        } else {
          done();
        }
      },
      removeClass: function(element, className, done) {
        if (className === 'active') {
          TweenMax.set(element, {
            background: "#C32026"
          });
          TweenMax.to(element, 1, {
            background: "#000000",
            onComplete: done
          });

        } else {
          done();
        }
      }
    }
  });

.navModalCircleContainer {
  display: flex;
  justify-content: space-between;
  padding: 0 25%;
}
.navModalCircle {
  height: 25px;
  width: 25px;
  border-radius: 100%;
  background: #000000;
}

<div ng-app="app">
  <div ng-controller="appCtrl">

    <div class="navModalCircleContainer">
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(0)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(1)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(2)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(3)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(4)}"></div>
    </div>

    <br />
    <button type="button" ng-click="setCurrentIndex(0)">set currentIndex = 0</button>

    <br />
    <br />


    <button type="button" ng-click="setCurrentIndex(1)">set currentIndex = 1</button>
    <br />
    <br />


    <button type="button" ng-click="setCurrentIndex(2)">set currentIndex = 2</button>
    <br />
    <br />


    <button type="button" ng-click="setCurrentIndex(3)">set currentIndex = 3</button>
    <br />
    <br />


    <button type="button" ng-click="setCurrentIndex(4)">set currentIndex = 4</button>
    <br />
    <br />

  </div>
</div>

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

My transitions are not smooth with this javascript Greensock animation, and I am trying to figure out why? Very reduced problem here with hopefully a straightforward answer. I am calling the addClass and removeClass pieces of the navModalCircleTransition angular animation class , but the transition rendered by Greensock is not smooth. Strange stuff. Everything else is working fine. I have never seen anything like this before. What am I missing?

Answer 1

Re-posting as an answer.

From TweenMax's CSSPlugin documentation:

a common mistake is to forget to use camel case representations of the properties...

In this case, changing background to backgroundColor fixes the issue and animates as expected.

Snippet:

"use strict";
angular.module("app", ['ngAnimate'])
  .controller('appCtrl', function($scope, $timeout) {
    $timeout(function() {
      $scope.currentIndex = 0;
    });
    $scope.isCurrentIndex = function(index) {
      return $scope.currentIndex === index;
    }
    $scope.setCurrentIndex = function(index) {
      $scope.currentIndex = index;

    }
  })
  .animation('.navModalCircleTransition', function() {
    return {
      addClass: function(element, className, done) {
        if (className === 'active') {
          TweenMax.to(element, 0.4, {
            backgroundColor: '#C32026',
            onComplete: done
          });
        } else {
          done();
        }
      },
      removeClass: function(element, className, done) {
        if (className === 'active') {
          TweenMax.to(element, 0.4, {
            backgroundColor: '#000000',
            onComplete: done
          });
        } else {
          done();
        }
      }
    }
  });

.navModalCircleContainer {
  display: flex;
  justify-content: space-between;
  padding: 0 25%;
}
.navModalCircle {
  height: 25px;
  width: 25px;
  border-radius: 100%;
  background: #000000;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div ng-app="app">
  <div ng-controller="appCtrl">
    <div class="navModalCircleContainer">
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(0)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(1)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(2)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(3)}"></div>
      <div class="navModalCircle navModalCircleTransition" ng-class="{active: isCurrentIndex(4)}"></div>
    </div>
    <br />
    <button type="button" ng-click="setCurrentIndex(0)">set currentIndex = 0</button>
    <br />
    <br />
    <button type="button" ng-click="setCurrentIndex(1)">set currentIndex = 1</button>
    <br />
    <br />
    <button type="button" ng-click="setCurrentIndex(2)">set currentIndex = 2</button>
    <br />
    <br />
    <button type="button" ng-click="setCurrentIndex(3)">set currentIndex = 3</button>
    <br />
    <br />
    <button type="button" ng-click="setCurrentIndex(4)">set currentIndex = 4</button>
    <br />
    <br />
  </div>
</div>

Hope this helps.