Ben Carey - 29 days ago 8

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

Answer

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.

Source (Stackoverflow)

Comments