Scroll Animations

The animate-inview: prefix triggers animations when an element enters the viewport.

Basic usage

Configuration

Animate once

<mw.View className="animate-inview:opacity-100 animate-initial:opacity-0 animate-once" />

Viewport amount

// Trigger when 50% visible
<mw.View className="animate-inview:y-0 animate-amount-50" />

// Trigger when fully visible
<mw.View className="animate-inview:y-0 animate-amount-all" />

Viewport margin

// Trigger 100px before entering viewport
<mw.View className="animate-inview:opacity-100 animate-margin-100" />

Using the useInView hook

For more control, use the hook directly:

Limitations on React Native

• Web uses IntersectionObserver — precise scroll tracking
• Native uses onLayout — fires on layout, not per scroll frame

For real-time scroll-linked animations (parallax), use Reanimated's useAnimatedScrollHandler directly.

Next steps

• Drag — Draggable elements with constraints
• Hooks — Custom animation control