Extrem ruckeliges Verändern der Fenstergröße verhindern --> flüssige Animation!

Hallo!
Entwickle derzeit eine Chrome-App und es läuft eigentlich echt ganz gut, nur da besteht ein kleines Problem. An einer Stelle möchte ich das aktive Fenster vergrößern / verkleinern in der Breite, aber das läuft mit einem slider (input type="range") extrem unrund!
Chrome-Extension zum herunterladen und anschauen: https://drive.google.com/file/…kMHdSbG8/edit?usp=sharing
In der App könnt ihr das unten beschriebene Problem mal anschauen, damit ihr wisst was ich meine. Schaut euch den Unterschied an zwischen manuellem Fenster größer kleiner machen und dem Slider..

Relevanter Code:

<input id="viewsize" type="range" min="350" max="1300" value="400" step="1">

var slider = document.getElementById("viewsize");
    slider.oninput = function () {
        window.resizeTo( slider.value, 400 );
    };

Wie könnte man das Chrome-App-Fenster elegant größer und kleiner werden lassen?

Vielen Dank im Voraus!

Wie sollte das gehen? CSS transitions beziehen sich auf HTML Elemente, ich verändere aber das Fenster an sich ... Aber ich könnte mal probieren HTML/body ne transition zu geben, damit es nicht ruckartig expandiert bei vergrößertem Fenster..

Sonst ne Idee?

Hey!
Fehler gefunden!

Wenn sich das Fenster durch den Slider in der Größe verändert, ändert sich die Position des Sliders und es werden permanent neue Werte übergeben anstatt schrittweise die Größe verändert. Verstehst du wie ich das meine?

Mal schauen wie ich das löse! Wenn der Slider starr an der linken Seite steht funktioniert es nämlich gut

wolf: cottton: (Habe nochmal editiert falls ihr es nicht gesehen haben solltet... )

Das Problem ist, dass wenn man das Fenster vergrößert/verkleinert die rechte Kante des Fensters verschoben wird. -> Mit zentrieren wird das nichts, da es das zentrierte so immer weiter nach rechts wegschiebt beim vergrößern

Nur wenn es dauerhaft in der linken Ecke fixiert ist aber das schaut sehr doof aus. Wenn ich das Fenster doch nur fixieren könnte, damit es sich gleichmäßig nach rechts und links vergrößert/verkleinert ...

*EDIT:*

window.moveTo(
            screen.width/2 - window.innerWidth/2,
            screen.height/2 - window.innerHeight/2
        );

Hab damit mal rumgespielt während der Slider in der Mitte ist .. mit dem Ziel das Fenster ist immer exakt in der mitte und der slider bleibt auch in der Mitte .. leider keine so tollen Resultate .. zwar besser aber immer noch laggy...

* EDIT 2:*

var THROTTLE_TIME = 200,
    _iThrottleTimeout;
//--
    slider.oninput = function () {
        clearTimeout(_iThrottleTimeout);
        _iThrottleTimeout = setTimeout( function() {
            document.getElementById("currentValue").innerText = slider.value; 
            window.resizeTo( slider.value, 400 );
            window.moveTo(
                screen.width/2 - window.innerWidth/2,
                screen.height*0.2
            );
        }, THROTTLE_TIME);
    };

Das funktioniert, aber leider nicht so ganz toll. Läuft eben nicht soo flüssig. --> https://docs.google.com/file/d…kNjxeYktNNmhfNm1EUTA/edit