Scroll an ion-scroll smooth

ion-scroll-smooth.js

/**
HTML

<ion-scroll #mapScroll scrollX="true" zoom="true" scrollY="true" >

    <img #image   alt="loading.." src="https;//placehold.it/1000x1000">

  </ion-scroll>
  
  
*/

@ViewChild('mapScroll') mapScroll: any


....

    easeInOutCubic (t: number) {
        /*
         * Easing Functions - inspired from http://gizma.com/easing/
         * only considering the t value for the range [0, 1] => [0, 1]
         * https://gist.github.com/gre/1650294
         */
        return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1
    }

    scroll(x: number,y:number) {

        // create an animation 
        const fps = 120; // Frames per second.. consider using good value depending on your device
        const duration = 300; //animation duration in ms
      
        const frameLength = Math.floor(duration/fps);
        const frames = Math.floor(duration/frameLength);

        const fromX = this.mapScroll._scrollContent.nativeElement.scrollLeft;
        const fromY = this.mapScroll._scrollContent.nativeElement.scrollTop;
        const diffX = x - fromX;
        const diffY = y - fromY;


        const stepScrollX = diffX/frames;
        const stepScrollY = diffY/frames;



        let i = 0;
        let interval = setInterval(() => {
            i++
            const scrollToX = fromX + (i * stepScrollX * this.easeInOutCubic(i/frames) );
            const scrollToY = fromY + (i * stepScrollY * this.easeInOutCubic(i/frames) );
            this.mapScroll._scrollContent.nativeElement.scroll( scrollToX , scrollToY)
            if (i >= frames) {
                clearInterval(interval);
            }
        }, frameLength)

    }