Documentation

Animations

Entrance, exit, and state animations with the animate-* class syntax.

Animations

motionwind-react-native uses the same class syntax as the web package. All animation classes start with animate- followed by a gesture prefix and property-value pair.

Class syntax

animate-{gesture}:{property}-{value}

gesture: When the animation triggers (enter, initial, exit, tap, inview, etc.)
property: What to animate (opacity, scale, y, rotate, etc.)
value: The target value (0, 95, 20, 45, etc.)

Entrance animations

Use animate-initial: to set the starting state and animate-enter: for the target state. The animation runs automatically when the component mounts.

Fade in

Fade InNative

9:41

Slide up + fade

Slide Up + FadeNative

9:41

Scale in with spring

Scale In — Spring PhysicsNative

9:41

Slide from left

Slide from LeftNative

9:41

Animatable properties

Transform

Class	Property	Example	Notes
`scale-{n}`	`scale`	`scale-110` → 1.1	Values 0–200, divided by 100
`scale-x-{n}`	`scaleX`	`scale-x-120` → 1.2
`scale-y-{n}`	`scaleY`	`scale-y-80` → 0.8
`rotate-{n}`	`rotate`	`rotate-45` → `"45deg"`	Auto-converts to deg string
`rotate-x-{n}`	`rotateX`	`rotate-x-180` → `"180deg"`
`rotate-y-{n}`	`rotateY`	`rotate-y-90` → `"90deg"`
`x-{n}`	`translateX`	`x-20` → 20	Pixels. Maps to RN `translateX`
`y-{n}`	`translateY`	`y-30` → 30	Pixels. Maps to RN `translateY`

Visual

Class	Property	Example	Notes
`opacity-{n}`	`opacity`	`opacity-50` → 0.5	Values 0–100, divided by 100
`bg-{color}`	`backgroundColor`	`bg-#ff0000`	Hex, rgb(), rgba(), hsl()
`text-{color}`	`color`	`text-#ffffff`

Dimensions & Layout

Class	Property	Example
`w-{n}`	`width`	`w-200` → 200px
`h-{n}`	`height`	`h-100` → 100px
`rounded-{n}`	`borderRadius`	`rounded-16` → 16
`p-{n}`	`padding`	`p-20` → 20
`m-{n}`	`margin`	`m-10` → 10

Negative values

Prefix any value with - for negative numbers:

<mw.View className="animate-enter:y-0 animate-initial:-y-50">
  <Text>Slides down from above</Text>
</mw.View>

Keyframe arrays

Animate through multiple values using bracket syntax:

Keyframe ScaleNative

9:41

Combining multiple properties

Chain as many properties as you need on the same gesture:

Complex EntranceNative

9:41

Web-only properties (not supported)

These properties are supported on web but silently ignored on React Native:

blur-*, brightness-*, contrast-*, saturate-* (CSS filters)
backdrop-blur-* (backdrop filter)
clip-* (clip-path)
shadow-* (box-shadow)
path-length-*, path-offset-*, path-spacing-* (SVG)

This means you can share className strings between web and native — unsupported props are dropped without errors.

Next steps

Gestures — Tap, hover, and focus animations
Springs & Easing — Configure animation physics