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-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.
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.