slide-right.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', 1);
  this.newElement.css('z-index', 0);

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