Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Profile Information

  • Gender

bj22's Achievements



  1. Thanks all, I already have a threejs rotating cube working in Pixi stage. I wanted to check if i can do this with gsap but i understand it now where i have gone wrong. Jack's 3rd point gives me more idea. I was trying to create a cube with gsap as given in the thread.
  2. 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