Moti

The React Native (+ Web) animation library, powered by Reanimated 2.

React NativeAnimation
nandorojo/motimoti.fyimoti

README


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

  1. ``` js
  2. <MotiView from={{ opacity: 0 }} animate={{ opacity: 1 }} />
  3. ```

Documentation & Examples


- Documentation
- Installation
- Examples

Next.js Conf


<img
  width="1779"
  alt="Screen Shot 2021-10-22 at 3 00 05 PM"
  src="https://user-images.githubusercontent.com/13172299/138509139-412b2d32-841b-4a7e-950e-f8721c1da17f.png"
/>

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 2
- 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](https://twitter.com/FernandoTheRojo/status/1349884929765765123)
- [exitBeforeEnter animations](https://twitter.com/FernandoTheRojo/status/1351234878902333445)

Follow


Follow me on Twitter to stay up to date.

Sponsor


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

Analytics by Splitbee.io