### Install ReactAnimXYZ with yarn

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-installation.md

Use this command to install ReactAnimXYZ via yarn.

```bash
# with yarn
yarn add @animxyz/react
```

--------------------------------

### Install AnimXYZ with yarn

Source: https://github.com/ingram-projects/animxyz/blob/master/README.md

Install the core AnimXYZ package using yarn.

```bash
# with yarn
yarn add @animxyz/core
```

--------------------------------

### Install ReactAnimXYZ with npm

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-installation.md

Use this command to install ReactAnimXYZ via npm.

```bash
# with npm
npm install @animxyz/react
```

--------------------------------

### HTML Example with Utilities

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/utilities.md

Demonstrates how to apply utility classes directly in HTML for animation effects.

```html
<div class="item-group" ${data.utilitiesString && `xyz="${data.utilitiesString}"
```

```html
<div class="square ${data.mode}"></div>
            <div class="square ${data.mode}"></div>
            <div class="square ${data.mode}"></div>
```

--------------------------------

### Install AnimXYZ with npm

Source: https://github.com/ingram-projects/animxyz/blob/master/README.md

Install the core AnimXYZ package using npm.

```bash
# with npm
npm install @animxyz/core
```

--------------------------------

### HTML Example with Direction

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/direction.md

Demonstrates how to apply direction utilities to an HTML element. Includes optional styling for variables.

```html
##html
<div class="square ${data.mode}" xyz="big iterate-infinite duration-10${data.utilitiesString && ' ' + data.utilitiesString}"></div>

          ${data.variablesString && `
          <style>
            .square { ${data.variablesString} }
          </style>
          `}
