AnimXYZ is a composable CSS animation library for front-end developers and designers building sites in Vue, React, SCSS, or plain CSS who want to create custom motion without hand-writing keyframes.

What it is

AnimXYZ is an MIT-licensed CSS animation framework published as the @animxyz/core npm package, with companion component packages for Vue and React. Its animations are driven entirely by CSS variables, which is what makes them composable: rather than shipping a fixed catalogue of named effects, you adjust variables to produce what the project describes as a nearly limitless number of unique animations without writing a single keyframe. The same class-based interface covers both directions, with xyz-in bringing an element in and xyz-out reversing the direction to animate it out.

The concrete problem it addresses is the repetitive, low-control work of writing and maintaining keyframe blocks by hand every time a designer wants an element to fade and shrink in from above, or to move differently on another screen. With AnimXYZ, that variation is expressed by changing classes and variable values, so animation behaviour stays inspectable and adjustable rather than buried in bespoke @keyframes rules scattered across a stylesheet. It lives in the CSS front-end ecosystem, and replaces hand-authored keyframe definitions as the unit of animation authoring.

Key capabilities

• Composes animations from CSS variables, so a single set of base animations yields many distinct results without new keyframes.
• Ships as @animxyz/core, installable with npm install @animxyz/core or yarn add @animxyz/core, and importable as import '@animxyz/core' in a Webpack project using css-loader.
• Works in a SASS project through @import '@animxyz/core'; with the granular mixins @include xyz-all;, @include xyz-core;, and @include xyz-utilities; for controlling how much of the library is emitted.
• Direction control through the xyz-in and xyz-out classes, reversing an animation by changing the class alone.
• Provides dedicated Vue and React component packages alongside the core CSS, recommended for projects in those frameworks.
• Can be loaded directly from a CDN through a jsDelivr `` tag, with no build step required.
• Offers documentation for creating, customising, and composing animations at animxyz.com/docs.

Who uses it and how

• Front-end developers adding entrance and exit motion to marketing sites and page elements by placing classes on markup rather than authoring keyframes.
• Vue projects that install the core package plus the AnimXYZ Vue component for declarative animation in templates.
• React projects that pair @animxyz/core with the AnimXYZ React component.
• Design-system or SASS-based teams that import the library through @import '@animxyz/core'; and selectively emit xyz-core and xyz-utilities to keep their output tight.
• Sites without a JavaScript build pipeline that drop the jsDelivr CDN link into index.html and animate with classes immediately.

Getting started

Install the core package with npm install @animxyz/core (or yarn add @animxyz/core) and import it as import '@animxyz/core' in your JavaScript, or add the jsDelivr CDN link to the `` of index.html for a no-build setup.

How it compares

AnimXYZ stands alone in this registry: the project facts do not name comparable animation libraries, so no direct contrast with other tools can be drawn from them.

When to use it — and when not

There is no server-side infrastructure to operate — no database, storage, or SMTP — since the library is CSS and optional framework components, making it a lightweight addition to an existing front-end stack. It is a poor fit for projects that need JavaScript-driven scroll or timeline orchestration, since the facts describe only CSS-variable-driven class-based animations, and the 42 open issues suggest some rough edges remain despite the active last push. Developers wanting a single pre-built animation preset rather than a composable variable system may find the configuration surface more than they need.

<div class="xyz-in" xyz="fade up big">I will animate in!</div>

<div class="xyz-out" xyz="fade up big">I will animate out!</div>

# with npm
npm install @animxyz/core

# with yarn
yarn add @animxyz/core

import '@animxyz/core'

// Import the functions/mixins
@import '@animxyz/core';

// Add all the core/utilities selectors
@include xyz-all;
// --- Or for more control and granularity ---
@include xyz-core;
@include xyz-utilities;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core">