CSS Driver

The @hanzogui/animations-css package works with the Hanzo GUI compiler and runtime to provide simple ways to share typed animations across all your components.

Installation

yarn add @hanzogui/animations-css

Configuration

Add it to your Gui config:

import { createAnimations } from '@hanzogui/animations-css'
import { createGui } from '@hanzo/gui'

export default createGui({
  animations: createAnimations({
    fast: 'ease-in 150ms',
    medium: 'ease-in 300ms',
    slow: 'ease-in 450ms',
  }),
  // ...
})

At runtime, the plugin does very little except to set the transition property in CSS. At compile-time, the compiler does the same, ensuring you get all the benefits of prop removal and view flattening even when using animations.

Animation Configuration

CSS animations use CSS transition syntax:

createAnimations({
  quick: 'ease-out 100ms',
  bouncy: 'cubic-bezier(0.68, -0.55, 0.265, 1.55) 300ms',
  slow: 'ease-in-out 500ms',
})

The format is: <easing-function> <duration>

Delay

You can add animation delays using the array syntax:

<Square transition={['quick', { delay: 200 }]} />

The delay (in milliseconds) is applied as CSS transition-delay.

Supported Easing Functions

ease - Default easing (equivalent to cubic-bezier(0.25, 0.1, 0.25, 1))
linear - No easing, constant speed
ease-in - Slow start
ease-out - Slow end
ease-in-out - Slow start and end
cubic-bezier(x1, y1, x2, y2) - Custom cubic bezier curve

When to Use

Advantages:

Smallest bundle size - Minimal JavaScript overhead
Best compatibility - Works everywhere CSS works
Compiler optimizations - Benefits from static extraction
Simple - Easiest to understand and configure

Limitations:

No spring physics (only easing curves)
Limited to CSS animatable properties
Less control over animation lifecycle

Example

import { createAnimations } from '@hanzogui/animations-css'
import { YStack, createGui } from '@hanzo/gui'

const animations = createAnimations({
  quick: 'ease-out 150ms',
  bouncy: 'cubic-bezier(0.68, -0.55, 0.265, 1.55) 400ms',
})

export default createGui({
  animations,
  // ... rest of config
})

// Usage in components
export const MyComponent = () => (
  <YStack
    transition="quick"
    hoverStyle={{
      scale: 1.1,
    }}
  />
)