cancelling an Ember.run.later

gistfile1.js

import Ember from 'ember';
import InViewportMixin from 'ember-in-viewport';

const {
  get: get,
  set: set,
  setProperties,
  computed,
  run,
  on,
  observer,
  $,
} = Ember;

const {
  scheduleOnce,
  debounce,
  bind,
  next,
  later,
  cancel
} = run;

const animate = Ember.$.Velocity.animate;

export default Ember.Component.extend(InViewportMixin, {
  classNames: ['step-one'],
  classNameBindings: ['viewportEntered:active'],
  triggered: false,

  _startAnimation() {
    Ember.Logger.log('start animation');
    var fileTrack = this.$('.file-track-container');
    var fileDragged = this.$('.file-dragged');
    var both = Ember.$.fn.add.call(fileTrack, fileDragged);

    animate(fileTrack, { opacity: 1 }, { duration: 1000, easing: "easeOutSine" })
    .then(() => {
      animate(fileDragged, { opacity: 1 }, {  delay: 500, duration: 1000, easing: "easeOutSine" });
      animate(fileTrack, { left: 230 }, { duration: 1500, easing: "easeInOutSine" })
      .then(() => {
        animate(both, { opacity: 0 }, { duration: 1000, delay: 500, easing: "easeOutSine" })
        .then(() => {
          fileTrack.css('left', -200);
          var runLater = later(this, this._startAnimation, 2000);
          set(this, 'restartAnimation', runLater);
        });
      });
    })
    .catch((error) => {
      Ember.Logger.log('failed to complete transition in step one', error);
    });
  },

  _teardown: on('willDestroyElement', function() {
    var r = get(this, 'restartAnimation');

    Ember.Logger.log('teardown step one', r);
    // this does not seem to cancel the ember.run.later
    cancel(r);
  }),

  _triggerInitalAnimation: observer('viewportEntered', function() {
    if (get(this, 'viewportEntered') && !get(this, 'triggered')) {
      set(this, 'triggered', true);
      later(this, () => {
        scheduleOnce('afterRender', this, '_startAnimation');
      }, 1000);
    }
  })
});