Correct way of zooming into pseudo space with objects using an input slider

Question

I am trying to zoom into those objects using a slider. Unfortunately, the bigger the distance from the nearest to deepest object, the faster the slide happens. How can control this behaviour so that the slide appears smooth?

What I tried: debouncing the handler and giving the circles a transition.

Here is a snippet:

 const input = document.querySelector("input"); const circles = document.querySelectorAll(".circle"); let firstDepth = 9300; let secondDepth = 100; let thirdDepth = 2; const initialSize = 0.0001; circles[0].style.transform = "scale(" + (firstDepth * initialSize) + ")"; circles[1].style.transform = "scale(" + (secondDepth * initialSize) + ")"; circles[2].style.transform = "scale(" + (thirdDepth * initialSize) + ")"; input.addEventListener("input", function() { //console.log(1) circles[0].style.transform = "scale(" + firstDepth * input.value + ")"; circles[1].style.transform = "scale(" + secondDepth * input.value + ")"; circles[2].style.transform = "scale(" + thirdDepth * input.value + ")"; })

 .circle { width: 100px; height: 100px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border-radius: 100%; }.first:nth-of-type(1) { border: 2px solid red; }.second:nth-of-type(2) { border: 2px solid orange; }.third:nth-of-type(3) { border: 2px solid green; }

 <input type="range" value="0.0001" step="any" min="0.0001" max="1"> <div class="circle first"></div> <div class="circle second"></div> <div class="circle third"></div>

Answer 1

You would want an effect where an increase of the slide value with d would multiply the scale with some m , so that if you slide with 2d , you get a relative scaling with m ² .

So, ... you need a transformation of input.value where that value appears in an exponent. In other words: the scale should increase exponentially in terms of the value of the slider.

Given that you want to see the first circle completely when the slider is at the left (scaling with initialSize ) and the third circle completely when the slider is at the right, you can derive the following formula for that transformation:

initialSize * (firstDepth / thirdDepth) ** (input.value - initialSize);

Here is the code adapted to that:

 const input = document.querySelector("input"); const circles = document.querySelectorAll(".circle"); let firstDepth = 9300; let secondDepth = 100; let thirdDepth = 2; const initialSize = 0.0001; circles[0].style.transform = "scale(" + (firstDepth * initialSize) + ")"; circles[1].style.transform = "scale(" + (secondDepth * initialSize) + ")"; circles[2].style.transform = "scale(" + (thirdDepth * initialSize) + ")"; input.addEventListener("input", function() { let coeff = initialSize * (firstDepth / thirdDepth) ** (input.value - initialSize); circles[0].style.transform = "scale(" + firstDepth * coeff + ")"; circles[1].style.transform = "scale(" + secondDepth * coeff + ")"; circles[2].style.transform = "scale(" + thirdDepth * coeff + ")"; })

 .circle { width: 100px; height: 100px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border-radius: 100%; }.first:nth-of-type(1) { border: 2px solid red; }.second:nth-of-type(2) { border: 2px solid orange; }.third:nth-of-type(3) { border: 2px solid green; }

 <input type="range" value="0.0001" step="any" min="0.0001" max="1"> <div class="circle first"></div> <div class="circle second"></div> <div class="circle third"></div>