explaingit

nandorojo/moti

4,536TypeScriptAudience · developerComplexity · 2/5LicenseSetup · moderate

TLDR

A cross-platform animation library for React Native that makes it easy to add smooth 60fps animations to iOS, Android, and web apps by replacing standard view components with animated versions.

Mindmap

mindmap
  root((Moti))
    What it does
      Smooth animations
      Native thread 60fps
      Cross-platform
    Animation Types
      Entry and exit
      Looping repeating
      Named variants
    Platform Support
      iOS and Android
      Web support
      Expo compatible
    Setup
      TypeScript
      Reanimated 3 base
      MIT license
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a fade-in or slide-in animation when a React Native screen mounts using MotiView entry animation props

USE CASE 2

Create a looping pulsing skeleton loading screen in React Native while content is being fetched

USE CASE 3

Switch between named visual states with smooth transitions using Moti variants for expand-collapse or toggle UI

USE CASE 4

Build animated components that work identically on iOS, Android, and web from a single codebase

Tech stack

TypeScriptReact NativeReanimatedExpo

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Reanimated 3 installed and configured in your React Native or Expo project before Moti will work.

Use freely for any purpose including commercial projects. Just keep the MIT copyright notice.

In plain English

Moti is an animation library for React Native, the framework used to build mobile apps with JavaScript that run on both iOS and Android. It is also designed to work on the web, making it a cross-platform option for developers building apps across multiple environments. The library is built on top of Reanimated 3, a lower-level animation engine, and provides a simpler interface on top of it so you do not need to interact with Reanimated directly for most use cases. The basic idea is that you replace standard layout components with Moti versions (MotiView instead of a plain View, for example) and describe how they should look at different states. You set an initial visual state and a target animated state, and Moti handles the transition between them. Animations run at 60 frames per second on the device native thread rather than the JavaScript thread, which keeps them smooth even when other processing is happening in the background. Moti supports several animation scenarios: elements fading or sliding in when they first appear on screen, playing an animation as an element is removed, switching between named visual states called variants, chaining animations in a sequence, and looping or repeating animations automatically. It also works with Expo, a popular toolkit for building React Native apps, and has full TypeScript support. The README for this repository is brief and points primarily to the external documentation site at moti.fyi for installation steps and interactive examples. It lists the main features and includes a short code snippet, but most detailed guidance lives in those external docs. The library is released under an MIT license.

Copy-paste prompts

Prompt 1
Using Moti, create a React Native component that slides in from the left when it mounts and fades out when it unmounts. Show the full MotiView component code.
Prompt 2
How do I use Moti variants to toggle between two visual states, like a card that expands and collapses, with a smooth animated transition between them?
Prompt 3
Set up a Moti-powered skeleton loading screen in React Native that pulses repeatedly until data loads. Show the MotiView animate and transition configuration.
Prompt 4
I'm using Expo with Moti. Walk me through installing Moti and Reanimated 3 correctly so animations run on the native thread without dropping frames.
Prompt 5
How do I chain a sequence of animations in Moti, first move right, then fade out, then scale down, so each step starts only after the previous one finishes?
Open on GitHub → Explain another repo

← nandorojo on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.