How can this be implemented in Pixi? The cube rotation as given above.
I tried this
const app = new PIXI.Application({
width: 800,
height: 600,
backgroundColor: 0x1099bb,
});
document.body.appendChild(app.view);
// Create a new texture
const texture1 = PIXI.Texture.from('https://s.cdpn.io/33073/1-150x150.jpg');
const texture2 = PIXI.Texture.from('https://s.cdpn.io/33073/2-150x150.jpg');
const texture3 = PIXI.Texture.from('https://s.cdpn.io/33073/3-150x150.jpg');
const texture4 = PIXI.Texture.from('https://s.cdpn.io/33073/4-150x150.jpg');
const texture5 = PIXI.Texture.from('https://s.cdpn.io/33073/5-150x150.jpg');
const texture6 = PIXI.Texture.from('https://s.cdpn.io/33073/6-150x150.jpg');
// time animation in seconds
const time = 2.0;
const cont = new PIXI.Container();
const parentCont = new PIXI.Container();
const bunny1 = new PIXI.Sprite(texture1);
const bunny2 = new PIXI.Sprite(texture2);
const bunny3 = new PIXI.Sprite(texture3);
const bunny4 = new PIXI.Sprite(texture4);
const bunny5 = new PIXI.Sprite(texture5);
const bunny6 = new PIXI.Sprite(texture6);
cont.addChild(bunny1);
cont.addChild(bunny2);
cont.addChild(bunny3);
cont.addChild(bunny4);
cont.addChild(bunny5);
cont.addChild(bunny6);
parentCont.addChild(cont);
app.stage.addChild(parentCont);
parentCont.x = 500;
parentCont.y = 300;
var tl3 = new gsap.timeline({paused:true}),
tl4 = new gsap.timeline({paused:true}),
face1 = bunny1,
face2 =bunny2,
face3 =bunny3,
face4 =bunny4,
face5 =bunny5,
face6 =bunny6,
cubeParent = cont;
gsap.set(parentCont, {pixi:{perspective:500}});
gsap.set(cubeParent , {transformStyle:"preserve-3d"});
tl4
.to(cubeParent , 5, {pixi: {rotationY:720}})
.to(cubeParent , 2, {pixi: {rotationX:360}}, "-=2.5")
.to(cubeParent , 1, {pixi: {rotationY:-360, rotationX:0}});
but this doesn't seem to work
