I made a small project in Fabri.js . In this project user can upload a image on canvas and start zoom in and zoom out on mouse wheel rotate by user. The maximum zoom out is 1. If the user reach the maximum zoom out point which is 1 then the image is get back to its original position. But I am facing the problem is that if the user can zoom in at one point and then zoom out at some other point on the canvas the image reaches to the original position but it reaches there with a jerk at the end. I need some transition smooth so that image reach to its original position without any jerk.

This is full code:

const canvas = new fabric.Canvas("canvas",{
    width:700,
    height:450,
    backgroundColor:"grey"
    // selection:false
});


var zoom=0;
canvas.on('mouse:wheel', function(opt) {
    var delta = opt.e.deltaY;
    // console.log(delta)
    zoom = canvas.getZoom();
    // console.log(zoom)
    zoom *= 0.999 ** delta;
    if (zoom > 40) zoom = 40;
    if (zoom < 1) zoom = 1;
    canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
    opt.e.preventDefault();
    opt.e.stopPropagation();

    //image back to its origanal position
    var vpt = this.viewportTransform;
    if (zoom === 1) {
      vpt[4] = 0;
      vpt[5] = 0;
    }   
});

canvas.renderAll();

//get image from user
var upload_image="";

const image = document.querySelector("#image"); 

image.addEventListener("change",()=>{
    const reader = new FileReader();
    // console.log(reader)
    reader.addEventListener("load",()=>{
        upload_image=reader.result;
    })
    reader.readAsDataURL(image.files[0]);
});

//set image on the canvas 
const setImage =() =>{
  fabric.Image.fromURL(upload_image,(img)=>{
    canvas.backgroundImage=img;
    canvas.viewportCenterObject(img);
    canvas.renderAll();
});
}