JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.7/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/pixi-filters.js"></script>
<!-- <img src="https://lyfter.nl/app/uploads/2020/07/Lyfter-klein.jpg"> -->

SCSS

body {
  margin: 0;
  
}

JavaScript

const loader = new PIXI.Loader(); // you can also create your own if you want
const app = new PIXI.Application({ backgroundColor: 0x1099bb });
document.body.appendChild(app.view);


loader
	.add('https://images.unsplash.com/photo-1575886876783-ea3cbbc8204d')
  .add('https://images.unsplash.com/photo-1542744173-8e7e53415bb0')
  .load(handleimagesload);


function handleimagesload() {
    var imagessprites=[]
    var img1 = new PIXI.Sprite(loader.resources['https://images.unsplash.com/photo-1575886876783-ea3cbbc8204d'].texture);
    var img2 = new PIXI.Sprite(loader.resources['https://images.unsplash.com/photo-1542744173-8e7e53415bb0'].texture);
    imagessprites.push(img1)
    imagessprites.push(img2)

    for (let index = 0; index < imagessprites.length; index++) {
        const element = imagessprites[index];
        app.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() */
    }
}

/* 
//const image = PIXI.Sprite.from('https://images.unsplash.com/photo-1542744173-8e7e53415bb0');
const image = PIXI.Sprite.from('https://images.unsplash.com/photo-1575886876783-ea3cbbc8204d');

image.anchor.set(0.5);
image.x = app.screen.width / 2;
image.y = app.screen.height / 2;
image.width =  app.screen.width;
image.height =  app.screen.height;

app.stage.addChild(image);

const crtFilter = new PIXI.filters.CRTFilter;
const glitchFilter = new PIXI.filters.GlitchFilter;

app.stage.filters = [crtFilter, glitchFilter]; */