Make zoom images slideshow on canvas - pixi.js

Question

i am trying to making zoomin images slideshow using pixijs on canvas from three images like this
I tried but not succeed. My question in how to add zoomin or zoomout image in pixijs for specific width and height, then second image and so on.
I am writing this code
var pixiapp;
var pixiloader = PIXI.Loader.shared;
initpixiapp();
function initpixiapp() {
pixiapp = new PIXI.Application({ width: 1280, height: 720 });
document.getElementById('canvas-container').appendChild(pixiapp.view);
pixiloader.add('images/img1.png').add('images/img2.png').add('images/img3.png').load(handleimagesload);
}
function handleimagesload() {
var imagessprites=[]
var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture);
var img2 = new PIXI.Sprite(pixiloader.resources['images/img2.png'].texture);
var img3 = new PIXI.Sprite(pixiloader.resources['images/img3.png'].texture);
imagessprites.push(img1)
imagessprites.push(img2)
imagessprites.push(img3);
for (let index = 0; index < imagessprites.length; index++) {
const element = imagessprites[index];
pixiapp.stage.addChild(element);
// here will the the code to run zoom image to specific width and heigth and then move to next image,
// here is my code, its only display zooming third image
var ticker = new PIXI.Ticker();
ticker.add(() => {
console.log('ticker called')
element.width += 1;
element.height += 1;
if(element.width==1500)
{
ticker.stop()
}
})
ticker.start()
}
}
One more things, how to display a box with text for three seconds before slideshow start.

Answer 1

Try something like this:
var pixiapp;
var pixiloader = PIXI.Loader.shared;
initpixiapp();
function initpixiapp() {
pixiapp = new PIXI.Application({ width: 1280, height: 720 });
document.getElementById('canvas-container').appendChild(pixiapp.view);
pixiloader
.add('images/img1.png')
.add('images/img2.png')
.add('images/img3.png')
.load(handleimagesload);
}
function handleimagesload() {
var imagessprites = [];
var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture);
var img2 = new PIXI.Sprite(pixiloader.resources['images/img2.png'].texture);
var img3 = new PIXI.Sprite(pixiloader.resources['images/img3.png'].texture);
imagessprites.push(img1);
imagessprites.push(img2);
imagessprites.push(img3);
// Put first image on stage:
var currentImageIndex = 0;
var currentImage = imagessprites[currentImageIndex];
pixiapp.stage.addChild(currentImage);
var ticker = new PIXI.Ticker();
// Start "main animation loop":
ticker.add(() => {
currentImage.width += 1;
currentImage.height += 1;
if (currentImage.width >= 1500) {
// remove current image from stage:
pixiapp.stage.removeChild(currentImage);
// Move to next image:
// Increase index - but if it reached maximum then go back to 0 (to first image)
currentImageIndex++;
if (currentImageIndex >= imagessprites.length) {
currentImageIndex = 0;
}
currentImage = imagessprites[currentImageIndex];
// Set initial width and height of image (TODO: adjust this)
currentImage.width = 1000;
currentImage.height = 1000;
// put image on stage:
pixiapp.stage.addChild(currentImage);
}
});
ticker.start()
}