Make zoom images slideshow on canvas pixijs

[atta chaudhury]

i am trying to making zoomin images slideshow using pixijs on canvas from three images below 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.

[ivan.popelyshev]

Hello, and welcome to the forums!

Looks like a general JS problem. Someone will help you with code, I'm sure

My two bits:

1. you can just add handler to pixiapp.ticker and remove it afterwards , instead of creating new one. IT doesnt matter in your case, but I want to make sure you know about that option

2. store images in array, store current image in a variable. 

3. Usually scale is not by width/height, its by "scale" parameter and its exponential. Read up what "element.scale" is.

4. Usually people use tweens for that kind of stuff. Praise GSAP ( https://pixijs.io/examples/#/gsap3-interaction/gsap3-basic.js , google GSAP) . Its  totally fine to write on your own first, because you need to understand how such things work.

 

[atta chaudhury]

Using gsap solved my problem, another little thing how can a display a box(100x100) with text on this slideshow

Edited February 25, 2020 by atta chaudhury

[ivan.popelyshev]

Regular pixi text or one of advanced plugins, something was mentioned in one of latest threads... I dont remember which one

[atta chaudhury]

Thanks,