Ember-animated scroll reproduction

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.not-index.js

import Ember from 'ember';
import ToRight from '../motions/to-right';

function * transition() {
  this.removedSprites.forEach(sprite => {
    this.animate(new ToRight(sprite));
  });
}

export default Ember.Controller.extend({
  transition
});

motions.to-right.js

import Motion from 'ember-animated/motion';
import Tween from 'ember-animated/tween';
import { rAF } from 'ember-animated/concurrency-helpers';

export default class ToRight extends Motion {
  constructor(sprite, opts) {
    super(sprite, opts);
  }

  * animate() {
    yield rAF();
  }
}

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('not-index');
});

export default Router;

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.not-index.js

import Ember from 'ember';

export default Ember.Route.extend({
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.index.hbs

Test

{{#link-to 'not-index'}}Go to not-index{{/link-to}}

templates.not-index.hbs

{{#animated-container}}
  {{#animated-bind 'not-index-route' use=transition duration=3000}}
    {{#link-to 'index'}}Go to index{{/link-to}}
         	
          <ul>
          	<li>List item 0</li>
          	<li>List item 1</li>
          	<li>List item 2</li>
          	<li>List item 3</li>
          	<li>List item 4</li>
          	<li>List item 5</li>
          	<li>List item 6</li>
          	<li>List item 7</li>
          	<li>List item 8</li>
          	<li>List item 9</li>
          	<li>List item 10</li>
          	<li>List item 11</li>
          	<li>List item 12</li>
          	<li>List item 13</li>
          	<li>List item 14</li>
          	<li>List item 15</li>
          	<li>List item 16</li>
          	<li>List item 17</li>
          	<li>List item 18</li>
          	<li>List item 19</li>
          	<li>List item 20</li>
          	<li>List item 21</li>
          	<li>List item 22</li>
          	<li>List item 23</li>
          	<li>List item 24</li>
          </ul>
          
    {{#link-to 'index'}}Go to index{{/link-to}}
  {{/animated-bind}}
{{/animated-container}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "release",
    "ember-animated": "git+https://github.com/ember-animation/ember-animated.git",
    "ember-maybe-import-regenerator": "0.1.6"
  }
}