gsap-to-left.js

import Ember from "ember";
var RSVP = Ember.RSVP;

export default function () {
  if (!this.newElement) {
    return RSVP.resolve();
  } else if (!this.oldElement) {
    this.newElement.css({visibility: ''});
    return RSVP.resolve();
  }

  return new RSVP.Promise((resolve) => {
    var tweenComplete = () => {
      this.oldElement.css({
        visibility: 'hidden'
      });
      this.newElement.css({
        visibility: ''
      });
      resolve();
    };

    this.newElement.css({
      visibility: ''
    });

    var timeline = new TimelineMax({
      onComplete: tweenComplete,
      paused:true
    });

    timeline.insert(TweenMax.fromTo(this.oldElement[0], 0.2, { x: 0}, {x: this.oldElement.width() * -1}));
    timeline.insert(TweenMax.fromTo(this.newElement[0], 0.2, { x: this.oldElement.width()}, {x: 0}));
    timeline.play();
  });
}

gsap-to-right.js

import Ember from "ember";
var RSVP = Ember.RSVP;

export default function () {
  if (!this.newElement) {
    return RSVP.resolve();
  } else if (!this.oldElement) {
    this.newElement.css({visibility: ''});
    return RSVP.resolve();
  }

  return new RSVP.Promise((resolve) => {
    var tweenComplete = () => {
      this.oldElement.css({
        visibility: 'hidden'
      });
      this.newElement.css({
        visibility: ''
      });
      resolve();
    };

    this.newElement.css({
      visibility: ''
    });

    var timeline = new TimelineMax({
      onComplete: tweenComplete,
      paused:true
    });

    timeline.insert(TweenMax.fromTo(this.oldElement[0], 0.3, { x: 0}, {x: this.oldElement.width()}));
    timeline.insert(TweenMax.fromTo(this.newElement[0], 0.3, { x: this.oldElement.width() * -1}, {x: 0}));
    timeline.play();
  });
}