# AnimXYZ: Composable CSS Animations Without Writing Keyframes > AnimXYZ drives CSS animations from a single xyz attribute and CSS variables, with framework packages for Vue and React. Here is how the mechanism works, how to install the core package, and where the approach stops being the right tool. **ingram-projects/animxyz** — The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life. - Repository: https://github.com/ingram-projects/animxyz - Website: https://animxyz.com - Stars: 2,497 · Forks: 62 - Language: CSS - License: MIT - Published: 2026-09-28 · Updated: 2026-09-28 · Language: en - Canonical page: https://hysenlabs.com/projects/ingram-projects-animxyz ## The problem AnimXYZ targets: animation declared in markup, not in keyframes Most CSS animation work starts with an author writing @keyframes blocks and then wiring classes to them. Every new motion is another keyframe set, and combining two effects means writing a third keyframe set that contains both. AnimXYZ takes the other route. The README states that the library is powered by CSS variables, which allows what it calls a nearly limitless number of unique animations without writing a single keyframe. The author composes motion from named modifiers instead. The README gives this as the basic example: a div carrying the class xyz-in and the attribute xyz="fade up big" fades and shrinks the element in from above. Changing the class to xyz-out reverses the direction. That is the whole authoring surface for a simple case. No keyframes, no per-element CSS file, no JavaScript call. This suits people who build component libraries or marketing pages where many elements share a small vocabulary of motion (fade, up, big, and their combinations) and where the same vocabulary must be applied consistently across a Vue, React or plain HTML codebase. It suits them less if each element needs bespoke timing curves that no modifier set expresses. ## How the xyz attribute and CSS variables compose an animation The mechanism visible in the README is a two-part split. The class xyz-in or xyz-out selects the direction of the animation, while the xyz attribute carries a space-separated list of modifier names. The library ships core and utilities selectors, and the SCSS entry point exposes them as mixins: xyz-all adds everything, or you can include xyz-core and xyz-utilities separately for finer control. Because the modifiers are read through CSS variables rather than baked into fixed keyframes, the same selectors can produce different results depending on which modifiers are present. That is what makes composition possible at all: the animation is assembled from independent pieces at the level of the cascade, not authored as a whole. The trade-off is that the resulting motion is only as expressive as the modifier vocabulary the library defines. Anything outside that vocabulary means dropping back to hand-written CSS alongside it. The repository is a monorepo. The root package.json declares workspaces for packages/*, examples/*, site and tests/*, and the build is orchestrated by turbo. The examples directory contains react, vue and vue3 subdirectories, so the framework integrations are demonstrated in-repo rather than only in prose. The published packages are versioned through Changesets, with a changeset script, a version-packages script and a release script that runs the turbo build before changeset publish. ## Installing @animxyz/core and animating your first element The README documents installation through a package manager, a CDN link, or SCSS imports. The npm route is the one most projects will take. ```bash npm install @animxyz/core ``` After installation the README says you must import AnimXYZ into your project. In a Webpack project that uses css-loader, the import goes anywhere in your JavaScript: ```js import '@animxyz/core' ``` The README does not describe what a bundler without css-loader should do instead, so if your toolchain cannot import CSS from JavaScript you are left with the CDN or SCSS routes. For a SASS project the README shows importing the functions and mixins, then including the selectors: ```scss @import '@animxyz/core'; @include xyz-all; // --- Or for more control and granularity --- @include xyz-core; @include xyz-utilities; ``` The CDN route is a single link tag in the head of index.html: ```html ``` With the stylesheet in place, a first real use is the example the README opens with. The element carries xyz-in and an xyz attribute listing the modifiers you want: ```html
I will animate in!
``` You should see the element fade and shrink in from above. Swapping the class to xyz-out reverses the direction, which the README presents as the same element animating out. ## The Vue and React packages are separate installs, and the README does not cover them The core package is framework-agnostic CSS. The README is explicit that if you use AnimXYZ in a Vue or React project, the project strongly recommends also using the AnimXYZ components, and it points to the Vue and React installation sections of the documentation site rather than reproducing them. The npm releases confirm three framework packages exist: @animxyz/vue, @animxyz/vue3 and @animxyz/react, all published at 0.6.9 on 2026-07-27. This is the first place a reader should slow down. The README alone is not enough to wire the framework components. It gives the core install completely and defers the component install to animxyz.com. A team evaluating the library from the repository will need the documentation site open at the same time. Note also that Vue 2 and Vue 3 are separate packages rather than one package with a compatibility layer. A project migrating from Vue 2 to Vue 3 has to change which package it depends on. The examples directory mirrors this with vue and vue3 subdirectories side by side. ## Where AnimXYZ is the wrong choice The library animates through CSS variables. That is the source of its composability and also its boundary. Any environment that does not resolve CSS variables will not animate, and the README does not document a fallback path for such browsers. The repository does carry a .browserslistrc file, so the supported target range is defined in the codebase, but the README does not translate that file into a stated support matrix. Check the file before promising animation to an audience on old browsers. The second boundary is the nature of the motion. AnimXYZ composes entrance and exit effects from a fixed modifier vocabulary. It is not a timeline engine. If your design calls for an element to move through several waypoints in sequence, or for animation progress to be driven by scroll position or by a gesture, the xyz attribute model has nothing to say about that. You would be writing keyframes or reaching for a JavaScript animation runtime anyway, and at that point AnimXYZ is an extra dependency rather than a simplification. The README describes the library as helping you create, customize and compose animations, and the examples it gives are all in and out transitions. Treat that as the intended scope. A third practical limit: the README does not document rollback or removal. Uninstalling the package and dropping the imports is obvious enough, but nothing in the README tells you what happens to markup that still carries xyz attributes and xyz-in classes once the stylesheet is gone. ## AnimXYZ compared with an imperative animation library The natural alternative for teams needing sequenced or scroll-driven motion is a JavaScript animation runtime that animates elements imperatively, with a timeline API. The difference in approach is where the animation lives. With AnimXYZ the declaration sits in the markup as an attribute and the browser's CSS engine runs it; with a timeline library the animation is a JavaScript object, and the library writes styles frame by frame. That difference decides the trade. A JavaScript runtime can express sequences, pauses and scroll-linked progress, and it can compute values at runtime from measured element positions. AnimXYZ cannot, because its inputs are static modifier names resolved through CSS variables. In exchange, AnimXYZ adds no JavaScript execution cost per animated element and no runtime bundle for the animation itself, and its animations are declared where the element is declared, which keeps component templates readable. The README's example, one div with one attribute, is the clearest statement of that advantage. For a component library that needs consistent fade and slide transitions, the CSS route is the lighter one. For a scroll story or a multi-step choreography, the imperative route is the only one of the two that fits. ## Licence, maintenance and the cost of upgrading AnimXYZ is MIT licensed, both in the repository metadata and in the LICENSE file at the top level. MIT permits use, modification and redistribution with the licence and copyright notice retained. That is a permissive starting point for commercial products, but it is not legal advice; if your organisation has specific obligations around attribution in distributed bundles, confirm them with your own counsel. On maintenance, the last push to the repository was on 2026-09-27, and the most recent published packages, @animxyz/vue, @animxyz/vue3 and @animxyz/react at 0.6.9, were released on 2026-07-27. The repository is not archived. The version numbers are worth reading carefully: 0.6.9 is a pre-1.0 release line, so the maintainers have not declared a stable API. Upgrading within 0.x can carry breaking changes by convention, and the CHANGELOG.md at the top level is where those would be recorded. The upgrade mechanism is Changesets, visible in the root package.json scripts: changeset, version-packages and release, where release runs the turbo build and then changeset publish. For a consumer this matters only in that releases are batched and versioned deliberately rather than pushed ad hoc. There is also a modernization-plan.md at the top level, which suggests the maintainers have a stated direction for the codebase; it is not summarised in the README, so read it directly if you are deciding whether to depend on the current package layout. ## Conclusion Adopt AnimXYZ when you want entrance and exit motion declared in markup, and you are willing to accept the browser support of CSS variables. Skip it if you need scroll-linked timelines or keyframe-level choreography, where a JavaScript animation runtime fits better. Before committing, check the Vue and React package installation pages on animxyz.com against your framework version, and confirm the browser targets in .browserslistrc match the browsers you must support. ## FAQ ### What is AnimXYZ and what is it for? AnimXYZ is a composable CSS animation library for Vue, React, SCSS and plain CSS. It lets you create and combine animations by putting modifier names in an xyz attribute on an element, without writing keyframes. ### How do I install AnimXYZ? Install the core package with npm install @animxyz/core or yarn add @animxyz/core, then import it into your project. Webpack projects with css-loader can use import '@animxyz/core', SASS projects import it and include the xyz-all mixin, and there is also a jsDelivr link tag for plain HTML. ### Do I need separate packages for Vue and React? Yes. The README says that for Vue or React projects it strongly recommends also using the AnimXYZ components, and points to the Vue and React installation sections on animxyz.com rather than covering them in the README. The published packages include @animxyz/vue, @animxyz/vue3 and @animxyz/react. ### How do I reverse an AnimXYZ animation? Change the class from xyz-in to xyz-out. The README shows the same element with xyz="fade up big" animating in with xyz-in and animating out with xyz-out. ### What licence does AnimXYZ use? AnimXYZ is MIT licensed, as stated in the repository metadata and the LICENSE file. The licence permits use, modification and redistribution provided the licence and copyright notice are retained. ## Sources - [ingram-projects/animxyz on GitHub](https://github.com/ingram-projects/animxyz) - [License: MIT](https://github.com/ingram-projects/animxyz/blob/master/LICENSE) - [Project website](https://animxyz.com) - [README](https://github.com/ingram-projects/animxyz/blob/master/README.md) - [Releases](https://github.com/ingram-projects/animxyz/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/ingram-projects-animxyz