mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +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]>
150 lines
3.3 KiB
Plaintext
150 lines
3.3 KiB
Plaintext
---
|
|
title: Motion Driver
|
|
description: High-performance web animations with WAAPI
|
|
---
|
|
|
|
[Motion](https://motion.dev) is a modern animation library built on the Web
|
|
Animations API (WAAPI). It features a unique hybrid engine that combines
|
|
JavaScript animations with native browser APIs to deliver high-performance,
|
|
GPU-accelerated animations.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
yarn add @hanzogui/animations-motion motion
|
|
```
|
|
|
|
## Configuration
|
|
|
|
Add your animations to your [Gui config](/docs/core/configuration):
|
|
|
|
```tsx
|
|
import { createAnimations } from '@hanzogui/animations-motion'
|
|
import { createGui } from '@hanzo/gui'
|
|
|
|
export default createGui({
|
|
animations: createAnimations({
|
|
'75ms': { duration: 75 },
|
|
'100ms': { duration: 100 },
|
|
'200ms': { duration: 200 },
|
|
superBouncy: {
|
|
type: 'spring',
|
|
damping: 5,
|
|
mass: 0.7,
|
|
stiffness: 200,
|
|
},
|
|
bouncy: {
|
|
type: 'spring',
|
|
damping: 9,
|
|
mass: 0.9,
|
|
stiffness: 150,
|
|
},
|
|
}),
|
|
// ...
|
|
})
|
|
```
|
|
|
|
## How it Works
|
|
|
|
At runtime, the Motion driver uses the `useAnimate()` hook from the Motion
|
|
library to create animation scopes and orchestrate animations. It intelligently
|
|
batches style changes and only animates properties that have changed, optimizing
|
|
performance.
|
|
|
|
The driver leverages the Web Animations API (WAAPI) which runs animations on the
|
|
compositor thread when possible, keeping animations smooth even when the main
|
|
thread is busy.
|
|
|
|
## Animation Configuration
|
|
|
|
Motion animations support both spring and tween (timing) animations:
|
|
|
|
### Spring Animations
|
|
|
|
```tsx
|
|
{
|
|
type: 'spring',
|
|
damping: 10, // Higher = less bouncy
|
|
mass: 0.9, // Higher = more inertia
|
|
stiffness: 100, // Higher = faster
|
|
}
|
|
```
|
|
|
|
### Tween Animations
|
|
|
|
```tsx
|
|
{
|
|
duration: 200, // Duration in milliseconds
|
|
}
|
|
```
|
|
|
|
### Delay
|
|
|
|
You can add animation delays using the array syntax:
|
|
|
|
```tsx
|
|
<Square transition={['bouncy', { delay: 200 }]} />
|
|
```
|
|
|
|
The delay is specified in milliseconds and is converted to seconds for Motion
|
|
internally.
|
|
|
|
## Highlights
|
|
|
|
### Zero Re-renders
|
|
|
|
The Motion driver now works with Gui to bypasses all internal style changes
|
|
to instead directly hand off directly to Motion.
|
|
|
|
### WAAPI Performance
|
|
|
|
The Web Animations API runs animations on the compositor thread when possible,
|
|
keeping animations smooth even when the main thread is busy. This provides
|
|
off-thread performance comparable to Reanimated, but for web-only applications.
|
|
|
|
## Platform-Specific Configuration
|
|
|
|
For cross-platform apps, use Motion on web and Reanimated on native:
|
|
|
|
```tsx
|
|
// animations.ts (web)
|
|
import { createAnimations } from '@hanzogui/animations-motion'
|
|
|
|
export const animations = createAnimations({
|
|
bouncy: {
|
|
type: 'spring',
|
|
damping: 10,
|
|
stiffness: 100,
|
|
},
|
|
})
|
|
```
|
|
|
|
```tsx
|
|
// animations.native.ts
|
|
import { createAnimations } from '@hanzogui/animations-reanimated'
|
|
|
|
export const animations = createAnimations({
|
|
bouncy: {
|
|
type: 'spring',
|
|
damping: 10,
|
|
stiffness: 100,
|
|
},
|
|
})
|
|
```
|
|
|
|
Then import without the extension:
|
|
|
|
```tsx
|
|
import { animations } from './animations'
|
|
```
|
|
|
|
Your bundler will automatically pick the right file based on the platform.
|
|
|
|
## See Also
|
|
|
|
- [Animations Introduction](/docs/core/animations)
|
|
- [CSS Driver](/docs/core/animations-css)
|
|
- [React Native Driver](/docs/core/animations-react-native)
|
|
- [Reanimated Driver](/docs/core/animations-reanimated)
|
|
- [Motion Documentation](https://motion.dev)
|