Pose (core)
Defined in: types.ts:12
A card’s visual state. Mutated in place by layouts; never allocated per frame.
Example
Section titled “Example”import { createPose, fan } from '@rpxl/riffle'
const pose = createPose()fan().pose(0, geometry, pose) // the front card's resting poseProperties
Section titled “Properties”cross:
number
Defined in: types.ts:16
Pixels across the drag axis.
main:
number
Defined in: types.ts:14
Pixels along the drag axis.
opacity
Section titled “opacity”opacity:
number
Defined in: types.ts:32
0..1. Cards fade out as they exit or fall past maxVisible.
A card whose opacity reaches 0 (after rounding to three decimals) is
parked at the neutral pose: its transform is written with no
translation, rotation or scale, not at its layout offset, so an
invisible card never widens the page. Do not rely on a CSS opacity
transition to fade such a card out in place: the transform moves to
neutral in the same write, so a transitioned fade plays at the neutral
position. Fade through the pose’s own opacity instead.
rotation
Section titled “rotation”rotation:
number
Defined in: types.ts:18
Degrees.
scale:
number
Defined in: types.ts:20
1 at full size, shrinking toward 0 further back in the fan.
zIndex
Section titled “zIndex”zIndex:
number
Defined in: types.ts:34
Stacking order. Higher paints on top.