slide-left.js

import Ember from 'ember';
import { stop, animate, Promise } from 'liquid-fire';

export default function() {
  stop(this.oldElement);
  let windowWidth = window.innerWidth ? window.innerWidth : Ember.$(window).width();

  this.oldElement.css('z-index', 0);
  this.newElement.css('z-index', 1);

  return Promise.all([
    animate(this.newElement, {
      translateX: [0, windowWidth]
    }, {
      duration: 600,
      easing: 'easeInOutQuint',
      queue: false
    }),
    animate(this.oldElement, {
      opacity: [0.25, 1],
      translateX: -(windowWidth * 0.5)
    }, {
      duration: 1000,
      delay: 100,
      easing: 'easeInOutQuint',
      queue: false
    })
  ]);
}