Jump to content
Search Community

himanshu negi

Members

  • Posts

    2

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

himanshu negi's Achievements

0

Reputation

  1. himanshu negi
    i have put two images but the issue is that both images will be loaded at same time. so animation of first image will be hide due to overlappping of second image.here my code please help me <!doctype html> <html> <head> <title>Pixi</title> </head> <style> body{ background-color: #CB9805; } </style> <body> <canvas id="c"></canvas> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.3/pixi.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/PixiPlugin.min.js"></script> <script>// Rendering using PIXI var app = new PIXI.Application(700, 700, { view: document.getElementById("c") }); // Animating using GSAP var tl = new TimelineMax(); //tl.to(rect, 1, { // pixi: { // x: 200, // rotation:270 // } //} ,1) // create a new Sprite from an image path var bunny = PIXI.Sprite.fromImage('layer1.jpg') app.stage.addChild(bunny); tl.to(bunny, 1, { pixi: { x: 200, autoAlpha: 1 } },0.1) tl.to(bunny, 1, { pixi: { autoAlpha: 0 } },1) var bunny2 = PIXI.Sprite.fromImage('layer2.jpg') app.stage.addChild(bunny2); tl.to(bunny2, 1, { pixi: { x: 200, autoAlpha: 1 } }, 1) tl.to(bunny2, 4, { pixi: { x: 700, autoAlpha: 0 } },1); </script> </html>
  2. himanshu negi
    how we use pixi.js to animate different images on canvas using tween-max. index.html
×
×
  • Create New...