Create Custom Easing using Javascript

Question

I am trying to create a custom easing function and I am experiencing a few difficulties. In other words, the maths is confusing me...

I would like my function to increment the width of a some elements within my page, and the increment value needs to decrease as the index of the element increases.

Consider these values:

50, 150, 230, 280, 310, 330

Whilst I appreciate it is likely to be impossible to generate these exact values, I essentially want a function that will come close to those values.

Here is what I have so far:

$('.something').each(function(i){
    var scale = Math.round(30*(i/10)*(2-(i/10)));
    dimension = scale*dimension;
    console.log(dimension);
});

This may be extremely easy but I am struggling to get my head around the maths today so any help would be much appreciated

Check this: http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm — c-smile, Jan 14 '16 at 18:39
@c-smile I think that page is more confusing than doing it manually... — Ben Carey, Jan 14 '16 at 18:45
Just put there normalized values (in range 0.0...1.0) and you will get easing function. In fact your numbers are of trivial easeOutQuad from here: https://github.com/danro/jquery-easing/blob/master/jquery.easing.js — c-smile, Jan 14 '16 at 18:53

score 3 · Accepted Answer · answered Jan 14 '16 at 20:45

Here's a live demo that shows how you can use a quadratic ease-out function to achieve a curve similar to the one you describe.

var out = document.getElementById("output");

// t: current time, b: beginning value, c: change in value, d: duration

function easeOutQuad(t, b, c, d) {
  return -c *(t/=d)*(t-2) + b;
}

for (var i = 0; i < 1; i+=0.1) {
  out.innerHTML += Math.round(easeOutQuad(i, 50, 280, 1)) + "<br>";
}

<div id="output"></div>

Shout-out to @c-smile for linking the jQuery easeOutQuad function in the comments, which this demo is based on.

Sorry for the delay, I have been playing around with this. I have tried to implement it with easeOutCubic as I reckon this is more suited to what I need but instead the numbers ended up decreasing some reason. I am trying to make the numbers get closer together towards the end... — Ben Carey, Jan 15 '16 at 18:36

score 0 · Answer 2 · answered Nov 04 '16 at 17:01

You could look through the Easing Functions Generator by Robert Penner. It may be very useful for creating custom easing functions:

// generated example
function(t, b, c, d) {
    var ts=(t/=d)*t;
    var tc=ts*t;
    return b+c*(63.2425*tc*ts + -185.23*ts*ts + 198.58*tc + -93.89*ts + 18.2975*t);
};

Create Custom Easing using Javascript

2 Answers2