mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-30 06:05:14 +00:00
zeekayandHanzo Dev
751ef5c778
Both old names are owned by a different npm account (artemis-prime), so publishing them returns 403 — which is how this surfaced: the 8.0.0 run shipped @hanzogui/logo and @hanzogui/demos depending on [email protected], a version that cannot be published and therefore does not exist. Those two were uninstallable. @hanzo/gui and @hanzogui/* are ours, so the framework now carries the name it is imported by everywhere downstream, and the loader moves under the scope we control. The rewrite is limited to package references. `DEBUG?.startsWith('hanzogui')` is a log-namespace filter and join(dir, 'hanzogui') is a path — rewriting either would change behaviour, so both are untouched. Co-authored-by: Hanzo Dev <[email protected]>
121 lines
2.7 KiB
Plaintext
121 lines
2.7 KiB
Plaintext
---
|
|
title: CSS Driver
|
|
description: Lightweight CSS transition-based animations
|
|
---
|
|
|
|
The `@hanzogui/animations-css` package works with the Gui compiler and
|
|
runtime to provide simple ways to share typed animations across all your
|
|
components.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
yarn add @hanzogui/animations-css
|
|
```
|
|
|
|
## Configuration
|
|
|
|
Add it to your [Gui config](/docs/core/configuration):
|
|
|
|
```tsx
|
|
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',
|
|
}),
|
|
// ...
|
|
})
|
|
```
|
|
|
|
## How it Works
|
|
|
|
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:
|
|
|
|
```tsx
|
|
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:
|
|
|
|
```tsx
|
|
<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
|
|
|
|
```tsx
|
|
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,
|
|
}}
|
|
/>
|
|
)
|
|
```
|
|
|
|
## See Also
|
|
|
|
- [Animations Introduction](/docs/core/animations)
|
|
- [React Native Driver](/docs/core/animations-react-native)
|
|
- [Motion Driver](/docs/core/animations-motion)
|
|
- [Reanimated Driver](/docs/core/animations-reanimated)
|