```

--------------------------------

### Vue Example with TransitionGroup

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/utilities.md

Shows how to use XyzTransitionGroup in Vue.js with utility classes for animating multiple elements.

```vue
<XyzTransitionGroup class="item-group" ${data.utilitiesString && `xyz="${data.utilitiesString}"
```

```vue
<div class="square" v-if="${data.toggled}"></div>
            <div class="square" v-if="${data.toggled}"></div>
            <div class="square" v-if="${data.toggled}"></div>
```

--------------------------------

### React Example with TransitionGroup

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/utilities.md

Illustrates using XyzTransitionGroup in React with utility classes for animating multiple elements.

```jsx
<XyzTransitionGroup className="item-group" ${data.utilitiesString && `xyz="${data.utilitiesString}"
```

```jsx
{${data.toggled} && <div className="square" />} 
            {${data.toggled} && <div className="square" />} 
            {${data.toggled} && <div className="square" />}
```

--------------------------------

### Direction Variation Example

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/active-classes.md

Demonstrates how to apply different animations for entering and exiting elements using direction-specific XYZ utilities. This example shows a fade-in with left slide and rotation, and a fade-out with right slide and rotation.

```html
<div class="square ${data.mode}" xyz="fade up in-left in-rotate-left out-right out-rotate-right"></div>
```

```vue
<XyzTransition xyz="fade up in-left in-rotate-left out-right out-rotate-right">
  <div class="square" v-if="${data.toggled}"></div>
</XyzTransition>
```

```jsx
<XyzTransition xyz="fade up in-left in-rotate-left out-right out-rotate-right">
  {${data.toggled} && <div className="square" />}
</XyzTransition>
```

--------------------------------

### Core AnimXYZ Keyframes and Animation Setup

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/how-it-works.md

This CSS demonstrates the core keyframe animation 'xyz-keyframes' and the setup for 'xyz-in' and 'xyz-out' classes. It uses CSS variables for animation properties like opacity, transform, and duration.

```css
@keyframes xyz-keyframes {
  from {
    opacity: var(--xyz-opacity);
    transform: translate3d(
      var(--xyz-translate-x),
      var(--xyz-translate-y),
      var(--xyz-translate-z)
    );
  }
}

.xyz-in, .xyz-out {
  animation-name: xyz-keyframes;
  animation-duration: var(--xyz-duration);
}

.xyz-in {
  animation-direction: forwards;
}

.xyz-out {
  animation-direction: reverse;
}
```

--------------------------------

### React Example with Direction

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/direction.md

Illustrates the use of direction utilities in a React component. Handles conditional rendering and optional CSS variables.

```jsx
##jsx
<XyzTransition xyz="big iterate-infinite duration-10${data.utilitiesString && ' ' + data.utilitiesString}">
  {${data.toggled} && <div className="square" />}
</XyzTransition>

          ${data.variablesString && `
          ##html
<style>
            .square { ${data.variablesString} }
          </style>
          `}
```

--------------------------------

### HTML Example with Timing Utilities

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/timing.md

Demonstrates how to apply timing utilities like fade and rotate-right to an HTML element. Custom CSS variables can also be applied.

```html
##html
<div class="square ${data.mode}" xyz="fade rotate-right-50%${data.utilitiesString && ' ' + data.utilitiesString}"></div>

          ${data.variablesString && `
          <style>
            .square { ${data.variablesString} }
          </style>
          `}
```

--------------------------------

### Direction Override Example

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/active-classes.md

Illustrates how to override default animations for specific directions. This example uses a general fade-in but a more pronounced left slide for entering, and a shorter left slide for exiting.

```html
<div class="square ${data.mode}" xyz="fade left-100% out-left-25%"></div>
```

```vue
<XyzTransition xyz="fade left-100% out-left-25%">
  <div class="square" v-if="${data.toggled}"></div>
</XyzTransition>
```

```jsx
<XyzTransition xyz="fade left-100% out-left-25%">
  {${data.toggled} && <div className="square" />}
</XyzTransition>
```

--------------------------------

### Install AnimXYZ with npm or Yarn

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/installation.md

Use npm or yarn to add the core AnimXYZ package to your project dependencies.

```bash
# with npm
npm install @animxyz/core

# with yarn
yarn add @animxyz/core
```

--------------------------------

### Vue Example with Timing Utilities

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/timing.md

Shows how to use AnimXYZ timing utilities within a Vue.js application. Includes conditional rendering and dynamic style application.

```vue
##vue
<XyzTransition xyz="fade rotate-right-50%${data.utilitiesString && ' ' + data.utilitiesString}">
  <div class="square" v-if="${data.toggled}"></div>
</XyzTransition>

          ${data.variablesString && `
          ##html
<style>
            .square { ${data.variablesString} }
          </style>
          `}
```

--------------------------------

### React Example with Timing Utilities

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/timing.md

Illustrates the use of AnimXYZ timing utilities in a React component. Features conditional rendering and dynamic styling.

```jsx
##jsx
<XyzTransition xyz="fade rotate-right-50%${data.utilitiesString && ' ' + data.utilitiesString}">
  {${data.toggled} && <div className="square" />}
</XyzTransition>

          ${data.variablesString && `
          ##html
<style>
            .square { ${data.variablesString} }
          </style>
          `}
```

--------------------------------

### Vue Example with Direction

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/direction.md

Shows how to use direction utilities within a Vue.js component. Supports conditional rendering and variable styling.

```vue
##vue
<XyzTransition xyz="big iterate-infinite duration-10${data.utilitiesString && ' ' + data.utilitiesString}">
  <div class="square" v-if="${data.toggled}"></div>
</XyzTransition>

          ${data.variablesString && `
          ##html
<style>
            .square { ${data.variablesString} }
          </style>
          `}
```

--------------------------------

### Default Animation Values Example

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/defaults.md

This example demonstrates how to set default animation values using CSS variables at the root level. These defaults apply to all AnimXYZ elements unless overridden.

```html
<div class="example-wrap" style="--xyz-translate-default: 300%; --xyz-ease-default: cubic-bezier(0.175, 0.885, 0.320, 1.275); --xyz-stagger-default: 0.1s;">
  <XyzTransition duration="auto" xyz="fade stagger" v-on="data.listeners">
    <div class="item-group xyz-none" v-if="data.toggled">
      <div class="square xyz-nested" xyz="inherit left"></div>
      <div class="square xyz-nested" xyz="inherit up"></div>
      <div class="square xyz-nested" xyz="inherit down"></div>
    </div>
  </XyzTransition>
</div>
```

--------------------------------

### Fade Animation Example

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/fade.md

Demonstrates the basic fade animation applied to a square element using XyzTransition. This example shows how to integrate fade with Vue's conditional rendering.

```html
<div class="example-wrap">
  <XyzTransition v-xyz="data.utilities" :style="data.variables" v-on="data.listeners">
    <div class="square" v-if="data.toggled"></div>
  </XyzTransition>
</div>
```

```html
##html
<div class="square ${data.mode}" ${data.utilitiesString && `xyz="${data.utilitiesString}"`}></div>

          ${data.variablesString && `
          <style>
            .square { ${data.variablesString} }
          </style>
          `}
```

```vue
##vue
<XyzTransition ${data.utilitiesString && `xyz="${data.utilitiesString}"`}>
  <div class="square" v-if="${data.toggled}"></div>
</XyzTransition>

          ${data.variablesString && `
          ##html
          <style>
            .square { ${data.variablesString} }
          </style>
          `}
```

```jsx
##jsx
<XyzTransition ${data.utilitiesString && `xyz="${data.utilitiesString}"`}>
  {${data.toggled} && <div className="square" />}
</XyzTransition>

          ${data.variablesString && `
          ##html
          <style>
            .square { ${data.variablesString} }
          </style>
          `}
```

--------------------------------

### Example: VW Units for Translation

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/variables.md

Demonstrates using viewport width units (vw) to control the translation distance of an element.

```html
<div class="example-wrap">
  <XyzTransition duration="auto" xyz :style="data.variables" v-on="data.listeners">
    <div class="item-group xyz-none" v-if="data.toggled">
      <div class="square xyz-nested" v-for="index in 3" :key="index"></div>
    </div>
  </XyzTransition>
</div>
```

--------------------------------

### Basic In Animation

Source: https://github.com/ingram-projects/animxyz/blob/master/README.md

Use the 'xyz-in' class with the 'xyz' attribute to animate an element in. This example fades and shrinks the element from above.

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

--------------------------------

### HTML Iterate Example

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/iterate.md

This snippet shows how to apply iterate utilities and variables directly in HTML. It includes conditional styling based on data variables.

```html
<div class="square ${data.mode}" xyz="duration-20 ease-in-out-back flip-up-100%${data.utilitiesString && ' ' + data.utilitiesString}"></div>

          ${data.variablesString && '
          <style>
            .square { ${data.variablesString} }
          </style>
          '}
```

--------------------------------

### Install Vue 2 AnimXYZ with npm or yarn

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-installation.md

Use npm or yarn to add the Vue 2 version of the AnimXYZ package to your project.

```bash
# with npm
npm install @animxyz/vue

# with yarn
yarn add @animxyz/vue
```

--------------------------------

### Install Vue 3 AnimXYZ with npm or yarn

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-installation.md

Use npm or yarn to add the Vue 3 version of the AnimXYZ package to your project.

```bash
# with npm
npm install @animxyz/vue3

# with yarn
yarn add @animxyz/vue3
```

--------------------------------

### HTML Example with Origin Utility

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/origin.md

This HTML snippet demonstrates applying the 'origin-top-right' utility to scale an element from its top-right corner. It also shows how to conditionally apply custom styles via CSS variables.

```html
<div class="square ${data.mode}" xyz="small-100%${data.utilitiesString && ' ' + data.utilitiesString}"></div>

          ${data.variablesString && '
          <style>
            .square { ${data.variablesString} }
          </style>
          '}
```

--------------------------------

### Basic Out Animation

Source: https://github.com/ingram-projects/animxyz/blob/master/README.md

Use the 'xyz-out' class to reverse the direction of an animation. This example animates the element out.

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

--------------------------------

### Key-Based Transitions with XyzTransition

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-xyz-transition.md

Animate element transitions based on a changing key prop using 'out-in' mode. This example demonstrates flip animations with a specified duration and easing.

```javascript
import { XyzTransition } from '@animxyz/react'

const key = ${data.key}

<XyzTransition appear mode="out-in" xyz="flip-up out-flip-down duration-3 ease-out">
  <div className="square" key={key}>{key}</div>
</XyzTransition>
```

--------------------------------

### Mixing Animations and Staggering

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/active-classes.md

Shows how to combine various animations and apply staggering to a group of elements. This example uses fade, up, and stagger for the group, with individual elements having specific in and out animations.

```html
<div class="item-group" xyz="fade up out-down stagger">
  <div class="square ${data.mode}" xyz="inherit out-left out-rotate-left"></div>
  <div class="square ${data.mode}" xyz="inherit out-flip-down"></div>
  <div class="square ${data.mode}" xyz="inherit out-right out-rotate-right"></div>
</div>
```

```vue
<XyzTransitionGroup class="item-group" xyz="fade up out-down stagger">
  <div class="square" v-if="${data.toggled}" xyz="inherit out-left out-rotate-left"></div>
  <div class="square" v-if="${data.toggled}" xyz="inherit out-flip-down"></div>
  <div class="square" v-if="${data.toggled}" xyz="inherit out-right out-rotate-right"></div>
</XyzTransitionGroup>
```

```jsx
<XyzTransitionGroup className="item-group" xyz="fade up out-down stagger">
  {${data.toggled} && <div className="square" xyz="inherit out-left out-rotate-left" />}
  {${data.toggled} && <div className="square" xyz="inherit out-flip-down" />}
  {${data.toggled} && <div className="square" xyz="inherit out-right out-rotate-right" />}
</XyzTransitionGroup>
```

--------------------------------

### React Iterate Example

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/iterate.md

This snippet illustrates the implementation of iterate utilities and variables in a React component. It uses JSX for rendering and conditional logic.

```jsx
<XyzTransition xyz="duration-20 ease-in-out-back flip-up-100%${data.utilitiesString && ' ' + data.utilitiesString}">
            {${data.toggled} && <div className="square" />}
          </XyzTransition>

          ${data.variablesString && '
          ##html
          <style>
            .square { ${data.variablesString} }
          </style>
          '}
```

--------------------------------

### Vue Iterate Example

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/iterate.md

This snippet demonstrates using iterate utilities and variables within a Vue.js application. It conditionally renders an element and applies styles.

```vue
<XyzTransition xyz="duration-20 ease-in-out-back flip-up-100%${data.utilitiesString && ' ' + data.utilitiesString}">
            <div class="square" v-if="${data.toggled}"></div>
          </XyzTransition>

          ${data.variablesString && '
          ##html
          <style>
            .square { ${data.variablesString} }
          </style>
          '}
```

--------------------------------

### HTML with xyz-paused

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/special-classes.md

Demonstrates how to pause animations on elements by adding the 'xyz-paused' class. This example includes various animation properties like duration, stagger, and flip.

```html
<div
  class="example-grid"
  xyz="in-duration-10 out-duration-3 fade rotate-right-3 flip-down origin-bottom stagger-1 out-stagger-rev"
>
  <div
    class="square ${data.mode}${data.paused ? ' xyz-paused' : ''}"
  ></div>
  <div
    class="square ${data.mode}${data.paused ? ' xyz-paused' : ''}"
  ></div>
  <div
    class="square ${data.mode}${data.paused ? ' xyz-paused' : ''}"
  ></div>
  <div
    class="square ${data.mode}${data.paused ? ' xyz-paused' : ''}"
  ></div> 
</div>
```

--------------------------------

### Animating a Grid with Custom Durations and Staggering

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-xyz-transition-group.md

This example demonstrates animating a large grid of elements with custom durations and stagger effects. It utilizes CSS variables for fine-grained control over animation timing.

```javascript
import { XyzTransitionGroup } from '@animxyz/react'
```

```jsx
<XyzTransitionGroup
  className="example-grid"
  xyz="fade small out-back-3"
  duration={2500}
  style={{
    '--xyz-in-stagger': '0.025s',
    '--xyz-out-stagger-rev': '0.025s',
  }}
>
  {${data.toggled} &&
    [...Array(81)].map((_, index) => (
      <div className="square" key={index} style={{ '--xyz-index-rev': Math.random() * 81 }} />
    ))}
</XyzTransitionGroup>
```

--------------------------------

### Basic Dynamic XYZ Transition in Vue

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-dynamic-xyz.md

Use `v-xyz` to dynamically set XYZ utilities for a transition component. This example shows how to conditionally apply 'fade' and 'duration-10' based on a data object.

```javascript
const xyzUtilities = {
  'down': ${data.xyzUtilities && data.xyzUtilities['down']},
  'small': ${data.xyzUtilities && data.xyzUtilities['small']},
  'rotate-right': ${data.xyzUtilities && data.xyzUtilities['rotate-right']},
}
```

```vue
<XyzTransition xyz="fade duration-10" v-xyz="xyzUtilities">
  <div class="square" v-if="${data.toggled}"></div>
</XyzTransition>
```

--------------------------------

### Nested Animations with XyzTransition

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-xyz-transition.md

Animate a container and its children simultaneously. This example uses 'fade' and 'up' animations with staggering for nested elements, setting duration to 'auto'.

```javascript
import { XyzTransition } from '@animxyz/react'

const toggled = ${data.buttonToggled}

<XyzTransition appear duration="auto" xyz="fade up-100% duration-10">
  {toggled && (
    <div className="item-block">
      {[...Array(4)].map((_, index) => (
        <div className="square xyz-nested" xyz="fade small stagger" key={index} />
      ))}
    </div>
  )}
</XyzTransition>
```

--------------------------------

### Animating Elements as They Become Visible

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-xyz-transition-group.md

This example uses the `appearVisible` prop to animate elements only when they scroll into the viewport. It's suitable for animating long lists where only a subset is visible at any time.

```jsx
<div className="scroll-wrap">
  <XyzTransitionGroup appearVisible className="example-grid" xyz="delay-2 fade small rotate-right">
    {[...Array(200)].map((_, index) => (
      <div className="square" key={index} />
    ))}
  </XyzTransitionGroup>
</div>
```

--------------------------------

### React Default Animation Configuration

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/defaults.md

This React.js example shows how to configure default animation values using CSS variables. The styles are applied globally, influencing the 'fade' and 'stagger' animations on the `XyzTransitionGroup` component.

```jsx
<XyzTransitionGroup className="item-group" xyz="fade stagger">
  {${data.toggled} && <div className="square" xyz="inherit left" />}
  {${data.toggled} && <div className="square" xyz="inherit up" />}
  {${data.toggled} && <div className="square" xyz="inherit down" />}
</XyzTransitionGroup>

##html
<style>
  :root {
    --xyz-translate-default: 300%;
    --xyz-ease-default: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    --xyz-stagger-default: 0.1s;
  }
</style>
```

--------------------------------

### Conditional Class for Paused State

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/special-classes.md

This example shows how to conditionally apply the 'xyz-paused' class based on a data property. This allows for dynamic control of animation playback.

```javascript
className={
                  `square ${data.paused ? 'xyz-paused' : ''}`
                }
```

--------------------------------

### Animating Nested Elements with Staggering

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-xyz-transition-group.md

An example of animating nested elements within an XyzTransitionGroup. Each parent item and its nested children receive staggered fade and flip animations.

```javascript
import { XyzTransitionGroup } from '@animxyz/react'

const numElements = ${data.numElements}
```

```jsx
<XyzTransitionGroup
  appear
  duration="auto"
  className="example-grid"
  xyz="fade flip-left origin-left duration-3 appear-stagger"
>
  {[...Array(numElements)].map((_, index) => (
    <div className="item-block" key={index}>
      {[...Array(4)].map((_, subIndex) => (
        <div className="square xyz-nested" xyz="fade small stagger" key={subIndex} />
      ))}
    </div>
  ))}
</XyzTransitionGroup>
```

--------------------------------

### Switching Between Elements Animation

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-xyz-transition.md

Animate transitions when switching between different elements. This example uses 'out-in' mode to animate the exit of the old element before the entrance of the new one, applying fade and directional transitions.

```javascript
const shape = '${data.shapes && data.shapes[data.shapeIndex]}'
```

```vue
<XyzTransition appear mode="out-in">
  <div class="square" xyz="fade left-100%" v-if="shape === 'square'" key="square"></div>
  <div class="circle" xyz="fade up-100%" v-else-if="shape === 'circle'" key="circle"></div>
  <div class="triangle" xyz="fade right-100%" v-else-if="shape === 'triangle'" key="triangle"></div>
</XyzTransition>
```

--------------------------------

### Chat Component Animation (React)

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/practical-examples.md

Animates chat messages in a list using React. Similar to the Vue example, it applies different animations based on the message owner and uses dynamic xyz properties for directional entry.

```jsx
##jsx
<div className="example-wrap">
  <XyzTransitionGroup appear tag="ul" className="chat-list" duration="auto">
    {chatMessages.map((chatMessage) => (
      <li
        className={\`chat-item ${chatMessage.isUser && 'chat-item--user'} 
        key={chatMessage.timestamp}
        xyz={xyz('duration-10 fade appear-front-3 ease-out-back appear-left-0', { left: !chatMessage.isUser, right: chatMessage.isUser })}
      >
        <div className="chat-avatar xyz-nested" xyz="fade small in-delay-3">{ chatMessage.isUser ? '🐤' : '🐔' }</div>
        { chatMessage.text }
      </li>
    ))}
  </XyzTransitionGroup>
  <div className="flex-col mt-l">
    <label htmlFor="chatListInput" className="example-input-label mb-xxs">Say Something!</label>
    <input
      id="chatListInput"
      className="chat-input"
    />
  </div>
</div>
```

--------------------------------

### Dynamic XYZ Animation by Index in Vue

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-dynamic-xyz.md

Apply complex, index-dependent XYZ animations to a list of elements using `v-xyz` with `v-for`. This example demonstrates alternating 'in' and 'out' animations based on the item's index.

```vue
<XyzTransitionGroup class="example-grid">
  <div
    class="square"
    xyz="fade out-small-50% out-duration-30"
    v-xyz="{
    'in-down-50% in-right-50% in-stagger-1': index <= 41,
    'in-up-50% in-left-50% in-stagger-rev-1': index > 41,
    'out-rotate-right-5': index % 2,
    'out-rotate-left-5': (index + 1) % 2,
  }"
    v-if="${data.toggled}"
    v-for="index in 81"
    :key="index"
  ></div>
</XyzTransitionGroup>
```

--------------------------------

### Basic Dynamic XYZ Utilities

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-dynamic-xyz.md

Demonstrates how to use the xyz() helper function to apply dynamic and combined XYZ utilities to a transition component. Useful for conditionally animating elements.

```javascript
import { xyz, XyzTransition } from '@animxyz/react'

const xyzUtilities = {
  'down': ${data.xyzUtilities && data.xyzUtilities['down']},
  'small': ${data.xyzUtilities && data.xyzUtilities['small']},
  'rotate-right': ${data.xyzUtilities && data.xyzUtilities['rotate-right']},
}

```

```jsx
<XyzTransition xyz={xyz('fade duration-10', xyzUtilities)}>
  {${data.toggled} && <div className="square" />}
</XyzTransition>
```

--------------------------------

### CodeSandbox Starter Template for React AnimXYZ

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-installation.md

A CodeSandbox starter template for experimenting with React AnimXYZ.

```js
codesandbox=animxyz-react?overrideEntry=false&buttonTitle=AnimXYZ%20React%20Template
```

--------------------------------

### HTML with xyz-absolute

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/special-classes.md

Demonstrates using 'xyz-absolute' to position elements absolutely during transitions, with separate classes for 'in' and 'out' states.

```html
<div class="example-wrap">
  <div class="square xyz-absolute ${data.toggled ? 'xyz-in' : 'xyz-out'}" xyz="fade up-100%"></div>
  <div class="square xyz-absolute ${data.toggled ? 'xyz-out' : 'xyz-in'}" xyz="fade down-100%"></div>
</div>
```

--------------------------------

### React with xyz-paused

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/special-classes.md

Illustrates pausing animations in React by conditionally applying the 'xyz-paused' class within an XyzTransitionGroup. This example features complex animation properties.

```jsx
<XyzTransitionGroup
  className="example-grid"
  appear
  duration="auto"
  xyz="in-duration-10 out-duration-3 fade rotate-right-3 flip-down origin-bottom stagger-1 out-stagger-rev"
>
  {${data.toggled} &&
    [...Array(4)].map((_, index) => (

```

--------------------------------

### Dynamic XYZ Utilities by Index

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-dynamic-xyz.md

Shows how to apply dynamic and staggered XYZ utilities to a group of elements using their index. Ideal for animating lists or grids where each item has unique animation properties.

```javascript
import { xyz, XyzTransitionGroup } from '@animxyz/react'

```

```jsx
<XyzTransitionGroup className="example-grid">
{[...Array(81)].map((_, index) => (
<div
className="square"
xyz={xyz('fade out-small-50% out-duration-30', {
  'in-down-50% in-right-50% in-stagger-1': index <= 41,
  'in-up-50% in-left-50% in-stagger-rev-1': index > 41,
  'out-rotate-right-5': index % 2,
  'out-rotate-left-5': (index + 1) % 2,
})}
key={index}
/>
))}
</XyzTransitionGroup>
```

--------------------------------

### Animating a List of Elements

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-xyz-transition-group.md

Use XyzTransitionGroup to animate a list of elements appearing and disappearing. This example shows a list of squares with fade and rotation effects.

```javascript
import { XyzTransitionGroup } from '@animxyz/react'

const numElements = ${data.numElements}
```

```jsx
<XyzTransitionGroup appear className="example-grid" xyz="fade small out-down out-rotate-right appear-stagger">
  {[...Array(numElements)].map((_, index) => (
    <div className="square" key={index} />
  ))}
</XyzTransitionGroup>
```

--------------------------------

### Vue with xyz-absolute

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/special-classes.md

Shows how to implement 'xyz-absolute' positioning in Vue using conditional rendering and keys for elements within an XyzTransition.

```vue
<div class="example-wrap">
  <XyzTransition>
    <div class="square xyz-absolute" xyz="fade up-100%" v-if="${data.toggled}" key="1"></div>
    <div class="square xyz-absolute" xyz="fade down-100%" v-if="${!data.toggled}" key="2"></div>
  </XyzTransition>
</div>
```

--------------------------------

### Set XYZ Utility Level Dynamically

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-dynamic-xyz.md

Demonstrates how to dynamically set the level of an XYZ utility, such as 'left-5', by interpolating a variable into the utility string.

```jsx
// Set the utility level dynamically
<div xyz={xyz(`left-${leftTransformUtilityLevel}`)></div>
```

--------------------------------

### Include ReactAnimXYZ via jsDelivr CDN

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-installation.md

Add this script tag to the <head> of your HTML file to include ReactAnimXYZ using the jsDelivr CDN.

```html
<script src="https://cdn.jsdelivr.net/npm/@animxyz/react"></script>
```

--------------------------------

### HTML with xyz-none

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/special-classes.md

Demonstrates how to use the 'xyz-none' class to disable animations on specific elements within a transition group.

```html
<div class="example-wrap">
  <div xyz="fade small-100%">
    <div class="example-grid example-grid-2 xyz-none ${data.mode}">
      <div class="square xyz-nested"></div>
      <div class="square xyz-nested"></div>
      <div class="square xyz-nested"></div>
      <div class="square xyz-nested"></div>
    </div>
  </div>
</div>
```

--------------------------------

### Basic Animation Context

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/contexts.md

Demonstrates a basic animation context using the `xyz` attribute on a parent element. This applies 'fade' and 'rotate-right' animations to all nested elements.

```html
<div class="item-group" xyz="fade rotate-right">
  <div class="square ${data.mode}"></div>
  <div class="square ${data.mode}"></div>
  <div class="square ${data.mode}"></div>
</div>
```

```vue
<XyzTransitionGroup class="item-group" xyz="fade rotate-right">
  <div class="square" v-if="${data.toggled}"></div>
  <div class="square" v-if="${data.toggled}"></div>
  <div class="square" v-if="${data.toggled}"></div>
</XyzTransitionGroup>
```

```jsx
<XyzTransitionGroup className="item-group" xyz="fade rotate-right">
  {${data.toggled} && <div className="square" />}
  {${data.toggled} && <div className="square" />}
  {${data.toggled} && <div className="square" />}
</XyzTransitionGroup>
```

--------------------------------

### Vue Default Animation Configuration

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/defaults.md

This Vue.js example demonstrates setting default animation properties using CSS variables within the root scope, affecting the behavior of `XyzTransitionGroup` and its nested elements.

```vue
<XyzTransitionGroup class="item-group" xyz="fade stagger">
  <div class="square" v-if="${data.toggled}" xyz="inherit left"></div>
  <div class="square" v-if="${data.toggled}" xyz="inherit up"></div>
  <div class="square" v-if="${data.toggled}" xyz="inherit down"></div>
</XyzTransitionGroup>

##html
<style>
  :root {
    --xyz-translate-default: 300%;
    --xyz-ease-default: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    --xyz-stagger-default: 0.1s;
  }
</style>
```

--------------------------------

### HTML with CSS Variables

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/variables.md

Demonstrates how to apply CSS variables directly to an HTML element to customize its animation. Useful for static HTML structures.

```html
##html
<div class="item-group" xyz>
  <div class="square ${data.mode}"></div>
  <div class="square ${data.mode}"></div>
  <div class="square ${data.mode}"></div>
</div>

${data.variablesString && `
<style>
  .item-group { ${data.variablesString} }
</style>
`}
```

--------------------------------

### Dynamically Set XYZ Variables

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-dynamic-xyz.md

Explains how to dynamically set XYZ animation variables like '--xyz-translate-x' by using the `style` prop on an element.

```jsx
// To dynamically set XYZ variables simply use the `style` prop
<div style={{ '--xyz-translate-x': translateXAmount }}></div>
```

--------------------------------

### Include AnimXYZ via jsDelivr CDN

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/installation.md

Link to the AnimXYZ core stylesheet in the head of your HTML file to include it via CDN.

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

--------------------------------

### CodeSandbox Template for React AnimXYZ with React Router

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-installation.md

A CodeSandbox template demonstrating how to use AnimXYZ with React Router.

```js
codesandbox=animxyz-react-router?overrideEntry=false&buttonTitle=AnimXYZ%20React%20Router%20Template
```

--------------------------------

### Nested Element Animation

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-xyz-transition.md

Animate nested elements with staggered effects. This example applies a fade and small scale transition to multiple child elements within a parent, using 'auto' duration for the parent and specific 'stagger' for children.

```javascript
const toggled = ${data.buttonToggled}
```

```vue
<XyzTransition appear duration="auto" xyz="fade up-100% duration-10">
  <div class="item-block" v-if="toggled">
    <div class="square xyz-nested" xyz="fade small stagger" v-for="index in 4" :key="index"></div>
  </div>
</XyzTransition>
```

--------------------------------

### List Animation with XyzTransitionGroup

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-xyz-transition-group.md

Demonstrates animating a list of elements using XyzTransitionGroup with fade, scale, and rotation effects. Suitable for animating dynamically changing lists.

```javascript
const numElements = ${data.numElements}
```

```vue
<XyzTransitionGroup appear class="example-grid" xyz="fade small out-down out-rotate-right appear-stagger">
  <div class="square" v-for="index in numElements" :key="index"></div>
</XyzTransitionGroup>
```

--------------------------------

### HTML Structure for Perspective Animation

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/perspective.md

This HTML structure sets up a container for a perspective animation using XYZ transition. It includes a square element that will be animated.

```html
<div class="example-wrap perspective-none">
  <XyzTransition xyz="fade flip-left" v-xyz="data.utilities" :style="data.variables" v-on="data.listeners">
    <div class="square" v-if="data.toggled"></div>
  </XyzTransition>
</div>
```

--------------------------------

### React with xyz-absolute

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/special-classes.md

Illustrates 'xyz-absolute' positioning in React, using conditional rendering and keys within an XyzTransition component.

```jsx
<div className="example-wrap">
  <XyzTransition>
    {${data.toggled} && (
      <div className="square xyz-absolute" xyz="fade up-100%" key="1"></div>
    )}
    {${!data.toggled} && (
      <div className="square xyz-absolute" xyz="fade down-100%" key="2"></div>
    )}
  </XyzTransition>
</div>
```

--------------------------------

### HTML Structure for Origin Animation

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/origin.md

This HTML structure sets up an element to be animated using animxyz's origin utilities. It includes a wrapper, the XyzTransition component, and a conditional square element.

```html
<div class="example-wrap">
  <XyzTransition xyz="small-100%" :style="data.variables" v-on="data.listeners">
    <div class="square" v-if="data.toggled"></div>
  </XyzTransition>
</div>
```

--------------------------------

### CodeSandbox Template for AnimXYZ Vue 2

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-installation.md

A starter template on CodeSandbox for experimenting with AnimXYZ in a Vue 2 environment.

```javascript
codesandbox=animxyz-vue-2?overrideEntry=false&buttonTitle=AnimXYZ%20Vue%202.x%20Template
```

--------------------------------

### Import and Use Vue 2 AnimXYZ Plugin

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-installation.md

Import the Vue 2 AnimXYZ plugin and register it with your Vue instance before app instantiation. Ensure core CSS is imported.

```javascript
import Vue from 'vue'
import VueAnimXYZ from '@animxyz/vue'
import '@animxyz/core' // Import css here if you haven't elsewhere

Vue.use(VueAnimXYZ)

// Instantiate your Vue instance after using plugins
// new Vue(...)
```

--------------------------------

### CodeSandbox Template for AnimXYZ Vue 3

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-installation.md

A starter template on CodeSandbox for experimenting with AnimXYZ in a Vue 3 environment.

```javascript
codesandbox=animxyz-vue-3?overrideEntry=false&buttonTitle=AnimXYZ%20Vue%203.x%20Template
```

--------------------------------

### React Component with CSS Variables

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/variables.md

Illustrates how to apply CSS variables in a React component for animation customization. Ideal for React projects.

```jsx
##jsx
<XyzTransitionGroup className="item-group" xyz>
  {${data.toggled} && <div className="square" />}
  {${data.toggled} && <div className="square" />}
  {${data.toggled} && <div className="square" />}
</XyzTransitionGroup>

${data.variablesString && `
##html
<style>
  .item-group { ${data.variablesString} }
</style>
`}
```

--------------------------------

### Vue Grid Animation

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/practical-examples.md

Demonstrates animating a grid of elements using XyzTransitionGroup in Vue. Ensure the 'xyz' prop is correctly configured for desired effects.

```vue
##vue
<XyzTransitionGroup appear class="example-grid cat-grid" xyz="fade duration-5 appear-front-3 small-3 appear-small-0 stagger-2 out-stagger-0">
  <div class="square" v-for="index in numCats" :key="index">
    <img class="item-image" :src="`https://cataas.com/cat?type=sm?id=${index}`" alt="Picture of a cat"
    />
  </div>
</XyzTransitionGroup>
```

--------------------------------

### React Snippet for Perspective Animation

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/perspective.md

This React snippet illustrates how to use XYZ perspective transitions within a React application. It includes conditional rendering and styling.

```jsx
<XyzTransition xyz="fade flip-left${data.utilitiesString && ' ' + data.utilitiesString}">
  {${data.toggled} && <div className="square" />}
</XyzTransition>

          ${data.variablesString && "
          ##html
          <style>
            .square { ${data.variablesString} }
          </style>
          "}
```

--------------------------------

### React with xyz-none

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/special-classes.md

Illustrates the use of 'xyz-none' in a React component, conditionally rendering elements and disabling their animations.

```jsx
<div className="example-wrap">
  <XyzTransition duration="auto" xyz="fade small-100%">
    <div class="example-grid example-grid-2 xyz-none">
      {${data.toggled} && [...Array(4)].map((_, index) => <div className="square xyz-nested" key={index} />)}
    </div>
  </XyzTransition>
</div>
```

--------------------------------

### XyzTransition Component Props

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/react-xyz-transition.md

Demonstrates the core props for the XyzTransition component: appear, appearVisible, duration, and mode. This snippet shows the basic structure for applying these props.

```jsx
import { XyzTransition } from '@animxyz/react'

<XyzTransition
  appear={ boolean }
  appearVisible={ boolean | IntersectionObserverOptions }
	duration={ number | 'auto' | { appear: number | 'auto', in: number | 'auto', out: number | 'auto' } }
	mode={ 'out-in' | 'in-out' }
>
	<child />
</XyzTransition>
```

--------------------------------

### Nested List Animation with XyzTransitionGroup

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-xyz-transition-group.md

Illustrates animating nested elements within a list using XyzTransitionGroup. Ideal for complex UI structures with hierarchical animations.

```javascript
const numElements = ${data.numElements}
```

```vue
<XyzTransitionGroup appear duration="auto" class="example-grid" xyz="fade flip-left origin-left duration-3 appear-stagger">
  <div class="item-block" v-for="index in numElements" :key="index">
    <div class="square xyz-nested" xyz="fade small stagger" v-for="subIndex in 4" :key="subIndex"></div>
  </div>
</XyzTransitionGroup>
```

--------------------------------

### HTML: Basic Fade Up Big Animation

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/the-basics.md

Apply fade and big up animation directly in HTML using the 'xyz' attribute.

```html
<div class="square ${data.mode}" xyz="fade up big"></div>
```

--------------------------------

### Appear Visible Animation with XyzTransitionGroup

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-xyz-transition-group.md

Demonstrates animating elements as they become visible within a scrollable container using XyzTransitionGroup's 'appear-visible' prop. Suitable for long lists or content that loads on demand.

```vue
<div class="scroll-wrap">
  <XyzTransitionGroup appear-visible class="example-grid" xyz="delay-2 fade small rotate-right">
    <div class="square" v-for="index in 200" :key="index"></div>
  </XyzTransitionGroup>
</div>
```

--------------------------------

### HTML Snippet for Perspective Animation

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/perspective.md

This HTML snippet demonstrates how to apply perspective effects directly within an HTML structure using XYZ utilities. It includes conditional styling for variables.

```html
<div class="square ${data.mode}" xyz="fade flip-left${data.utilitiesString && ' ' + data.utilitiesString}"></div>

          ${data.variablesString && "
          <style>
            .square { ${data.variablesString} }
          </style>
          "}
```

--------------------------------

### Vue Modal Animation

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/practical-examples.md

Implements a modal with entrance and exit animations using XyzTransition in Vue. The 'xyz' prop on nested elements controls individual animations.

```vue
##vue
<XyzTransition duration="auto" xyz="fade out-delay-5">
  <div class="modal-overlay" v-if="modalOpen" @click="modalOpen = false">
    <div class="modal xyz-nested" xyz="fade short-100% delay-3 ease-out-back" @click.stop>
      <div class="modal-header xyz-nested" xyz="up-100% in-delay-3">
        <h1 class="xyz-nested" xyz="fade left in-delay-6">I am a modal</h1>
        <button xyz="fade small in-delay-7" class="modal-close xyz-nested" @click="modalOpen = false"></button>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer xyz-nested" xyz="down-100% in-delay-3">
        <button class="modal-button xyz-nested" xyz="fade in-right in-delay-7" @click="modalOpen = false">Close</button>
      </div>
    </div>
  </div>
</XyzTransition>
```

--------------------------------

### Staggered Grid with HTML

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/stagger.md

Apply staggering directly in HTML by including the 'stagger' utility. Custom CSS variables like --xyz-stagger can be used for fine-grained control over the animation delay.

```html
<div class="example-grid" xyz="fade small stagger">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

<style>
  .example-grid { --xyz-stagger: 0.3s; }
</style>
```

--------------------------------

### CodeSandbox Template for AnimXYZ with Vue Router (Vue 2)

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-installation.md

A CodeSandbox template demonstrating how to integrate AnimXYZ with Vue Router in a Vue 2 application.

```javascript
codesandbox=animxyz-vue-2-router?overrideEntry=false&buttonTitle=AnimXYZ%20Vue%202%20Router%20Template
```

--------------------------------

### Staggered Grid with React

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/stagger.md

Utilize XyzTransitionGroup for staggered animations in React. Be mindful of potential layout shifts with non-absolute positioned elements as they enter or exit.

```jsx
<XyzTransitionGroup className="example-grid" xyz="fade small">
  {data.toggled && [...Array(8)].map((_, index) => <div className="square" key={index} />)}
</XyzTransitionGroup>

<style>
  .example-grid { --xyz-stagger: 0.3s; }
</style>
```

--------------------------------

### Set XYZ Utility Level Dynamically

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-dynamic-xyz.md

Dynamically set the level of an XYZ utility using template string interpolation within the `v-xyz` directive. This allows for variable animation intensity.

```html
<div v-xyz="`left-${leftTransformUtilityLevel}`"></div>
```

--------------------------------

### CodeSandbox Template for AnimXYZ with Vue Router (Vue 3)

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/vue-installation.md

A CodeSandbox template demonstrating how to integrate AnimXYZ with Vue Router in a Vue 3 application.

```javascript
codesandbox=animxyz-vue-3-router?overrideEntry=false&buttonTitle=AnimXYZ%20Vue%203%20Router%20Template
```

--------------------------------

### Page Structure Animation in React

Source: https://github.com/ingram-projects/animxyz/blob/master/docs/content/sections/practical-examples.md

This React snippet demonstrates the implementation of XYZ animations for page elements using JSX. Similar to Vue, it employs the XyzTransition component for animations that occur on component mount.

```jsx
##jsx
<XyzTransition appear duration="auto">
  <div class="page-wrap">
    <div class="page-hero" xyz="fade small stagger ease-out-back">
      <div class="hero-logo xyz-nested"></div>
      <p class="hero-text xyz-nested">Curabitur blandit tempus porttitor. Morbi leo risus.</p>
    </div>
    <div class="page-features" xyz="fade flip-down stagger duration-10 delay-2 ease-out-back">
      <div class="feature-item xyz-nested"></div>
      <div class="feature-item xyz-nested"></div>
      <div class="feature-item xyz-nested"></div>
    </div>
    <div class="page-section" xyz="fade small stagger delay-4 ease-in-out">
      <div class="section-left" xyz="fade left stagger">
        <div class="section-item xyz-nested"></div>
        <div class="section-item xyz-nested"></div>
        <div class="section-item xyz-nested"></div>
      </div>
      <div class="section-right xyz-nested" xyz="fade big delay-10"></div>
    </div>
    <div class="page-footer" xyz="fade bottom ease-in-out delay-10">
      <div class="footer-logo xyz-nested" xyz="fade left ease-in-out delay-10"></div>
      <div class="footer-right" xyz="fade up stagger ease-in-out delay-10">
        <div class="footer-item xyz-nested"></div>
        <div class="footer-item xyz-nested"></div>
        <div class="footer-item xyz-nested"></div>
      </div>
    </div>
  </div>
</XyzTransition>
```