JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>

JavaScript

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb,
});

document.body.appendChild(app.view);

// We stop Pixi ticker using stop() function because autoStart = false does NOT stop the shared ticker:
// doc: http://pixijs.download/release/docs/PIXI.Application.html
//app.ticker.stop();

// Now, we use 'tick' from gsap


const container = new PIXI.Container();

app.stage.addChild(container);

const url = 'https://s3.ap-south-1.amazonaws.com/invideo-images/istock_video_1616151982118.mp4';
// Create a new texture

const sprite = PIXI.Sprite.from(url);

sprite.width = 400;
sprite.height = 250;
app.stage.addChild(sprite);

gsap.ticker.add(() => {
    app.ticker.update();
 });


/* // Move container to the center
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;

// Center bunny sprite in local container coordinates
container.pivot.x = container.width / 2;
container.pivot.y = container.height / 2; */

/* // Listen for animate update
app.ticker.add((delta) => {
    // rotate the container!
    // use delta to create frame-independent transform
    container.rotation -= 0.01 * delta;
});
 */