Skip to content
react-native-strx v1.0.0-beta.1

Core concepts

Timing & easing

Duration, delay, easing and repeat tokens, and the order STRX resolves them in.

Timing tokens configure the preset, keyframes, exit: and transition-* tokens in their own comma group.

<Strx.View animate="slide-up duration-500 delay-150 ease-in-out" />

Timing tokens

TokenMeaning
duration-300
Duration in milliseconds. Precedence: token or object → preset default → Strx.Provider duration → 300ms.
delay-100
Delay in milliseconds before the animation starts.
damping-12
Spring damping. Default 10.
stiffness-180
Spring stiffness. Default 100.
mass-1
Spring mass. Default 1.
play-3 play-infinite
Total number of plays, or play-infinite.
repeat-3 repeat-infinite
Same as play-*; kept for compatibility. (legacy)

Duration

duration-* is in milliseconds. STRX picks the first value that is set:

  1. a duration-* token, or duration in an object
  2. the preset's own default (for example slide-up is 320ms)
  3. Strx.Provider's motionPreset.duration
  4. 300ms
1<Strx.Provider motionPreset={{ duration: 200 }}>2  <Strx.View animate="fade-in" />              {/* 300ms: fade-in's default */}3  <Strx.View animate="from:opacity-0" />       {/* 200ms: provider */}4  <Strx.View animate="fade-in duration-600" /> {/* 600ms: token */}5</Strx.Provider>

duration-* also sets the duration of layout-linear and layout-fade in the same group.

Delay

delay-* waits before the animation starts. It applies once, not before every repeat.

<Strx.View animate="fade-in, slide-up delay-200" />

Delays are a simple way to stage a sequence by hand. For lists, Strx.Timeline computes the offsets for you.

Easing

Easing tokens set the curve of timing animations. Without one, STRX uses the provider's motionPreset.easing, or ease-out.

TokenCurve
linear
Linear easing.
ease
Smoothstep easing.
ease-in
Cubic ease-in.
ease-out
Cubic ease-out. Default when no easing is set.
ease-in-out
Cubic ease-in-out.
spring
Uses the spring driver for numeric channels.

Easing has no effect on spring animations. For springs, see Springs.

Repeating

play-* sets the total number of plays: play-3 plays three times. play-infinite loops until the component unmounts or its animation changes. repeat-* is an older name for the same thing.

<Strx.View animate="from:opacity-40 to:opacity-100 duration-800 ease-in-out play-infinite" />

Each play starts again from the from frame. To loop a whole choreography of several components, use playCount on Strx.Timeline.

Reduce Motion

When Reduce Motion is on, durations and delays become 0 and repeats play once, so the UI jumps straight to the end state. See Accessibility.

Global defaults

Set app-wide fallbacks on the provider. Tokens always win:

<Strx.Provider motionPreset={{ duration: 260, easing: "ease-out" }}>
  <App />
</Strx.Provider>

Edit this page on GitHub

Esc