Learn PIXIJS-ANIMATION with Real Code Examples
Updated Nov 26, 2025
Code Sample Descriptions
1
Simple PixiJS Animation Example 1
# pixijs/demo/App1.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
</head>
<body>
<script>
const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)
const graphics = new PIXI.Graphics()
graphics.beginFill(0xff0000)
graphics.drawRect(0, 0, 100, 100)
graphics.endFill()
app.stage.addChild(graphics)
let x = 0
app.ticker.add(() => {
x += 2
graphics.x = x % app.renderer.width
})
</script>
</body>
</html>
A basic PixiJS example animating a red square moving across the screen
2
Simple PixiJS Animation Example 2
# pixijs/demo/App2.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
</head>
<body>
<script>
const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)
const circle = new PIXI.Graphics()
circle.beginFill(0x00ff00)
circle.drawCircle(0, 0, 50)
circle.endFill()
circle.x = 100
circle.y = 100
app.stage.addChild(circle)
let vx = 3, vy = 2
app.ticker.add(() => {
circle.x += vx
circle.y += vy
if(circle.x > 800 || circle.x < 0) vx *= -1
if(circle.y > 600 || circle.y < 0) vy *= -1
})
</script>
</body>
</html>
A PixiJS animation with a bouncing circle
3
Simple PixiJS Animation Example 3
# pixijs/demo/App3.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
</head>
<body>
<script>
const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)
const rect = new PIXI.Graphics()
rect.beginFill(0x0000ff)
rect.drawRect(-50, -50, 100, 100)
rect.endFill()
rect.x = 400
rect.y = 300
app.stage.addChild(rect)
app.ticker.add(() => { rect.rotation += 0.05 })
</script>
</body>
</html>
A PixiJS animation rotating a rectangle continuously
4
Simple PixiJS Animation Example 4
# pixijs/demo/App4.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
</head>
<body>
<script>
const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)
const squares = []
for(let i=0;i<5;i++) {
const sq = new PIXI.Graphics()
sq.beginFill(Math.random()*0xffffff)
sq.drawRect(0,0,50,50)
sq.endFill()
sq.x = i*150
sq.y = 0
app.stage.addChild(sq)
squares.push(sq)
}
app.ticker.add(() => {
squares.forEach(sq => {
sq.y += 2
if(sq.y > 600) sq.y = 0
})
})
</script>
</body>
</html>
A PixiJS animation with multiple colored squares falling down
5
Simple PixiJS Animation Example 5
# pixijs/demo/App5.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
</head>
<body>
<script>
const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)
const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png')
sprite.anchor.set(0.5)
sprite.x = 400
sprite.y = 300
app.stage.addChild(sprite)
app.ticker.add(() => { sprite.rotation += 0.05 })
</script>
</body>
</html>
A PixiJS animation spinning a sprite around the center
6
Simple PixiJS Animation Example 6
# pixijs/demo/App6.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
</head>
<body>
<script>
const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)
const circle = new PIXI.Graphics()
circle.beginFill(0xffff00)
circle.drawCircle(0,0,30)
circle.endFill()
circle.x = 0
circle.y = 300
app.stage.addChild(circle)
let t = 0
app.ticker.add(() => {
t += 0.05
circle.x = t * 100
circle.y = 300 + Math.sin(t)*100
})
</script>
</body>
</html>
A PixiJS animation moving a circle along a sine wave
7
Simple PixiJS Animation Example 7
# pixijs/demo/App7.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
</head>
<body>
<script>
const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)
const balls = []
for(let i=0;i<3;i++) {
const b = new PIXI.Graphics()
b.beginFill(Math.random()*0xffffff)
b.drawCircle(0,0,40)
b.endFill()
b.x = i*200 + 100
b.y = 100
app.stage.addChild(b)
balls.push(b)
}
const speed = [2,3,4]
app.ticker.add(() => {
balls.forEach((b,i) => {
b.y += speed[i]
if(b.y>600) b.y = 0
})
})
</script>
</body>
</html>
A PixiJS animation with multiple bouncing balls
8
Simple PixiJS Animation Example 8
# pixijs/demo/App8.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
</head>
<body>
<script>
const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)
const rect = new PIXI.Graphics()
rect.beginFill(0x00ffff)
rect.drawRect(0,0,60,60)
rect.endFill()
rect.x = 0
rect.y = 0
app.stage.addChild(rect)
app.ticker.add(() => {
rect.x += 2
rect.y += 1
if(rect.x>800) rect.x=0
if(rect.y>600) rect.y=0
})
</script>
</body>
</html>
A PixiJS animation moving a rectangle diagonally
9
Simple PixiJS Animation Example 9
# pixijs/demo/App9.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
</head>
<body>
<script>
const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)
const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png')
sprite.anchor.set(0.5)
sprite.x = 400
sprite.y = 300
app.stage.addChild(sprite)
let scale = 1, dir = 0.01
app.ticker.add(() => {
scale += dir
if(scale>2 || scale<0.5) dir*=-1
sprite.scale.set(scale)
})
</script>
</body>
</html>
A PixiJS animation scaling a sprite in and out repeatedly
10
Simple PixiJS Animation Example 10
# pixijs/demo/App10.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
</head>
<body>
<script>
const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)
const rects = []
for(let i=0;i<3;i++) {
const r = new PIXI.Graphics()
r.beginFill(Math.random()*0xffffff)
r.drawRect(-25,-25,50,50)
r.endFill()
r.x = i*200 + 150
r.y = 300
app.stage.addChild(r)
rects.push(r)
}
app.ticker.add(() => {
rects.forEach(r => { r.rotation += 0.03 })
})
</script>
</body>
</html>
A PixiJS animation rotating multiple rectangles independently