Momentum

[samselikoff]

Momentum seems to be a default property of most/all of the provided Motions, but I'm having trouble tracking down where it "lives".

Is it a part of the motions themselves, the code that is performing calculations on prior tweens?

fade seems like it does not have any sort of momentum. I'm basically trying to recreate this behavior for move – a momentumless move, similar to what you'd have if you added a CSS transition to an element – but I'm having trouble.

I can post some code examples but figured I'd start with this in case I'm missing an obvious place to look.

[ef4]

Is it a part of the motions themselves, the code that is performing calculations on prior tweens?

Yes. Allowing stateful things like momentum to be handled at the level of the Motions but not the Transitions is one of the big wins with our architecture.

A motion doesn't necessarily need to choose to implement momentum the way I've done it in Move, but that's one pretty good way. In general, you get access to any prior motions, and you can decide what state to propagate from them.

In the case of Move, we are adding the prior tween into our new tween, and adjusting our new tween so that by the time it finishes it will cancel out the remaining motion from the old tween.

[samselikoff]

Gotcha. Makes sense.

Trying to implement my own momentumless, cancellable Move motion, to be used with something like a collapsible panel. I think you don't want momentum in this case, as it feels a bit unnatural. I'm going for something like what you see in Materialize's collapse.

I looked at the packaged opacity motion and see that it uses this.prior.tween.currentValue to calculate what percentage complete the previous tween is when it is cancelled, so it can use proportionalDuration for the new animation.

Is there a more general concept/utility/property that exposes a tween's percentage completed, that custom Motions can use to properly account for cancelled animations? I poked around Tween and Curve and found some properties like _spaceProgress and _timeProgress but believe those are private.

(Am I thinking about this right? Is there a reason proportionateDuration should basically always be derived from priorTween.currentValue? My confusion could also be that my reference point is D3 where I believe this concept is abstracted away from you. For example if you look at this chart and click the radio buttons quickly, I think the proportionate duration is automatically used, even though the code only ever specifies 750 after the call to .transition(). I believe D3 calculates that/sets the starting value for the new tween after interruption for you.)

[samselikoff]

I worked something together:

if (this.prior) {
  let { initialValue, finalValue, currentValue } = this.prior.xTween;
  let percentageComplete = currentValue / Math.abs(finalValue - initialValue);

  duration = percentageComplete * duration;
}

Seems to work - but now I need to figure out how to share this with <AnimatedContainer>.

[ef4]

Keep in mind that you can put whatever properties you want on your own Motion, and then access them when one of your Motion instances is interrupting another.

I also think it would be OK to expose spaceProgress and timeProgress as public API.

This:

let { initialValue, finalValue, currentValue } = this.prior.xTween;
let percentageComplete = currentValue / Math.abs(finalValue - initialValue);

is only approximately true, although that is probably good enough for your purpose.