Learn ANIMXYZ with Real Code Examples
Updated Nov 26, 2025
Code Sample Descriptions
1
Simple AnimXYZ Animation
# animxyz/demo/index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/animxyz@1.0.0/dist/animxyz.js"></script>
</head>
<body>
<div class="xyz-in xyz-fade-in-up" style="width:100px;height:100px;background:red;"></div>
</body>
</html>
A basic AnimXYZ example that animates a div element with a fade-in and scale-up effect.
2
AnimXYZ Slide In Left
# animxyz/demo/slide_left.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/animxyz@1.0.0/dist/animxyz.js"></script>
</head>
<body>
<div class="xyz-in xyz-slide-left" style="width:100px;height:100px;background:blue;"></div>
</body>
</html>
A div that slides in from the left using AnimXYZ.
3
AnimXYZ Rotate In
# animxyz/demo/rotate_in.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/animxyz@1.0.0/dist/animxyz.js"></script>
</head>
<body>
<div class="xyz-in xyz-rotate-in" style="width:100px;height:100px;background:green;"></div>
</body>
</html>
Rotates a div into view.
4
AnimXYZ Fade Out
# animxyz/demo/fade_out.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/animxyz@1.0.0/dist/animxyz.js"></script>
</head>
<body>
<div class="xyz-out xyz-fade-out" style="width:100px;height:100px;background:orange;"></div>
</body>
</html>
Fades a div out of view.
5
AnimXYZ Flip In
# animxyz/demo/flip_in.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/animxyz@1.0.0/dist/animxyz.js"></script>
</head>
<body>
<div class="xyz-in xyz-flip-in" style="width:100px;height:100px;background:purple;"></div>
</body>
</html>
Flips a div into view.
6
AnimXYZ Scale Up
# animxyz/demo/scale_up.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/animxyz@1.0.0/dist/animxyz.js"></script>
</head>
<body>
<div class="xyz-in xyz-scale-up" style="width:100px;height:100px;background:yellow;"></div>
</body>
</html>
Scales a div up on entering view.
7
AnimXYZ Slide Up Fade
# animxyz/demo/slide_up_fade.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/animxyz@1.0.0/dist/animxyz.js"></script>
</head>
<body>
<div class="xyz-in xyz-fade-in-up" style="width:100px;height:100px;background:pink;"></div>
</body>
</html>
Slides a div up while fading in.
8
AnimXYZ Spin In
# animxyz/demo/spin_in.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/animxyz@1.0.0/dist/animxyz.js"></script>
</head>
<body>
<div class="xyz-in xyz-spin-in" style="width:100px;height:100px;background:brown;"></div>
</body>
</html>
Spins a div into view from 0 to 360 degrees.
9
AnimXYZ Staggered Animation
# animxyz/demo/staggered.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/animxyz@1.0.0/dist/animxyz.js"></script>
</head>
<body>
<div class="xyz-in xyz-fade-in-up xyz-stagger" style="width:50px;height:50px;background:red;margin:5px;"></div>
<div class="xyz-in xyz-fade-in-up xyz-stagger" style="width:50px;height:50px;background:blue;margin:5px;"></div>
<div class="xyz-in xyz-fade-in-up xyz-stagger" style="width:50px;height:50px;background:green;margin:5px;"></div>
</body>
</html>
Animates multiple divs with staggered delay.
10
AnimXYZ Bounce In
# animxyz/demo/bounce_in.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/animxyz@1.0.0/dist/animxyz.js"></script>
</head>
<body>
<div class="xyz-in xyz-bounce-in" style="width:100px;height:100px;background:cyan;"></div>
</body>
</html>
Makes a div bounce into view.