Give additional "tween delta" property to custom easing functions?

[jessegrosjean]

I use spring easing in for my animations. But the distances that I'm animating things very greatly. For example I'm using animations to "expand" and "collapse" branches in an outline. This issues is that there's no single easing function that works for all values in a nice way. In particular if the branch is really big then the "bounce" effect becomes much to large. On the other hand if I boost the friction up, then the bounce effect isn't noticeable when expand/collapsing smaller branches.

Because of this I'd like some way to dynamically calculate the easing function based on the tween values. For example if I'm animating a value from 0 to 100 then I'll leave in the default spring function. But if I'm animation a value from 0 to 1000 I would like to boost the friction value a bit so that the bounce effect doesn't reach cartoon proportions.

Right now I'm doing what I want by modifying Velocity.js as shown below (see OLD vrs NEW)

Does that make sense? Or is there a better way to solve this problem.

if (percentComplete === 1) {
    currentValue = tween.endValue;
/* Otherwise, calculate currentValue based on the current delta from startValue. */
} else {
   // OLD currentValue = tween.startValue + ((tween.endValue - tween.startValue) * easing(percentComplete));

    // NEW
    var tweenDistance = (tween.endValue - tween.startValue);
    currentValue = tween.startValue + (tweenDistance * easing(percentComplete, tweenDistance));

    /* If no value change is occurring, don't proceed with DOM updating. */
    if (!firstTick && (currentValue === tween.currentValue)) {
        continue;
    }
}

Here's my custom easing function (as described above), might help explain what I'm trying to do:

Velocity.Easings.birchEasing = function(p, tweenDistance) {
    tweenDistance = Math.abs(tweenDistance);

    var tension = 1.5,
        friction = 7;

    if (tweenDistance > MaxSpringDistance) {
        var over = Math.abs(tweenDistance / MaxSpringDistance);
        if (over > 1) {
            friction += over * 0.1;
            if (friction > 20) {
                friction = 20;
            }
        }
    }

    return 1 - (Math.cos(p * tension * Math.PI) * Math.exp(-p * friction));
}

Here's a rough demo:

http://codepen.io/anon/pen/bNBayR

Note that when the first (red) paragraph is collapsed the physics are OK... meaning they are not to much of a distraction. On the other handle when the second (green) paragraph collapses the bounce is just to much.

Both animations use the same easing function, it's just that the distance (height) being animated is different. And while the spring physics are consistent between the two, the results are not really desirable. I don't want my user to a bounce as big as in the second green case even if it is consistent spring physics, it's just to distracting.

So my idea for a fix is to pass in an additional tweenDistance into the easing function. And have the function adjust it's internal physics parameters based on that. In my example when the tween distance is larger then more friction is added (I don't know much about spring physics... maybe that "friction" label is wrong, but it seemed to do what I wanted :)).

In this example nothing is getting fixed because Velocity hasn't been modified (as described in my first post) to pass in that tween value, so that logic is being skipped. But if it was, then the second case should have a less distracting animation I think.

Hope that helps.

[julianshapiro]

I'll be integrating this in tonight's release. Stay tuned for commit log.