AnimXYZ positions itself as "the first composable CSS animation toolkit." Rather than shipping a fixed menu of opinionated effects, it exposes a set of composable pieces you combine until the desired entrance or exit animation emerges.
A builder on the project site produces markup along these lines:
<div
class="square-group"
xyz="tall-2 duration-6 ease-out-back stagger-1 skew-left-2 big-25% fade-50% right-5"
>
<div class="square xyz-out"></div>
<div class="square xyz-out"></div>
<div class="square xyz-out"></div>
</div>Replacing the xyz-out class with xyz-in plays the reverse animation.
Attributes Instead of Classes
AnimXYZ drives its animations through custom HTML attributes such as xyz and its modifiers. That choice carries some risk: although web standards are unlikely to claim xyz as an attribute name, heavy production adoption would permanently close that door, and the pattern tends to spread to other libraries.
The attribute values read a lot like Tailwind's utility vocabulary. That comparison matters for payload size. A Tailwind build strips unused classes with PurgeCSS, serving only a small fraction of the framework's full class set. AnimXYZ's processed stylesheet comes in at roughly 9.7 kB compressed — more than the figure Tailwind uses as an example on its own marketing page. Had AnimXYZ been built on classes, purging unused ones would likely be far more direct, shrinking the output to something close to negligible. The framework-specific JavaScript integrations may handle this more cleverly.
Customization and Tooling
Size concerns aside, the toolkit earns its keep. Sensible defaults remain highly composable, and CSS Custom Properties give complete control over the result.
The site's XYZ-ray button, in the lower-right corner, reveals which animations are driving which elements; the same feature appears in the docs, which are worth a look.
There is an appeal to declarative animation in general, the same quality that makes Framer Motion's approach pleasant to work with.
