# JavaScript: How to make a variable gradually approach a target value at a given speed?

We have `x` which represents an active value, `y` represents the value we want the former to reach (may be decimal and / or negative), `z` describes how fast the former chases the later. The code is ran in an interval and each iteration is meant to get the value of `x` closer to `y` by `z` amount, based on how far ahead or behind the value is to its target. The target value can change to anything else between iterations.

For a simple example: If the current value is 0, the target value we’re interpolating to is 1, while the time would probably be at a default value of 1. The result should look something like this:

```Iteration 0: x = 0
Iteration 1: x = 0.5
Iteration 2: x = 0.75
Iteration 3: x = 0.875
Iteration 4: x = 0.9375
```

`x` never actually reaching 1 is fine since there’s going to be some threshold at which to stop, eg: `if(Math.abs(y - x) < 0.125) x = y`. I primarily have an issue with the math for making x chase after y in a curved manner (slow down the closer it gets). I tried simply using `x = (x + y) / 2` which would smoothly bring the value closer as desired, but I’m not sure how it’s handling negative numbers or where to plug `z` in so I can also control the speed.

You may use this formula for each iteration:

```x += (target - x) * speed;
```

```let x = 0;
let speed = 0.5;
let target = 1;
const THRESHOLD = 0.001;

while(Math.abs(x - target) > THRESHOLD) {
x += (target - x) * speed;
console.log(x);
}```

Here’s an example using this technique:

```let targetX = 0, targetY = 0;
let x = 0, y = 0;
const box = document.querySelector('.box');
let speed = 0.1;

[targetX, targetY] = [x, y];
});

const tick = () => {
x += (targetX - x) * speed;
y += (targetY - y) * speed;
box.style.left = `\${x}px`;
box.style.top = `\${y}px`;
requestAnimationFrame(tick);
}

requestAnimationFrame(tick);```
```body {
height: 100vh;
}

.box {
width: 4px;
height: 4px;
background-color: red;
position: absolute;
}```
`<div class="box"></div>`