Animate Your React App with AnimXYZ

What Makes AnimXYZ Different

AnimXYZ is a composable CSS animation toolkit that makes creating complex animations simple by combining utility classes. Unlike traditional animation libraries that provide predefined animations like "bounce" or "slide," AnimXYZ gives you building blocks to craft custom animations that fit your exact needs.

The library uses a unique approach where you combine simple utilities in a space-separated string to create sophisticated animations without writing custom keyframes. Each utility handles a specific aspect of the animation--fade, translate, rotate, scale, timing--allowing you to mix and match for endless possibilities. This composable approach aligns well with modern web development practices that prioritize modular, maintainable code.

Whether you're building a marketing website, dashboard, or complex web application, AnimXYZ provides the animation primitives you need to create polished user experiences without the overhead of heavier animation libraries. Our web development services help you implement the right animation strategy for your specific needs.

Installing AnimXYZ in Your React Project

Getting started with AnimXYZ is straightforward. Install the React package via npm or yarn, then import the core CSS and React components into your application.

npm install @animxyz/react
# or
yarn add @animxyz/react

Basic Setup:

import '@animxyz/core'
import { XyzTransition, XyzTransitionGroup } from '@animxyz/react'

The core package provides the CSS utilities, while the React package includes the transition components for seamless integration with React's component model. This modular architecture keeps your bundle size minimal while giving you access to powerful animation capabilities.

Core Concepts: The xyz Attribute

The xyz attribute is the heart of AnimXYZ. It accepts a space-separated string of utility classes that define how an element should animate. Combined with active classes, you have complete control over enter and exit animations. This approach aligns with modern CSS architecture patterns that emphasize composability and maintainability.

Active Classes

AnimXYZ animations are controlled through three active classes:

Simple Example

<div 
 className="xyz-in" 
 xyz="fade small"
>
 I'll fade in and scale up!
</div>

This simple combination tells the element to fade from opacity 0 and scale from 50% when it receives the xyz-in class. The elegance of this approach lies in its predictability--once you understand the utility classes, you can compose any animation intuitively.

Creating Page Transitions

The XyzTransition component wraps your page content and handles enter/exit animations automatically based on route changes. The mode prop controls how enter and exit animations play together.

import { XyzTransition } from '@animxyz/react'

function PageWrapper({ children, location }) {
 return (
 <XyzTransition
 appear={true}
 xyz="fade ease-out-back duration-5"
 mode="outin"
 >
 <div key={location.pathname}>
 {children}
 </div>
 </XyzTransition>
 )
}

Transition Modes

• outin: Exit old content before entering new content (smooth, but slower)
• inout: Enter new content while old content exits (faster)
• together: Both enter and exit simultaneously

Page transitions are a powerful tool for creating engaging user experiences. When combined with proper routing patterns, they help users maintain context as they navigate through your application.

Animated Modal Dialogs

Modals benefit greatly from well-designed animations. Using in and out variants, you can create different animations for opening versus closing the modal.

function Modal({ isOpen, onClose, children }) {
 return (
 <XyzTransition
 appear={true}
 xyz="fade origin-center duration-3"
 mode={isOpen ? 'inout' : 'outin'}
 >
 <div className="modal-overlay" onClick={onClose}>
 <div 
 className="modal-content xyz-out" 
 xyz="up big out-down-5"
 onClick={e => e.stopPropagation()}
 >
 {children}
 </div>
 </div>
 </XyzTransition>
 )
}

The modal content uses up big when appearing (coming from above and scaling up) but out-down-5 when exiting (sliding down significantly). This creates a natural, engaging interaction that guides user attention without being distracting.

Staggered List Animations

One of AnimXYZ's most powerful features is the stagger utility. When applied to a parent with the xyz-nested class, it automatically delays each child's animation by their index.

import { XyzTransitionGroup } from '@animxyz/react'

function TodoList({ items }) {
 return (
 <ul className="todo-list xyz-nested" xyz="fade up stagger-2">
 <XyzTransitionGroup appear={false} mode="outin">
 {items.map(item => (
 <li key={item.id} className="todo-item xyz-in">
 {item.text}
 </li>
 ))}
 </XyzTransitionGroup>
 </ul>
 )
}

Key Points:

• Parent has xyz-nested class to trigger child animations
• stagger-2 adds 200ms delay between each child's animation
• Works with both enter and exit animations
• Automatically handles the first 20 children by nth-child index

Staggered animations are particularly effective for dashboards, data tables, and card grids where you want to draw attention to content progressively rather than all at once. When building complex React applications, these animations help guide user attention through data-dense interfaces.

Advanced: Custom CSS Variables

When utilities aren't flexible enough, you can override them with CSS custom properties directly. This gives you precise control over every aspect of the animation.

<div 
 className="xyz-in" 
 xyz="fade"
 style={{
 '--xyz-rotate-z': '45deg',
 '--xyz-scale-x': '1.5',
 '--xyz-scale-y': '0.5',
 '--xyz-duration': '0.8s',
 '--xyz-ease': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
 }}
>
 Custom rotation and scale!
</div>

Common Variables:

This level of control makes AnimXYZ suitable for creating branded animations that match your design system's specific timing and easing requirements. Consistent animation patterns contribute to a polished user experience that builds trust and engagement with your audience.

Sources

1. AnimXYZ Official Documentation
2. AnimXYZ npm Package
3. LogRocket: Animate a React app with AnimXYZ
4. CSS-Tricks: AnimXYZ