Components
KeyframeAnimator
KeyframeAnimator steps through explicit frame values over time, exposing each frame to a render function.
KeyframeAnimator steps through explicit frame values over time, exposing each frame to a render function.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<KeyframeAnimator
interval={700}
keyframes={[
{ scale: 1, opacity: 0.45 },
{ scale: 1.08, opacity: 0.75 },
{ scale: 1.15, opacity: 1 },
]}
>
{(frame) => (
<Card>
<div
style={{
padding: '24px',
textAlign: 'center',
transform: `scale(${frame.scale})`,
opacity: frame.opacity,
transition: 'transform 200ms ease, opacity 200ms ease',
}}
>
Keyframe content
</div>
</Card>
)}
</KeyframeAnimator>API
| Prop | Type | Required | Description |
|---|---|---|---|
children | (frame: TFrame, controls: IPhaseAnimatorControls<TFrame>) => React.ReactNode | Yes | Render function for the current keyframe. |
interval | number | No | Milliseconds between keyframes. Default: 1000 |
keyframes | TFrame[] | Yes | Ordered keyframe values to step through. |
repeat | boolean | No | Whether to repeat from the first keyframe after the last. Default: true |
Inherits additional props from Omit<IBaseComponent, 'children'>.
Overview
KeyframeAnimator steps through explicit frame values over time, exposing each frame to a render function.
Status: adapted
SwiftUI Correspondence: Adapted from SwiftUI's KeyframeAnimator.
Notes
keyframesis the ordered sequence of frame objects exposed to the render functionintervalcontrols the dwell time per frame in this web adaptationrepeat={false}stops at the last frame instead of looping