docs/app/routes/docs.typescript.mdx
import { formatFrontmatterToRemixMeta } from '../helpers/meta'
export const meta = formatFrontmatterToRemixMeta(frontmatter)
An animation being executed by the frameloop. Normally found attached to a SpringValue.
class Animation<T = any> {
changed: boolean
values: readonly AnimatedValue[]
toValues: readonly number[] | null
fromValues: readonly number[]
to: T | FluidValue<T>
from: T | FluidValue<T>
config: AnimationConfig
immediate: boolean
}
Most of the reserved animation props, except to, from, loop, and the event props.
interface AnimationProps<T = any> {
config?: SpringConfig | ((key: StringKeys<T>) => SpringConfig)
delay?: number | ((key: StringKeys<T>) => number)
immediate?: MatchProp<T>
cancel?: MatchProp<T>
pause?: MatchProp<T>
reset?: MatchProp<T>
reverse?: boolean
default?: boolean | SpringProps<T>
}
A value that any SpringValue or Controller can animate to.
export declare type ControllerUpdate<
State extends Lookup = Lookup,
Item = undefined,
> = unknown & ToProps<State> & ControllerProps<State, Item>
Lookup is typically inferred, so you probably won't need to use it.
It's primarily used to infer the animatable properties from our hooks, e.g. opacity
interface Lookup<T = any> {
[key: string]: T
}
export type OneOrMore<T> = T | readonly T[]
The props of a useSpring call or its async update function. The T parameter can
be a set of animated values (as an object type) or a primitive type for a single
animated value.
type SpringUpdate<T = any> = ToProps<T> & SpringProps<T>
type SpringsUpdate<State extends Lookup = UnknownProps> =
| OneOrMore<ControllerUpdate<State>>
| ((index: number, ctrl: Controller<State>) => ControllerUpdate<State> | null)
SpringValues is contextual to the values you pass to your hook e.g. opacity.
It's type signature is quite complicated, so it's easier to show how you use it.
type MySpringValues = SpringValues<{
opacity: number
y: string
}>
TransitionState is the internal state attached to a particular Item
(a single datum from the data array you pass).
interface TransitionState<Item = any, State extends Lookup = Lookup> {
key: any
item: Item
ctrl: Controller<State>
phase: TransitionPhase
expired?: boolean
expirationId?: number
}
Intersected with other object types to allow for unknown properties.
export interface UnknownProps extends Lookup<unknown> {}