composing transitions in liquid-fire

app_transitions_concurrent.js

import { Promise } from 'liquid-fire';
import { animationFor } from '../utils/transition-helpers';

// `concurrent` is not, by itself, an animation. It exists to run two or more
// transitions concurrently.

export default function concurrent(...transitions) {
  return Promise.all(transitions.map((transition) => {
    return runAnimation(this, transition);
  }));
}

function runAnimation(context, transition) {
  return animationFor(context, transition).call();
}

app_transitions_sequence.js

import { Promise } from 'liquid-fire';
import { animationFor } from '../utils/transition-helpers';

// Sequence is not, by itself, an animation. It exists to run two or more
// transitions one after the other.

export default function sequence(...transitions) {
  return executeInSequence(transitions.map((transition) => {
    return animationFor(this, transition);
  }));
}

// tasks must be array of callables which return promises
function executeInSequence(tasks) {
  var length = tasks.length;
  var current = Promise.resolve();
  var results = new Array(length);

  for (var i = 0; i < length; ++i) {
    current = results[i] = current.then(tasks[i]);
  }

  return Promise.all(results);
}

app_utils_transition-helpers.js

import Ember from 'ember';

export function animationFor(context, transition) {
  var name, args, func;
  if (Ember.isArray(transition) ) {
    name = transition[0];
    args = transition.slice(1);
  } else {
    name = transition;
    args = [];
  }
  if (typeof name === 'function') {
    func = name;
  } else {
    func = context.lookup(name);
  }
  return function() {
    return func.apply(context, args);
  };
}

Sadly, I discovered that in this form, concurrent only works animating different elements, such as scrolling the document while animating an element. While this is useful, it would be even better if it allowed composition of animations on the same element. @eaf4 do you know off the top of your head what would be necessary for this?

It depends on which animations you want to compose. I would expect some combinations to already work using this.