Worlds First Composable CSS Animation Toolkit For React, Vue & Plain HTML & CSS — AnimXYZ

What is AnimXYZ?

AnimXYZ is a CSS Animation library for creating custom CSS animations for your website. What makes AnimXYZ so good is that it is composable this means you can combine and mix different animations to create your own highly customizable CSS animations without having to write a single keyframe or as the creators of AnimXYZ say

“Making an animation is as simple as describing it in words”

For example, you can create an animation that fades, scales up and moves up with AnimXYZ by writing xyz="fade big up". AnimXYZ also comes in a small package size 2.68kB for the base functionalities and 11.4kb if you include convenient utilities.

fade big up

Customizability

AnimXYZ is powered by CSS variables, AnimXYZ allows you to override any of the CSS variables for further customization/control of the animations and almost a limitless number of custom animations. You can edit an AnimXYZ CSS variable by selecting the element with the xyz attribute in your CSS and changing the value of one the defined AnimXYZ variables like this

.my-class-name {
  --xyz-opacity: 0.5;
}

All AnimXYZ variables are prefixed with xyz at the beginning and then is usually followed by CSS property name that it will effect there are variables for in, out & overall (in and out) the --xyz-opacity is an overall variable. There are a lot of defined variables to learn more about them click here.

Nested Animations

AnimXYZ supports nested animations this allows us to animate multiple elements if we wrap them in our animation element (the element with xyz attribute). A nested animation looks something like this.

<div class="my-class-name" xyz="fade">
  <div class="xyz-in">Hello</div>
  <div class="xyz-in">Hello</div>
  <div class="xyz-in">Hello</div>
</div>

This will make all elements wrapped is the .my-name-element fade in at the same time.

Nested animation

Stagger animations

If we didn't want the nested animation to happen all at the same time we are in luck because AnimXYZ also supports staggering animations this means if we have a nested animation we can make each element arrive/leave one after the other. We can do this by adding stagger to the xyz attribute this will make the animation stagger from left to right we can also reverse the stagger by using stagger-rev so it will now stagger from right to left.

Stagger animation

Links

• AnimXYZ.com — To learn more about AnimXYZ
• AnimXYZ Docs — To start using AnimXYZ
• milesingram.me — One of the creators of AnimXYZ