React Native animations.
Ready for your agent.
153 animations built by hand with Reanimated, Moti and Skia. Copy the source, add one with a command, or let your coding agent pull it in and fit it to your app.
Watch it move.
Then take it.
Three ways in.
The same real code.
Watch it
Each animation is a recording from a real device. Or skip the video: scan its code and try it on your own phone in the free app.
Pick your way in
Copy the source from the page, add it with one command, or ask your agent for it by name or by what it does.
Make it yours
It lands in your repo as plain source files. No package to depend on, nothing to keep in sync, every line open to change.
Every animation,
on your own phone.
A video only tells you so much. The free preview app runs the whole library on a real device, so you can drag it, fling it and feel the springs before you take the code.
- Get the app. Free, for iPhone and Android.
- Scan the code on any animation's page.
- It opens on that animation, running for real.
Your agent knows
every animation.
Connect it once. Claude Code, Cursor, Codex and any other MCP client can search the library, read the real source and fit it to your screens, your theme and your navigation.
- It starts from code that already runs, so it adapts instead of guessing.
- The first time, it asks you to sign in with GitHub. Searching is free with any account; the source of a paid animation needs a license.
search_animationsFind one by what it does: “carousel with parallax”, “number ticker”.get_animationThe source files, what they depend on and how to install it.list_collectionsCarousels, onboarding, loaders, pickers and the rest.get_motion_guideThe patterns from the skill: one driver, springs, gestures, lists.
Every animation
has its prompt.
Written from the source, not from a screenshot. It names the files, the packages and the motion to keep, then tells your agent to fetch the real code. Paste it, then say what should differ.
- What to keep: the springs, the gestures, the timing.
- What to change: your data, your theme, where it mounts.
- No MCP set up? The same prompt falls back to the CLI.
Teach your agent
how motion is built.
A free skill for Claude Code, Cursor and Codex with the patterns behind the library, distilled from the catalog and checked against Reanimated 4. It needs no license, and it knows when to reach for the library instead of starting from zero.
- One shared value drives the animation. Every property is an interpolation of it.
- A gesture hands its velocity to the spring when the finger lifts.
- A list never re-renders while it scrolls.
make it bouncy
A spring on the one driver, seeded with the gesture's velocity.cards scale as I scroll
The scroll offset is the driver, with a window per item.only dismiss if they meant it
A guarded commit: distance and velocity, not either.it's janky on Android
The performance audit, cause by cause.
Five reference files: core concepts, gestures, scroll and lists, animation math, performance.
The whole library,
on your machine.
One command copies every animation into a folder you own. Your agent reads it from disk, search works offline, and nothing depends on a link staying up.
- Run it again and it pulls what was added since.
- Each animation has its source, its dependencies and its prompt next to each other.
Kept running.
On today's versions.
Every animation lives in one Expo app that is rebuilt when a new SDK comes out. It works on Expo SDK 54 and everything since, 57 and 58 included.
- The packages each animation needs are listed with it, with the install command.
- The preview app on your phone is that same app.
Plain code, nothing hidden
Source, not a package
The files go into your repo. Rename them, split them, rewrite half of them.
The libraries you already use
Reanimated, Gesture Handler, Moti, Skia and SVG. Nothing exotic to learn first.
Expo and bare React Native
Each one lists what it needs. The CLI installs it with your package manager.
11 shared element transitions
List to detail, grid to full screen, and the ones in between. Included.
New ones keep coming
Every animation added after you buy is yours, on the site, in the CLI and over MCP.
Unlimited projects
Your own apps and client work, on one license, for as long as you like.
Used by the people who build the libraries
AnimateReactNative.com by @mironcatalin - the repository with the most eye-catching 🤩 animations for React Native, approved by the authors of react-native-reanimated from Software Mansion ✅
High concentration of "ohhhhh so that's how you do it" 10/10 would recommend
If you don't want to spend hours building animations yourself, check out the new product @mironcatalin just launched. More than 100 premium React Native Animations that make you go 🤤
It's such a great resource for looking things up, finding inspiration, copying some code, or learning "how to make it" really quick. Again, highly recommended!
Oh wow this is stunningly beautiful 🤩. Now I want to write any app just to find an excuse to build something like this.
You suck doing animations in React-Native? Now it is the time to be a PRO. Grab this AWESOME collection from a great guy
Thank you for the valuable lessons I've learned from your videos on React Native animations. They have really helped me improve my skills, and I appreciate the time and effort you put into creating such helpful content! I am a happy customer of http://animatereactnative.com
[Recommended] The best react native complex animated components collection by @mironcatalin
I personally bought access and can assure you it is absolutely worth it. Amount of time I saved / knowledge I acquired is tremendous. Strongly recommend ✅
If you are looking for anything above the bare minimum while building in react native, you need to see this 🧑💻. I own a subscription and it's way more than it's worth for the amount you spend vs the quality you get 💯
AnimateReactNative.com is one of the most comprehensive and complete collections of awesome animations I've seen in React Native world. The variety of examples shared here covers most real-world use cases. If you are looking to learn about different types of animation in React Native or find something for your next app, I highly recommend checking out AnimateReactNative.com!
My go-to resource for anything React Native animated. Not just some great ideas to use in our app, but a great learning resource too to see how animated components should be done!
Catalin I got the good news I have been offered a scholarship to MIT. Thanks for the great videos and content! I used the shared element transitions to build a project showcase that allowed me to attend MIT.
Following your journey over the past few years has been inspiring. Keep up the awesome work! 💯
Catalin is the go-to person when you need to learn about React Native animations. I enjoy code snippets he shares. AnimateReactNative.com looks like great place to browse, learn and “steal” some of his ideas.
Learn how to create stunning animations in React Native! One of the best collections of material, from a wholesome creator. Highly recommend it!
People often ask me why a I freelance? because I can buy tools that makes me a better dev, and contribute to the community in the meantime. I bought the team plan from AnimateReactNative.com because @mironcatalin is cooking cool sh4t that make me jealous
I didn't know about this! All the animations look fantastic 🤩 Great deal, this will save me a lot of time and make my apps look sweet 😎. A pretty instant buy at this price.
Catalin is one of the primer experts for those seeking remarkable mobile animations and UI interactions. With years of experience and a portfolio of impressive work, I would highly recommend you to check this project out.
Catalin is one of the best out there when it comes to animations. The amount of animations in the pack is huge!
Huge thanks to @mironcatalin for the amazing tutorial in React Native Animation! 🙌 I recreated it using React Native Reanimated and loved the process. Your content is super helpful!
Free on npm.
Built by the same hands.
Small libraries that came out of building these animations. Free to use, open on GitHub, with 700+ stars between them.
marquee
An infinite scrolling marquee, powered by Reanimated. Wraps any component, on iOS, Android and Web.
stagger
Cascades any group of children in and out, with Reanimated layout animations.
accordion
An accordion for content with a dynamic height, without layout shifts for its siblings.
ggwave
Data over sound. Two phones pass bytes through the air with no network, no pairing and no account.
skia-loaders
20 particle-trail loaders drawn with Skia and driven entirely on the UI thread.
skill
A free skill that teaches your coding agent how these animations are built.
Pay once.
Keep everything.
No subscription and no sale to wait for. One price, all year.
- Watch all 153 animations
- 13 complete animations: source, MCP, prompt and CLI
- MCP search across the whole library
- The skill for your agent
- The preview app on your phone
- All 153 animations, and every one added later
- The real source, on the page and in the CLI
- The MCP server and a prompt for every animation
- The whole library synced to your machine
- 11 shared element transitions
- Unlimited projects, client work included
- Everything in Pro, for each seat
- One license key, activated per person
- Employees and contractors covered
Questions, answered
My agent can already write animations. Why buy them?
It can, and then you spend the afternoon correcting it. These were built and tuned by hand and they run on current versions. With the MCP server your agent starts from that working code and adapts it to your app, instead of inventing a spring that almost feels right.
What does the MCP server do?
It gives your coding agent four tools: search the library, read one animation's source and packages, list the collections, and read the motion conventions. You ask for “the parallax carousel on the product screen” and the agent fetches it and wires it in.
What is the skill, and is it really free?
It is a set of instructions your agent loads when you ask for an animation: how to structure it so it stays in sync, survives being interrupted and holds frame rate. It is free and holds patterns, not the source of the animations. The library is what you buy.
Which agents does it work with?
Any client that speaks MCP: Claude Code, Cursor, VS Code, Codex and others. If yours doesn't, the prompt on each animation uses the CLI instead.
Do I need an agent to use it?
No. Copy the source from the animation's page, or run one command and the files land in your project with their packages installed.
What does lifetime access mean?
One purchase, no subscription. You get everything on AnimateReactNative.com today and every animation added later, at no extra cost.
Can I use them in client projects and paid apps?
Yes. One license covers as many of your own and your clients' projects as you like.
I bought at the old price. What changes for me?
Nothing to pay. Everything new is part of your license from the day it ships.
How do team licenses work?
A team license has several activations. Share the key with the people who need it and each activates it on their own account. Employees and contractors are covered.
Stop tuning springs.
Ship the screen.
153 animations, the source behind each one, and three ways to bring it into your app.