Animation callback occurring before tween is finished

[xeon826]

Here I have a site, the intention is for the image to expand and then become the banner of the next page. This is the transition I'm using.

var ExpandTransition = Barba.BaseTransition.extend({
  start: function() {
    this.originalThumb = lastElementClicked;

    Promise
      .all([this.newContainerLoading, this.enlargeThumb()])
      .then(this.showNewPage.bind(this));
  },

  enlargeThumb: function() {
    var deferred = Barba.Utils.deferred();
    var thumbPosition = this.originalThumb.getBoundingClientRect();

    this.cloneThumb = this.originalThumb.cloneNode(true);
    this.cloneThumb.style.position = 'fixed';
    this.cloneThumb.style.top = thumbPosition.top+'px';
    this.oldContainer.appendChild(this.cloneThumb);

    TweenLite.to(this.cloneThumb, 0.3, {
      top: 0,
      height: window.innerHeight,
      onComplete: function() {
        deferred.resolve();
      }
    });

    return deferred.promise;
  },

  showNewPage: function() {
    this.newContainer.style.visibility = 'visible';
    this.newContainer.appendChild(this.cloneThumb);
    this.done();
    // this.cloneThumb.style.position = 'relative';
      }
});

The problem I'm having is that as soon as the image begins to expand, the callback occurs and the image immediately jumps to the end of the animation. I'm not sure but I think by clearing the cache/offline website data, it fixes it one time. I've tried using deferred.resolve (no parenthesis) and putting a promise() at the end of the animation but I can't seem to get it working.

[xeon826]

It was a css transition applied to the anchor tag causing the slow down in the animation.