Documentation
Springs & Easing
Configure spring physics and easing curves for natural-feeling animations.
Springs & Easing
Every animation needs timing. motionwind-react-native supports two animation types: timing (duration + easing curve) and spring (physics-based).
Timing animations (default)
By default, animations use withTiming with an ease-out curve.
Duration
<mw.View className="animate-initial:opacity-0 animate-enter:opacity-100 animate-duration-300" />
<mw.View className="animate-initial:scale-90 animate-enter:scale-100 animate-duration-1000" />Note: On React Native, durations are in milliseconds (not seconds like the web package).
Named easing functions
| Class | Reanimated Easing | When to use |
|---|---|---|
animate-ease-out | Easing.out(cubic) | Elements entering (most common) |
animate-ease-in | Easing.in(cubic) | Elements exiting (rare) |
animate-ease-in-out | Easing.inOut(cubic) | Elements moving on screen |
animate-ease-linear | Easing.linear | Constant-speed (loaders) |
animate-ease-circ-out | Easing.out(circle) | Snappy, responsive |
animate-ease-back-out | Easing.out(back) | Slight overshoot, playful |
Custom cubic-bezier
<mw.View className="animate-enter:y-0 animate-ease-[0.23,1,0.32,1]" />Spring animations
Springs simulate real physics. Use them for interactions that should feel alive.
Spring EntranceNative
9:41
Configure spring physics
| Class | Property | Default | Description |
|---|---|---|---|
animate-stiffness-{n} | stiffness | 100 | Higher = snappier |
animate-damping-{n} | damping | 10 | Higher = less oscillation |
animate-mass-{n} | mass | 10 (÷10 → 1.0) | Higher = heavier, slower |
Spring presets
Spring Presets ComparisonNative
9:41
Repeat and loop
Infinite pulse
Infinite PulseNative
9:41
// Repeat 3 times
<mw.View className="animate-enter:scale-110 animate-repeat-3" />
// Infinite loop
<mw.View className="animate-enter:rotate-360 animate-repeat-infinite animate-ease-linear" />Stagger metadata
The shared parser retains animate-stagger-* and
animate-delay-children-* in transition, but the React Native v2 component
adapter does not schedule child mounts from that metadata. Apply explicit child
delays or orchestrate the list with Reanimated.
When to use spring vs. timing
| Use case | Recommendation |
|---|---|
| Tap/press feedback | Spring (feels responsive) |
| Entrance animations | Timing with ease-out |
| Drag release | Direct Reanimated spring |
| Loading spinners | Timing with linear |
| Color transitions | Timing (springs can overshoot) |
Next steps
- Scroll Animations — Trigger animations on scroll
- Drag — Direct native drag integration in v2