There are quite a few CSS animation libraries. They tend to be a pile of class names that you can apply as needed like “bounce” or “slide-right” and it’ll… do those things. They tend to be pretty opinionated with nice defaults, and not particularly designed around customization.
It looks like AnimXYZ is designed to be highly customizable, calling itself “the first composable CSS animation toolkit.”
You use as many of the different composable bits as you need to get the in/out animation you want. Play with their builder and you’ll see output like:
<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>
The class name xyz-out
becomes xyz-in
to trigger the opposite animation.
I don’t love it when libraries use made up HTML attributes to control themselves. It’s unlikely that web standards will use xyz
in the future, but who knows, and if this goes on enough production sites, that door is closed forever. But worse, it encourages other libraries to do the same.
All those attribute values are reminiscent of Tailwind. To use Tailwind effectively, the build process runs PurgeCSS to remove all unused classes, which will serve a tiny fraction of the complete set of classes Tailwind offers. I think of that because the processed stylesheet of AnimXYZ is ~9.7 kB compressed, which is larger than the file size Tailwind uses as an example on their marketing page. The point being, if classes were used, there would probably be a more straightforward way of purging the unused classes, which I bet would make the size almost negligible. Perhaps the JavaScript framework-specific usage is more clever.
But those criticisms aside, it’s cool! Not only are there smart defaults that are highly composable, you have 100% control via CSS Custom Properties.
Don’t miss the XYZ-ray button on the lower right of the website that lets you see what animations are powering what elements. It’s also on the docs which are super nice.
There is just something nice about declarative animations. I remember chatting with Matt Perry about Framer Motion and enjoying its approach.
Wow! My brother and I created AnimXYZ and it is so amazing to see our work on CSS Tricks, thank you! It’s our first open source library and we are really excited to keep improving it based on feedback like this.
One of the first things we are going to address is file size. Hopefully using something like PurgeCSS. We also will provide a CSS build without the utilities so you can use the core logic with CSS variables alone.
We have heard from a few people they would prefer the attribute to be
data-xyz
for HTML validation, and we plan to allow that in the future.Thanks again for sharing AnimXYZ with the CSS Tricks community, and we can’t wait to hear what people think and see how they use it!
You should also try metro4, it has very good components and also some animations. It is faster and lighter than jquery
I had someone write to me telling me the demo in this post didn’t work for them at all. Turns out with some troubleshooting, it was the macOS setting for “Reduced Motion”. The library implements that nicely:
We had a few people say the animations on the website weren’t working, so we added an alert in the docs if we detect you have reduced motion turned on.