himanshu negi
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by himanshu negi
-
-
how we use pixi.js to animate different images on canvas using tween-max.
how we use pixi.js to animate different images on canvas using tween-max.
Images animation on canvas using pixijs & greenshok
in GSAP
Posted
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>