Transition — Kuito Documentation

Usage

Choose transitions per property.

tsx

// Choose transitions per property.
import { Box, signal, spring, timing, type Transition } from 'kuito';

// One feel for every card in the app: quick fades, springy moves.
const cardTransition: Transition = {
  opacity: timing(150),
  transform: spring({ damping: 18, stiffness: 220 }),
  shadow: timing(150),
};

const lifted = signal(false);

<Box
  transition={cardTransition}
  animate={{ translateY: lifted.value ? -4 : 0, shadowRadius: lifted.value ? 12 : 4 }}
  onPress={() => (lifted.value = !lifted.value)}
/>;

Type declaration

export type Transition = Partial<
  Record<
    | 'opacity'
    | 'backgroundColor'
    | 'transform'
    | 'borderRadius'
    | 'borderColor'
    | 'shadow'
    | 'width'
    | 'height'
    | 'all',
    Animation<unknown> | AnimationSpec
  >
>;

Members 9

Name	Type	Required	Description
`opacity`	`Animation<unknown> \| AnimationSpec`	No	—
`backgroundColor`	`Animation<unknown> \| AnimationSpec`	No	—
`transform`	`Animation<unknown> \| AnimationSpec`	No	—
`borderRadius`	`Animation<unknown> \| AnimationSpec`	No	—
`borderColor`	`Animation<unknown> \| AnimationSpec`	No	—
`shadow`	`Animation<unknown> \| AnimationSpec`	No	—
`width`	`Animation<unknown> \| AnimationSpec`	No	—
`height`	`Animation<unknown> \| AnimationSpec`	No	—
`all`	`Animation<unknown> \| AnimationSpec`	No	—

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.