Testcase showing off <ratio> interpolation per-component or by-value

http://software.hixie.ch/utilities/js/live-dom-viewer/saved/7963

```html
<!DOCTYPE html>
<div id='two-values'>Interpolating the two values separately</div>
<div id='one-value'>Interpolating the division result</div>
<div id='separate'>Interpolating width and height</div>
<style>
div {
  width: 500px;
  height: 100px;
  border: solid;
  margin: 1em;
}
body { display: grid; grid-template-columns: repeat(3, 1fr); }
</style>
<script>
function go() {
 const one = document.querySelector('#one-value');
 const two = document.querySelector('#two-values');
 const three = document.querySelector('#separate');
 const duration = 5; // seconds each way
 let progress = (Date.now()/1000) % (duration * 2);
 let interp = progress < duration ? progress/duration : 1 - (progress
- 5)/duration;
 const width = linearInterp(500, 300, interp);
 three.style.width = two.style.width = one.style.width = width + "px";
 two.style.height = width / (linearInterp(5, 3, interp) /
linearInterp(1, 2, interp)) + "px";
 one.style.height = width / linearInterp(5/1, 3/2, interp) + "px";
 three.style.height = linearInterp(100, 200, interp) + "px";

 requestAnimationFrame(go);
}
go();


function linearInterp(v1, v2, p) {
  return v1*(1-p) + v2*p;
}
</script>
```

Received on Wednesday, 15 April 2020 20:51:00 UTC