Transition effect while changing texture images

Greetings! I have been studying for the last days WebGL and libraries such as pixi.js and twgl.js, which I am currently using in order to create a sliding gallery for my photography website. I am also applying a Depth Map (fake 3D) effect to every image. I have successfully managed to apply this effect to several images by changing the texture source. However, I would like to add a simple transition effect to them just like you would do with CSS, adding a margin and then animating the property so that the image "comes from the right", for example. How is it possible to do this? There is a website called gl-transitions.com but it provides no explanation as to how you install their transitions.

I would really like to be able to do something like that, because changing the images directly is not very aesthetic and sometimes it also renders a blue background for a brief moment before rendering the image. This is the code snippet which actually does the changing of the texture, as well as the rendering function:

Code (JavaScript):

1. document.getElementById("btn").addEventListener("click", function(){
2.                 imNum++;
3.                 originalTexture = twgl.createTexture(gl, {
4.                         src: images[imNum], crossOrigin: '',
5.                     });
6.                 mapTexture = twgl.createTexture(gl, {
7.                         src: depths[imNum], crossOrigin: '',
8.                     });
9.                 requestAnimationFrame(render);
10.             });
11.          
12.           requestAnimationFrame(render);
13.          
14.           function render() {
15.            
16.             twgl.resizeCanvasToDisplaySize(gl.canvas);
17.  
18.             gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
19.  
20.             gl.clearColor(0, 0, 0, 0);
21.             gl.clear(gl.COLOR_BUFFER_BIT);
22.  
23.             gl.useProgram(programInfo.program);
24.  
25.             // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
26.             twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
27.  
28.             const canvasAspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
29.             const imageAspect = originalImage.width / originalImage.height;
30.             let scaleX;
31.               let scaleY;
32.               scaleY = 1;
33.               scaleX = imageAspect / canvasAspect;
34.               if (scaleX < 1) {
35.                 scaleY = 1 / scaleX;
36.                 scaleX = 1;
37.               }
38.  
39.             const mat = m3.scaling(imageAspect / canvasAspect, -1);
40.                
41.                 nMouse[0] += (mouse[0] - nMouse[0]) * 0.05;
42.                 nMouse[1] += (mouse[1] - nMouse[1]) * 0.05;
43.                    
44.             // calls gl.activeTexture, gl.bindTexture, gl.uniformXXX
45.             twgl.setUniforms(programInfo, {
46.               u_matrix: [
47.                   scaleX, 0, 0,
48.                   0, -scaleY, 0,
49.                   0, 0, 1
50.                 ],
51.               u_originalImage: originalTexture,
52.               u_mapImage: mapTexture,
53.               u_mouse: nMouse,
54.             });
55.                
56.             // calls gl.drawArrays or gl.drawElements
57.             twgl.drawBufferInfo(gl, bufferInfo);
58.            
59.             requestAnimationFrame(render);
60.           }        

I could have actually used a DIV with multiple images, but I think it is much more complex to render WebGL into a div and not to a canvas, even though it might have been much easier to keep the rest of the HTML with its associated CSS intact. Any help would be much appreciated and thank you in advance for the read.