Documentation

Scroll Animations

Use beta scroll-linked values in mw.ScrollView and direct visibility orchestration for in-view behavior.

Scroll animations

React Native v2 supports continuous values driven by the normalized progress of the nearest mw.ScrollView:

<mw.ScrollView>
  <mw.View className="animate-scroll:opacity-[0,1] animate-scroll:y-[40,0]">
    <mw.Text>Driven by parent scroll progress</mw.Text>
  </mw.View>
</mw.ScrollView>

For a horizontal scroll view, set horizontal and add animate-scroll-axis-x. Output ranges may contain two or more numeric values. Offset hints are retained for shared syntax but are advisory on native.

This beta path normalizes the parent scroll offset against its measured content and layout size. Test the exact experience on physical devices, especially for virtualized or dynamically resized content. Use Reanimated's useAnimatedScrollHandler for advanced physics or independent scroll sources.

In-view is a separate capability

animate-inview:* is not consumed by the v2 native adapter. It returns unsupported-native-inview. The exported useInView helper performs a simple onLayout visibility estimate; it is not continuous or scroll-aware. For a production list reveal, coordinate measurements with the owning ScrollView or use a viewability/visibility library, then call animateTo from useMotionwind.