animation-api-example.js

function NOOP() {}
var button = getSomeButtonSomehow();

// all of these Animation objects are immutable, and just describe the motion
var moveRight = Animate.positionX({ from: 0, to: 100, ease: Easing.easeOut, duration: 200 });
var moveDown = Animate.positionY({ from: 0, to: 100, ease: Easing.easeOut, duration: 200 });
var fadeOut = Animate.opacity({ to: 0, ease: Easing.cubicBezier(0,1,1,0), duration: 50 });

var move = moveRight.with(moveDown, 100); // start moveDown 100ms after moveRight starts
var reusableAnimation = move.then(fadeOut, -fadeOut.duration); // start fadeOut 50ms before move ends
var targetedAnimation = reusableAnimation.target(button);

targetedAnimation
  .toObservable()
  .takeUntil(somethingTerribleHappens)
  .subscribe(NOOP, NOOP, button.destroy.bind(button));

Much of this API is hand-waved but we've explored the pattern pretty deeply and it's very effective. Observables are trickier to use for this because you can't really encode the duration, which means a.then(b, -100) is much harder to pull off.