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-enter:opacity-100 animate-duration-300" />
<mw.View className="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 children

<mw.View className="animate-stagger-100 animate-delay-children-200">
  <mw.View className="animate-enter:opacity-100 animate-initial:opacity-0" />
  <mw.View className="animate-enter:opacity-100 animate-initial:opacity-0" />
  <mw.View className="animate-enter:opacity-100 animate-initial:opacity-0" />
</mw.View>

When to use spring vs. timing

Use case	Recommendation
Tap/press feedback	Spring (feels responsive)
Entrance animations	Timing with ease-out
Drag release	Spring (maintains velocity)
Loading spinners	Timing with linear
Color transitions	Timing (springs can overshoot)

Next steps

Scroll Animations — Trigger animations on scroll
Drag — Draggable elements