moti

The universal React Native animation library, powered by Reanimated 3.

<MotiView from={{ opacity: 0 }} animate={{ opacity: 1 }} />

Documentation & Examples

• Documentation
• Installation
• Examples

Next.js Conf

I spoke at at Next.js Conf 2021 on October 26 about React Native + Next.js. Watch the video to see how we do it.

Highlights

• Universal: works on all platforms
• 60 FPS animations on the native thread
• Mount/unmount animations, like framer-motion
• Powered by Reanimated 3
• Web support, out-of-the-box
• Expo support
• Intuitive API
• Variants
• Strong TypeScript support
• Highly-configurable animations
• Sequence animations
• Loop & repeat animations

Preview

• API
• Unmount animations with exit
• exitBeforeEnter animations

Follow

Follow me on Twitter to stay up to date.

Sponsor

Please reach out to Fernando Rojo if you're interested in sponsoring Moti.

Similar packages

Other packages similar to moti

react-native-reanimated

React Native Reanimated is a library for creating animations in React Native. It provides a low-level API for building animations, which Moti uses under the hood to offer a higher-level, declarative API. While Reanimated is more flexible and powerful for custom animations, Moti simplifies the process for common use cases.

react-native-animatable

React Native Animatable is another library for animations in React Native, offering a simple API for common animations. Compared to Moti, it is easier to use for basic animations but lacks the performance optimizations and advanced capabilities provided by Reanimated 2, which Moti leverages.

lottie-react-native

Lottie for React Native is used for rendering animations exported from Adobe After Effects. It is ideal for complex animations created by designers. While Lottie focuses on rendering pre-made animations, Moti is more about creating animations programmatically within the app.