Skip to content

Instantly share code, notes, and snippets.

@lukemelia
Created January 2, 2016 06:57
Show Gist options
  • Save lukemelia/0a431f4f710b5c95ab3d to your computer and use it in GitHub Desktop.
Save lukemelia/0a431f4f710b5c95ab3d to your computer and use it in GitHub Desktop.
composing transitions in liquid-fire
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();
}
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);
}
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);
};
}
@lukemelia
Copy link
Author

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?

@ef4
Copy link

ef4 commented Jan 3, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment