The first composable
CSS animation toolkit.
AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless number of unique animations without writing a single keyframe. Save time and have complete control over how your elements move. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
Composable
Making an animation is as simple as describing it in words. Combine a fade with a scale and drop it
from the top! xyz="fade small up"
Customizable
Out-of-the-box utilities not enough? Fine-tune any animation with CSS variables to your heart's
content. Simple as: --xyz-translate-y: 42%;
Performant
Silky smooth animations out of the box. Only 2.68kB for base functionality and
11.4kB if you include convenient utilities.
Less Code
Powerful CSS animations without custom keyframes for every subtle animation need. Less fuss = more fun.
Nest & Stagger
Stagger lists of elements in both forward and reverse order, while animating nested items in sync with their parents.
Plug & Play
Works with HTML and CSS, or use our Vue and React (coming soon!) plugins for even more power.
AnimXYZ is used by:
<div class="square-group" xyz="fade">
<div class="square xyz-out"></div>
<div class="square xyz-out"></div>
<div class="square xyz-out"></div>
</div>