Scalar.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
         #avatar {position:relative;top:120px;left:120px;transform:scale(3);}
    </style>
    <script>
        function Scaler(elementId, minScale, maxScale, deltaScale, direction, deltaMsecs) {
            var scale = (1 == direction)?minScale:maxScale;
            var timer = null;

            function incrementScale() {
                var s = scale + deltaScale*direction;
                if (s < minScale || s > maxScale) direction *= -1;
                return scale += deltaScale*direction;
            };
            function doScale(s) {
                document.getElementById(elementId).style.transform = 'scale(' + s + ')';
            };

            this.getDeltaMsecs = function() {return deltaMsecs;};
            this.setTimer = function(t) {timer = t;};

            this.run = function() {doScale(incrementScale());};
            this.stop = function() {
                clearInterval(timer);
                this.setTimer(null);
            };
        };

        var scaler = new Scaler('avatar', 3, 6, .05, 1, 50);

        function toggleScaler(ref) {
            if ('run scaler' == ref.value) {
                ref.value = 'stop scaler';
                scaler.setTimer(setInterval('scaler.run()', scaler.getDeltaMsecs()));
            }
            else {
                scaler.stop();
                ref.value = 'run scaler';
            }
        };
    </script>
</head>
<body>
    <h1>demo the upscaling/downscaling of an image</h>
    <form>
        <input type="button" value="run scaler" onclick="toggleScaler(this);"></input>
    </form>
    <p id="out">
        <img id="avatar" src="https://i.stack.imgur.com/I8wAV.png?s=48&amp;g=1" alt="">
    </p>
</body>
</html>