Easy animations in your HTML

Introduction

I'm a big fan of declaring as much as possible in the markup. The ability to instantly see what's happening is most readable in my opinion.

Frameworks like Vue or Alpinejs gained a lot of traction because of the composition of JavaScript in the markup. Another booming name is Tailwind CSS that allows us to declare our styles in the markup. But what do we do when we want great animations? We probably install something like GSAP. Not anymore!

What is AnimXYZ and why should you care

There is a new toolkit on the block. Meet AnimXYZ. A composable CSS animation toolkit. All you have to do is install it and add a simpel attribute to your html.

Guess what this will do:

<div class="square xyz-in" xyz="fade-25% rotate-right-50%"></div>

The square will fade and rotate to the right when the element appears.

Another example with a group of elements that chain their animations.

See the Pen AnimXYZ by Marten West (@martenwest) on CodePen.

• Your animations are composable right in the markup
• You can customize the variables if the defaults aren't enough
• You don't have to write keyframes
• Really easy to start with

Conclusion

I like it when my markup tells me what it does. Animxyz helps me with this. It's easy to learn and easy to work with. It took me only a couple of minutes to install and create the Codepen example. Try it out yourself. Love to see what crazy animations your can make in just a couple of minutes.