AnimXYZ animations are disabled if your browser or OS has reduced motion setting turned on. Learn more here.

XYZ-ray Off

The first composable
CSS animation toolkit.

GitHub
Try it out
Documentation

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%;

Plug & Play

Works with HTML and CSS, or use our Vue and React integrations for even more power.

Nest & Stagger

Stagger lists of elements in both forward and reverse order, while animating nested items in sync with their parents.

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.

AnimXYZ is used by:

<div class="item-group" xyz="fade">
  <div class="square xyz-out"></div>
  <div class="square xyz-out"></div>
  <div class="square xyz-out"></div>
</div>