scrollMotion
Create, during component initialization, the motion values a Scroll or a
List moves as it scrolls; give it to one view's motion prop.
const feed = scrollMotion();
<Box opacity={interpolate(feed.offset, [0, 120], [1, 0])} />
<Scroll motion={feed}>…</Scroll>
Usage
Choose behavior beyond interpolation stops.
// Choose behavior beyond interpolation stops.
import { Box, Scroll, interpolate, scrollMotion, type Extrapolate } from 'kuito';
function Header(props: { parallax: boolean }) {
const feed = scrollMotion();
// 'extend' keeps the image moving past 200 points; 'clamp' (the default) stops it there.
const extrapolate: Extrapolate = props.parallax ? 'extend' : 'clamp';
return (
<Scroll motion={feed}>
<Box
height={240}
translateY={interpolate(feed.offset, [0, 200], [0, 100], { extrapolate })}
/>
</Scroll>
);
}Signatures
(name?: string): ScrollMotionParameters
| Name | Type | Required | Description |
|---|---|---|---|
name | string | No | — |
Returns
Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.