linear function but with a falloff?

[mart-martinlofqvist]

Hi! 

I'm using linear() for everything. It's my most common trick and I find it tremendously useful. But one thing I'm always missing is how to set it up so a have a falloff when the values end. Like this:

I have a 4 custom sliders each going from 0-100 driving some kind of animation. I then have a master slider also going from 0-100 that I want to drive ALL these four sliders in one go, for easier and more fluid setup. 

If I here use linear() on each custom slider mapping 0-100 to 0-25 increments on the master slider, the value stays at 100 when the master slider goes past. 
What I'm looking for is a way to use linear() but also have falloff range. 

What's the best way to achieve this? 

[Dan Ebberts]

It's probably trickier than you might guess. It depends on what's going to drive the falloff. If it's a fixed amount of time that occurs after 100 is reached, the expression has to look back in time to figure out when that limit was reached. If it can be driven by the current value of the master slider that's easier, but could be problematic for the slider that's covering the final segment of the master.

[mart-martinlofqvist]

Thanks Dan! I see. Was hoping there was some other function or trick I had missed....

I solved this particular case by subtracting the next slider values from the current one. Perhaps subtracting is the best and easiest way to go...

[Mathias Moehl]

One thing which can be handy in such a situation is a linear, which is not clipping, i.e. goes also above 100 or below 0.

Here is an implementation for you:

// linear function that in contrast to the build in linear
// does not clip at vMin and vMax
function myLinear(t,tMin,tMax,vMin,vMax) {
    if(tMax< tMin){
        var temp = tMax;
        tMax=tMin;
        tMin=temp;
        temp=vMax;
        vMax=vMin;
        vMin=temp;
        }
    var result = vMin;
    if(tMin==tMax){
        result = vMin;
        }
    else {
    result= vMin+( (t-tMin)/(tMax-tMin))*(vMax-vMin);
        }
    return result;
}

Then you can check if it is above 100 already, and if so, you can apply your fade out logic.

You could, for example, insert this before returning the result:

if (result > 100) result = linear(result, 100, 200, 100, 0);

Now instead of counting from 100 to 200, it counts back from 100 to 0 again (and then stays there). You can also use EaseIn or Ease, for example.

[mart-martinlofqvist]

Thank you Mathias! I just discovered your answer. I will try to implement it, looks promising!