[Force timeline to update it's duration and children position after manipulation on-the-fly]

Thank you @Acccent and @PointC

[Force timeline to update it's duration and children position after manipulation on-the-fly]

I have a timeline with couple of tweens in it. Some of those tweens get destroyed by TweenLite.killTweensOf(myNode) while the timeline is playing but after removing those tweens,  the position of the next tweens don't change and the timeline act like nothing has been changed. I expect when I remove a tween from timeline, then any tween after that shifts and start earlier.

 

Is it even possible to do what I want to do?

[GSAP + AngularJS + IE or Edge = Horrible animations]

I found the issue, it was because of angular-material library. it seems angular-material and gsap will not work well together on IE or Edge.

[GSAP + AngularJS + IE or Edge = Horrible animations]

This is my animation. This animation works very well in all browsers except IE and Edge. 

 

Animation does not start immediately and it happens very fast. so fast that you almost can't see it.

 

Does anyone know what could be the issue here?

'use strict';

angular
  .module('spectre')
  .animation('.slide-horizontal', SlideHorizontalAnimation)

/* ngInject */
function SlideHorizontalAnimation(TweenLite, $timeout) {
  var $animation = {};

  $animation.enter = function (element, doneFn) {
    var direction = element.attr('data-direction');

    var animationClass = 'slide-horizontal-from-right';
    if (direction === 'left') {
      animationClass = 'slide-horizontal-from-left';
    }
    element.css('display', '');
    element.addClass(animationClass);

    TweenLite.to(element[0], 0.5, {
      className: '-=' + animationClass,
      //ease: 'Power2.easeOut',
      force3D: false,
      useFrames:false,
      onComplete: function () {
        doneFn();
      }
    });
  };
  $animation.leave = function (element, doneFn) {
    var direction = element.attr('data-direction');
    var animationClass = 'slide-horizontal-from-left';
    if (direction === 'left') {
      animationClass = 'slide-horizontal-from-right';
    }

    element.removeClass(animationClass);
    TweenLite.to(element[0], 0.4, {
      className: '+=' + animationClass,
      force3D: false,
      useFrames:false,
      //ease: 'Power2.easeOut',
      onComplete: doneFn
    });
  };

  return $animation;
}

See the Pen dXRpaV by eeliya (@eeliya) on CodePen