Animation With React

Articles & Tutorials

How to Animate Your React Apps with Lottie (freecodecamp.org)
Mar 12, 2021
Animations can make for a more engaging user experience in our React apps.
  • Reed Barger
The top 5 React animation libraries compared (blog.logrocket.com)
Jan 22, 2021
In this article, we’ll compare the top five React animation libraries and evaluate each for popularity, developer experience, readability, documentation, and bundle size to help you choose the right library for your next React project.
  • Fortune Ikechi
Creating Reusable Animation Components with React and GSAP (blog.bitsrc.io)
Jan 20, 2021
GSAP or GreenSock Animation Platform is a JavaScript animation library that helps you to create fast and silky smooth animations for your interface. It provides simple APIs that grants you full control over your animation sequences, but easy enough to understand and use for simple animations
  • Nathan Sebhastian
Introducing Framer Motion (smashingmagazine.com)
Oct 26, 2020
With Framer Motion, you don’t need to be a CSS expert to make beautiful animations. Framer Motion provides us with production-ready animations and a low-level API we can interact with to integrate these animations into our applications.
  • Nefe Emadamerho-Atori
Animating React Components With GreenSock (smashingmagazine.com)
Sep 14, 2020
In this article, Blessing explains how GSAP plays well with the React library by integrating its functions into a React component in building an example landing page with a variety of animations.
  • Blessing Krofegha
Making Sense of react-spring (css-tricks.com)
Aug 04, 2020
In this post, I’ll try to provide the introduction to react-spring I wish I had when I first started out, then dive into some interesting use cases.
  • Adam Rackis
Create an Animated Product Review Display with React Native (codedaily.io)
Jun 24, 2020
Building reviews into an application is a common necessity for any developer. This is a design that can be added to both web and or native.
  • Jason Brown
Everything You Need to Know About FLIP Animations in React (css-tricks.com)
Jun 16, 2020
Let’s take a look at the intersection of using the WAAPI, FLIP, and integrating all that into React. But we’ll start without React first, then get to that.
  • Kirill Vasiltsov
Another React animation library? Here’s why you should use Framer Motion (blog.logrocket.com)
Jun 11, 2020
If you’re like me, your first thought when you read this headline might be, “Why do we need yet another animation library for React? This is getting tiring!”
  • Glyn Lewington
The top 6 animation libraries in React Native (blog.logrocket.com)
May 26, 2020
In this post, we are going to cover a list of open-source animations libraries that work with React Native and you might consider trying some of them for your next app to accelerate development time.
  • Aman Mittal
Animated Sparkles in React (joshwcomeau.com)
May 19, 2020
On the web, we have two semantic tags we can use when we want to indicate that part of a sentence is particularly significant: <strong> and <em>.
React Animation Libraries for 2020 (blog.bitsrc.io)
May 14, 2020
Recommended React animation libraries that take care of page transitions, scroll events, entering and exiting components, etc.
  • Shanika Wickramasinghe
Accessible Animations in React (joshwcomeau.com)
May 05, 2020
In this tutorial, we'll see how to use the prefers-reduced-motion media query to disable animations in React.
How to Achieve 60FPS Animations in React Native (callstack.com)
May 01, 2020
Use native solutions to achieve smooth animations and gesture-driven interface at 60FPS.
  • Mike Grabowski
ReanimatedArc – Build Circular Animated UI Elements In React Native (callstack.com)
Apr 15, 2020
Build good-looking and smooth animated arcs in React Native with ReanimatedArc library.
  • Jakub Mazurek
Animating Route Transitions Using React Router (dutzi.party)
Apr 04, 2020
Working on a side-project I wanted to create nice “flow”-y animations for when the user navigates between routes. Routes had to implement different “enter” and “leave” animations depending on which page the user navigates to and from, i.e., navigating from the Sign In page to the Home page animates differently (the Sign In page’s leave animation) than from the Sign In page to the App page.
  • Eldad Bercovici
Create Staggering Animations in React (alligator.io)
Mar 05, 2020
In this article, we’ll create a really compelling animation effect using basic React modules. You’ll be surprised how easy this is!
  • William Le
Animating React Components Using React Transition Group (alligator.io)
Jan 17, 2020
Animations help improve the feel of a website or web app and this often leads to better user experience. We can use animations during different events: during page transitions, while scrolling and of course during mounting and unmounting of components in component-based frameworks or libraries such as React.
  • Yusuff Faruq
How to make a confetti cannon with React Spring (blog.logrocket.com)
Jan 06, 2020
In this tutorial, you’ll learn how to implement a confetti cannon that can fire off of any element using React Spring from scratch. No previous React Spring experience required! The only prerequisite is a basic understanding of React and hooks.
  • Joshua Saunders
Using the Gesture Handler in React Native (blog.bitsrc.io)
Dec 16, 2019
Replacing the Gesture Responder System with the Gesture Handler.
  • Sayid Hayani
Scroll, Refraction and Shader Effects in Three.js and React (tympanus.net)
Dec 16, 2019
Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects.
  • Paul Henschel
Micro animations to the rescue (react.christmas)
Dec 15, 2019
People like to understand what's happening around them, whether it's in real life or in an app on their phone. Let us have a little peak into how we can help users of our React Native app.
  • Hannes Waller
Write three.js in React Using react-three-fiber (alligator.io)
Dec 10, 2019
So you want to write some 3D graphics/animations in your React apps using three.js? Let’s see how we can do just that, leveraging the react-three-fiber library.
  • Robert Borghesi
Get started with animations in React (react.christmas)
Dec 03, 2019
This article won't give you all the answers, but hopefully it will help you getting started.
  • Bendik Bjørndal Iversen
The first step into React Native Animations (itnext.io)
Nov 28, 2019
React Native animations can be simpler than you think! This first example may be what you need to start.
  • Mauricio Luis Comin Araldi
Animating React: GreenSock and React Hooks (dev.to)
Oct 29, 2019
Prompted by a one of my students who was having trouble implementing a GSAP animation in React I decided to experiment a little and write up what I learned.
  • Christina Gorton
Animations using React Hooks and GreenSock (blog.logrocket.com)
Oct 03, 2019
Delving into the world of animations on the web can either be a great journey or a tiresome one. My goal is to make it a great journey, while also using the power of React Hooks to further entice your learning experience.
  • Paul Ryan
Animating Next.js page transitions with Framer Motion (reacttricks.com)
Sep 17, 2019
I've been testing several React animation libraries and Framer Motion made the highest impression on me. In this post we'll explore how to use Framer Motion to animate Next.js page transitions.
  • Kristian Heruc
Creating Complex Animations in React Using react-spring (alligator.io)
Sep 04, 2019
Before, we went over how to create single animations with react-spring. Now we’ll be looking over the different methods for combining multiple springs for more complicated animations.
  • Joshua Hall
How to make Tinder-like card animations with React Native (blog.logrocket.com)
Sep 02, 2019
Tinder was among the first “swiping apps” that heavily used a swiping motion for choosing the perfect match. Today we’ll build a similar solution in React Native.
  • Paweł Karniej
Intro to Animations in React Using React Spring (alligator.io)
Aug 29, 2019
In this article we’ll be exploring one of the best animation frameworks for React: React Spring. You’ll learn some of the basics behind changing you component styling into smooth, physics-based transitions.
  • Joshua Hall
React Native Gestures & Animations: you only have 16ms to render everything (codeburst.io)
Aug 27, 2019
The default Gesture and Animation APIs from React Native have some small declarative parts but they are mostly imperative: in most cases, they rely on communication between the JS and Native thread.
React Spring vs Animated (blog.logrocket.com)
Aug 25, 2019
React Spring and Animated are both great animation tools that help us create nice user experiences. Learn about which one is right for your project.
  • Peter Ekene Eze
Using requestAnimationFrame with React Hooks (css-tricks.com)
Aug 21, 2019
Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way.
  • Hunor Márton Borbély
Animating a Canvas with React Hooks (petecorey.com)
Aug 19, 2019
The new React hooks API gives us a really slick way of introducing side effects into our pure, functional components. Let's use that to interact with and animate an HTML5 cavnas.
  • Pete Corey
Implementing animations in React with React Spring (blog.logrocket.com)
Aug 07, 2019
Animations has evolved to very complicated UI element manipulations. They are used to increase interactivity on web pages and to give users an engaging experience while using websites.
  • Peter Ekene Eze
How to Trigger Animation Events using React (blog.bitsrc.io)
Aug 01, 2019
Learn the simplest way to listen to CSS animation events in ReactJS.
  • Sonny Recio
Creating a Toggle Animation in React Native (blog.bitsrc.io)
Jul 22, 2019
This is a toggle that I developed while working for Above. Or more precisely, we developed it for one of their clients.
  • Mikael Ainalem
How to build a reusable animation component using React Hooks (freecodecamp.org)
Jul 18, 2019
Animations delight users. And you’d think, by the sheer volume of articles, that React Hooks delight developers. But for me, fatigue was starting to creep into my opinions on Hooks.
  • Christian Sepulveda
React at 60fps — Building a Medium-Inspired Zoom with React-Pose (blog.bitsrc.io)
Jun 20, 2019
Learn how to build a zoom feature for your react app using react-pose
  • Dominik Tarnowski
Creating Animations Using React Spring (css-tricks.com)
Jun 04, 2019
In this tutorial, we will be looking at two of the five hooks included in react-spring, specifically useSpring and useTrail. The examples we’ll implement make use of both APIs.
  • Kingsley Silas
Animated Page Transitions in Gatsby Websites (scotch.io)
May 21, 2019
In this tutorial, we are going to look at a few through which we can add page transitions to our Gatsby applications to make the site a little bit more interesting and fun.
How to Craft Animations in React with React Simple Animate (alligator.io)
May 08, 2019
In this article, learn how to craft animations in React using a new library called React Simple Animate.
  • William Le
Manage: Making Animations In React Native— The Simplified Guide (blog.bitsrc.io)
Apr 17, 2019
The animations are an important part of the UX of an app, and interacting with the user using the animations create a better experience for the user, the most successful user experience are made with animations, that’s why we are goin to play around animations in React Native.
  • Said Hayani
Getting 60fps Animations in React (alligator.io)
Apr 16, 2019
In this article, learn some CSS “hacks” to get 60fps animations in React.js. If you haven’t been using them already, you might kick yourself once you see they can be the difference between jittery and silky smooth animations.
  • William Le
Improve your UI with React Transition Group (blog.logrocket.com)
Mar 18, 2019
One of the most frequently overlooked principles of creating interactive UIs is transitions. Fortunately, over the last few years, React.js and other component-focused frameworks have changed the way we think about UIs and how we build them.
  • Obinna Ekwuno
Add Animations to React Apps with React-Lottie (scotch.io)
Mar 13, 2019
Introducing, Lottie , a fantastic new technology that allows you to use these animations in real time in a lightweight and flexible format just as easily as static images.
  • Austin Roy
Animation in React (nearform.com)
Feb 14, 2019
Animating your React apps doesn’t have to be a hassle. With these helpful components and prebuilt animation keyframes, you’ll be adding animation to your apps in no time.
  • Donovan Hutchinson
useNativeDriving with React Native (react.christmas)
Dec 21, 2018
Animations are awesome. Make sure they are as smooth as they can.
  • Hannes Waller
Creating Declarative Animations in React Using Popmotion Pose (blog.rangle.io)
Aug 16, 2018
Adding animations to your website doesn't need to be a daunting task, in this post I'll provide a brief overview of the different options available to implement animations on the web.
  • Engin Arslan
Drag Callbacks with Reanimated in React Native (codeburst.io)
Aug 03, 2018
Reanimated is purely declarative and native. In order to communicate back you need to use call which is a declared method that you provide a list of animated values and a JavaScript function.
  • Jason Brown
Building a Complex UI Animation in React, Simply (css-tricks.com)
Jul 12, 2018
Let’s use React, styled-components, and react-flip-toolkit to make our own version of the animated navigation menu on the Stripe homepage.
  • Alex Holachek
How I built a React game with react-dnd and react-flip-move (medium.freecodecamp.org)
Jun 14, 2018
This is a high level overview of my implementation of a puzzle/word game built entirely in React.
  • Nicholas Vincent-Hill
5 React Motion use cases with examples (blog.logrocket.com)
Jun 08, 2018
React-motion is a library that makes it easy to create realistic animations within components using the laws of physics. An endless possibilities of realistic animations can be explored by simply specifying values for stiffness and dampness within one of the exported components.
Effortless animation with React 16.3+ and Popmotion Pose (itnext.io)
May 21, 2018
In this article we’re going to look at how it can be used with React via react-pose to effortlessly build animations with React that look great.
  • Dan Webb
Amazing React animation with react-pose (medium.com)
Apr 10, 2018
Dead easy animation with similar API to styled-components.
  • João Miguel Cunha
Why React needed yet another animation library. Introducing: react-spring (blog.usejournal.com)
Apr 09, 2018
Ever since i started developing i was fascinated by the vividness of animated applications, they felt alive.
  • Paul Henschel
What the React Native docs forgot to tell you about animations (medium.com)
Mar 12, 2018
Unfortunately React Native’s documentation about animations is not so great. Some things are explained rather vaguely and other things are plain missing. That’s why I wanted to give you a quick overview of the things I think need a bit of extra explanation.
  • Karen de Graaf
Building Animations in React From Scratch (medium.com)
Nov 02, 2017
It turns out to be surprisingly feasible to create more complex animation effects in your own code without having to contend with the possible limitations of a React-friendly animation library.
  • Alex Holachek
React animation example and how it works (blog.jakoblind.no)
Oct 26, 2017
This is a step-by-step tutorial to make a React animation.
Animating Route Transitions with React Router (blog.logrocket.com)
Aug 23, 2017
In this article, we’re going to create a React app with the new React Router (v4) and add some animations when navigating between views.
React Animations in Depth (medium.com)
Aug 06, 2017
5 Options for React Web Animations, and which of these are cross-platform.
Introducing Lottie (medium.com)
Feb 01, 2017
Our new open-source tool makes adding animation to native apps a snap.
  • Brandon Withrow
  • Gabriel Peal
  • Leland Richardson
  • Salih Abdul-Karim
  • Airbnb

Video Guides & Talks

Medium mobile article - Sticky footer - React Native with Animated API (youtube.com)
Jan 23, 2021
In this video tutorial we will re-create Medium's mobile app article sticky footer, using ScrollView and Animated API from React Native.
  • Catalin Miron
React Native Scroll Item animation effect - FlatList and Animated API (youtube.com)
Jan 20, 2021
In this video tutorial we will create an amazing scrolling animation/effect that you can apply to the items from a FlatList, ScrollView, SectionList and Animated API from React Native.
  • Catalin Miron
AWESOME React Native carousel animation 60fps - FlatList and Animated API (youtube.com)
Jan 12, 2021
In this video tutorial we will create a beautiful animated carousel in React Native using FlatList and Animated API.
  • Catalin Miron
Advanced 3D Carousel Animation in React Native using FlatList & Animated API (youtube.com)
Jan 06, 2021
In this video tutorial we will create an advanced 3D carousel in React Native, using FlatList and Animated API from React Native.
  • Catalin Miron
React Native Countdown Timer Animation with FlatList and Animated API (youtube.com)
Dec 02, 2020
In this video tutorial you'll learn how to create a Countdown timer in React Native using FlatList and Animated API (Animated.parallel and Animated.sequence) from React Native.
  • Catalin Miron
Advanced React Native Parallax Carousel with FlatList and Animated API (youtube.com)
Nov 25, 2020
In this video tutorial you'll learn how to create an Advanced React Native Parallax Carousel using FlatList and Animated API from React Native.
  • Catalin Miron
Advanced FlatList Carousel Animation in React Native using Animated.API (youtube.com)
Nov 18, 2020
In this video tutorial you'll learn how to create an Advanced React Native Carousel using FlatList and Animated API from React Native.
  • Catalin Miron
Animated Progress Bar Indicator in React Native using Animated API and onLayout (youtube.com)
Nov 11, 2020
In this video tutorial you'll learn how to create a reusable Animated Progress indicator bar component in React Native using React Native Animated API and React Native onLayout.
  • Catalin Miron
React Native Shared Element Transition React Navigation V5 (youtube.com)
Oct 20, 2020
Getting started with React Navigation v5 and Shared Element transition in React Native + create a photography carousel animation using React Native Animated API and FlatList.
  • Catalin Miron
React Native Shared Element Transition React Navigation V5 - Episode 2 (youtube.com)
Sep 16, 2020
Getting started with React Navigation v5 and Shared Element transition in React Native + create a parallax carousel animation using React Native Animated API and FlatList.
  • Catalin Miron
Fluid Body Animation (youtube.com)
Sep 15, 2020
Fluid body animation using Bézier Curves and Reanimated 2.
React Native Shared Element Transition in React Navigation V5 (youtube.com)
Sep 09, 2020
Getting started with React Navigation v5 and Shared Element transition in React Native + create an advanced carousel animation using React Native Animated API.
  • Catalin Miron
React Native Animated Donut Chart with React Native SVG and Animated API (youtube.com)
Sep 02, 2020
In this video tutorial you'll learn how to create an animated donut chart component in React Native using React Native Animated API and React Native SVG.
  • Catalin Miron
Wave Animation (youtube.com)
Sep 01, 2020
Building a wave animation using Bézier Curves.
React Native Advanced Carousel Animations (youtube.com)
Aug 26, 2020
Learn how to create a custom carousel animation using.
  • Catalin Miron
Measures with Reanimated 2 (youtube.com)
Aug 18, 2020
In this video, we are looking a making animations via the dbrand.com color selection.
Advanced React Native FlatList stack carousel animations at 60fps (youtube.com)
Aug 12, 2020
In this tutorial we are going to create a stack carousel animation in React Native using FlatList, Animated API and FlingGestureHandler from react-native-gesture-handler package.
  • Catalin Miron
Masking Animations with React Native (youtube.com)
Aug 11, 2020
In this video, we are looking a making animations via the dbrand.com color selection.
Integrate Custom Drawer animation component in React Navigation v5 (youtube.com)
Jul 31, 2020
In this tutorial we will build a custom drawer in React Native using SVG, Masked View and vanilla Animated API from React Native. We will go through how to animate a Polygon in React Native, how to animate the inner content of the drawer and how the React Native MaskedView is working.
  • Catalin Miron
Cards — React Native Fashion (youtube.com)
Jul 31, 2020
In this series, we are building a React Native App from 0 to 1.
Drawer — React Native Fashion (youtube.com)
Jul 30, 2020
In this series, we are building a React Native App from 0 to 1.
Custom React Native Drawer animation with SVG and Masked View (youtube.com)
Jul 29, 2020
In this tutorial we will build a custom drawer in React Native using SVG, Masked View and vanilla Animated API from React Native. We will go through how to animate a Polygon in React Native, how to animate the inner content of the drawer and how the React Native MaskedView is working.
  • Catalin Miron
React Native Charts with Reanimated 2 (youtube.com)
Jul 28, 2020
In this video, we are building an interactive Graph with Reanimated 2.
iOS-Style Picker with React Native (youtube.com)
Jul 21, 2020
In this video, we are building the iOS-Style Picker with React Native Gesture Handler and Reanimated.
Easy React Native Accordion Menu with Reanimated Transition API (youtube.com)
Jul 17, 2020
In this video tutorial we'll learn how to create an accordion animation in React Native using Transition API from React Native Reanimated library and flexbox styling without the need of layout measurements, just pure flexbox and Transition API from react native reanimated library.
  • Catalin Miron
Mind blowing animation in React Native and Expo with Animated API (youtube.com)
Jul 15, 2020
In this video tutorial we'll learn how to create this mind blowing animation in React Native using perspective, scale and rotation and vanilla Animated Api from React Native. This is working cross platform thanks to expo, in other words you can use it either on web or in your React Native projects.
  • Catalin Miron
Ripple Effect with React Native (youtube.com)
Jun 30, 2020
In this video, we are building the Android Ripple Effect with React Native Gesture Handler and Reanimated
Beautiful Trigonometry - React Native (youtube.com)
Jun 23, 2020
In this video, we are building some of the animations from the Beautiful Trigonometry from Numberphile.
Uber Swipe to Delete - “Can it be done in React Native?” (youtube.com)
Jun 16, 2020
In this video, we are looking at the Uber Eats Swipe to Delete user interaction.
Reanimated 2 Transitions (youtube.com)
Jun 09, 2020
In this video, we look at transitions with Reanimated 2.
Learn React Native Gestures and Animations (youtube.com)
Jun 05, 2020
In this React Native course, you will learn how to add declarative gestures and animations to your React Native projects.
The 5-min Reanimated Worklet (youtube.com)
Jun 02, 2020
In this video, we get to know animation worklets from Reanimated 2.
WhatsApp Photos - “Can it be done in React Native?” (youtube.com)
May 19, 2020
In this video, we are looking at the WhatsApp Photos user-interaction.
The 10-min React Native Wallet Animation (youtube.com)
May 15, 2020
In this video, we build an animation provided to use by the amazing Mengo To from https://designcode.io
The 10-min React Native Swipe (youtube.com)
May 12, 2020
In this video, we build a swiper with React Native.
Making a 3D Engine with React Native (youtube.com)
May 06, 2020
In this video, we build a baby 3d engine with React Native.
The 10-min React Native Skew & Tween Transforms (youtube.com)
May 05, 2020
In this video, we showcase the decompose2d and tween function from redash.
The 5-min Rotation Gesture (+ 5-min Bonus) (youtube.com)
Apr 28, 2020
In this video, we use the RotationGestureHandler for the first time.
React Native & D3: Japanese Candlestick Chart (youtube.com)
Apr 09, 2020
In this clip, we build a simple D3 Candlestick chart using D3.
React Native Pinch Gesture (youtube.com)
Apr 09, 2020
In this clip, we build a simple circular gesture using React Native Gesture Handler and Reanimated.
Instagram Pinch-to-Zoom - “Can it be done in React Native?” (youtube.com)
Mar 31, 2020
In this video, we are looking at the Instagram pinch-to-zoom effect.
Introduction to React Motion (blog.logrocket.com)
Mar 25, 2020
React Motion is an animation library for React applications that makes it easy to create and implement realistic animations. In this guide, we’ll demonstrate how to install the library and share some basic tips to help you build natural-looking, physics-based animations for your React projects.
  • Gaurav Singhal
The Heart of React Native Transform (youtube.com)
Mar 24, 2020
In today's video, we will be looking at React Native transforms.
React Native Long Press Animation Challenge (youtube.com)
Mar 17, 2020
In today's video, we will be looking to implement in React Native the animation challenge.
React Native 3D Animations Challenge (youtube.com)
Mar 10, 2020
In today's video, we will be looking to implement in React Native the following animation challenge.
React Native Tabbar Animation Challenge (youtube.com)
Mar 03, 2020
In today's video, we will be looking to implement in React Native the following animation challenge.
Airbnb Shared Transition - “Can it be done in React Native?” (youtube.com)
Feb 18, 2020
In this video, we are building the Airbnb Shared Element Transition.
React Spring to Framer Motion Conversion (youtube.com)
Feb 06, 2020
A quick code blog to show how easy Framer Motion can be.
Tinder Swipe Animation in React (youtube.com)
Jan 25, 2020
I will demonstrate to you how to run Tinder's Swipe Animation using react-spring and react-gesture in this video.
  • Hong Ly
The 5 Minute React Native Masked View (youtube.com)
Jan 10, 2020
In this video, we are building an angular gradient in React Native using a masked view.
Creating a Flip Card with Animation (youtube.com)
Dec 14, 2019
I will show you how to create a flip card with animation using react-card-flip library in this video.
  • Hong Ly
How to create a React Native animated Clock with Animated API in Expo (youtube.com)
Nov 06, 2019
In this video tutorial we'll learn how to create a minimalist Clock UI and how to animate it using React Native Animated API. We'll be using day.js library to get the timestamp, Animated.timing to animate the seconds, minutes, hours and Animated.stagger to animated the initial render of the Clock.
  • Catalin Miron
React Animated Sidebar Code Review (youtube.com)
Nov 04, 2019
I review a React Animated Sidebar component/hook that Alex created.
Working with Framer Motion (youtube.com)
Oct 25, 2019
Matt Perry (Framer) and Chris Coyier (CSS-Tricks) take a look at the React animation library Framer Motion.
  • Chris Coyier
Simulate Typing Animation with React and react-typical Tutorial (youtube.com)
Oct 24, 2019
In this video will be integrating react-typical react library into a react project and we're going to simulate typing animation.
  • Catalin Miron
Google Chrome Tab Ordering - “Can it be done in React Native?” (youtube.com)
Oct 22, 2019
In this video, we are building the Google Chrome Tab ordering feature.
Animate words in a sentence using Animated.stagger (youtube.com)
Oct 11, 2019
In this lesson we’re going to be animate words in a sentence in React Native and Expo for creating the react-native project. We'll be using Animated stagger function.
  • Catalin Miron
Liquid Swipe - “Can it be done in React Native?” (youtube.com)
Oct 08, 2019
In this video, we are building the Liquid Swipe example from Cuberto.
Spotify Player - “Can it be done in React Native?” (youtube.com)
Sep 10, 2019
In this video, we are building the Spotify bottom sheet gesture and animation using React Native.
Animation and 3D in react-three-fiber (youtube.com)
Sep 06, 2019
3D animation in the browser can be super intimidating. In this episode, Paul Henschel joins to teach us how to use react-three-fiber to create high-performance 3D animations and shapes in the browser.
  • Jason Lengstorf
  • Paul Henschel
Playing with Framer Motion (youtube.com)
Aug 26, 2019
Today we're going to play with Framer Motion to get a feel for how easy it is to get started with. Follow along!
  • Harry Wolff
Airbnb Header Animation | React Native | Reanimated (youtube.com)
Aug 13, 2019
You'll learn how to create the header animation similar to the Airbnb App.
  • Varun Nath
Demystifying complex animations creation process in React Native (youtube.com)
Jul 31, 2019
In this talk we will walk through the process from defining complex animation, to implementing it by going through all stages of animation creation process.
  • Vlad Novick
Drag and Drop List in React Native with Reanimated and RecyclerListView (youtube.com)
Jul 30, 2019
I talk about the drag and drop list I created with Reanimated and RecyclerListView.
The 5 minutes React Native Tap Gesture (youtube.com)
Jul 29, 2019
In this video, we make some fancy tap gesture animation with React Native Reanimated and Gesture Handler.
The 5 minutes React Native Animation Loop (youtube.com)
Jul 23, 2019
In this video, we make some loop animations in React Native using Reanimated.
BBC iPlayer - “Can it be done in React Native?” (youtube.com)
Jul 16, 2019
In this video, we are building the BBC iPlayer using React Native.
The 5 minutes React Native Declarative Animation (youtube.com)
Jul 04, 2019
In this video, we are a simple animation using React Native.
Managing Animations (Sanely) in (Insanely) Complex Apps (youtube.com)
Jul 04, 2019
Unlike state changes which can be instantaneous, animations inherently take time to complete - and that’s a big problem. In this talk we'll learn how to orchestrate animations across multiple components with complex state, and how this theory is implemented in React Animation Orchestrator.
  • Opher Vishnia
Safari Tabs - “Can it be done in React Native?” (youtube.com)
Jul 02, 2019
In this video, we are building the iOS Safari Tabs animations using React Native.
The 5 minutes React Native SVG Path Morphing (youtube.com)
Jun 25, 2019
In this video, we are building an SVG Path morphing in 5 minutes using React Native.
The 5 minutes React Native D3 & SVG Animation (youtube.com)
Jun 11, 2019
In this video, we are building a D3/SVG graph animation in 5 minutes using React Native.
Magic Move transitions in React-native (youtube.com)
May 28, 2019
In this presentation Hein will dive further into shared element transitions (aka magic-moves), how you can achieve them using react-native-magic-move; and what additional work needs to be done to make this is a first class feature in react-native.
  • Hein Rutjes
React-spring: on animations and hooks (youtube.com)
May 28, 2019
This talk will be about the state of React animation in general, the methods and techniques employed, the journey we took with react-spring, and how Reacts new hooks feature can change the way animation is supposed to work for the foreseeable future.
  • Alec Larson
Trying react-spring (React animation library) for the first time (youtube.com)
May 10, 2019
I try out react-spring, an animation library for React that has an api in the style of React Hooks. Really impressed!
  • Mattias Petter Johansson
Demystifying Complex Animations Creation Process in React Native (youtube.com)
May 03, 2019
In this talk we will walk through the process from defining complex animation, to implementing it by going through all stages of animation creation process.
  • Vladimir Novick
Delightful UI animations by understanding the brain (youtube.com)
May 01, 2019
Understanding this could be the key to confidently adding animations to our websites and apps. Animations with code seem hard, but they shouldn’t be. In this talk, I will give some tips and explore some tools to simplify creating animations in React.
  • Bruno Lourenço
Apple Bedtime - “Can it be done in React Native?” (youtube.com)
Apr 25, 2019
In this video, we are looking at the Apple Bedtime feature.
Clear Todos Pinching - “Can it be done in React Native?” (youtube.com)
Apr 08, 2019
In this video, we are looking at the Google Chrome refresh effect.
The 5 minutes React Native 3D Animation (youtube.com)
Mar 28, 2019
In this video, we are building a 3D animation in 5 minute using React Native.
Tabbar Animation Challenge (youtube.com)
Mar 13, 2019
In today's live stream, we will be looking to implement in React Native the Tabbar animation challenge.
React Native Morph SVG & Gradient animation (youtube.com)
Feb 22, 2019
In this video we'll use Popmotion Pure to morph SVGs with Flubber and also animate the LinearGradients in React Native.
  • Catalin Miron
3D Flip Animations in React Native (youtube.com)
Feb 21, 2019
In this video, we are looking at the Flipboard 3d animation. This video is all about 3D transformations in React Native.
Flipboard - “Can it be done in React Native?” (youtube.com)
Feb 18, 2019
In this video, we are looking at the Flipboard 3d animation. Hope that you will enjoy the video! 😀 Let me know what you think.
Animate React Native with Popmotion Pure (keyframes & stagger) (youtube.com)
Feb 03, 2019
In this video we'll use Popmotion Pure to animate Views in React Native. We'll be covering Keyframes and Stagger.
  • Catalin Miron
React Native pseudo maze animation with Pose (youtube.com)
Jan 13, 2019
In this lesson we’re be building a react native animation using pose library by Popmotion and Expo for creating the react-native project.
  • Catalin Miron
Simple Animations In React (youtube.com)
Jan 13, 2019
In this video we will take a look at the React Spring library and create some simple animations and transitions.
Insights from Building Rich Animated Experiences in React (youtube.com)
Jan 07, 2019
Have you ever wondered why good performance is so hard to achieve in heavy animated web applications? This talk is a practical retrospective on the discoveries, the pains and the journey that led me to build reliable bulletproof animations and transitions in real life production projects.
  • Jeremias Menichelli
YouTube Transitions - “Can it be done in React Native?” (youtube.com)
Dec 31, 2018
In this video, we are looking at the YouTube app transitions.
Motion in React (youtube.com)
Dec 02, 2018
This talk will be a comparison of several approaches to implementing motion in React, from using CSS-in-JS tools like Styled Components, as well as animating components with vanilla JS, functional libraries, or libraries more closely tied to the ecosystem like React Motion.
  • Kaylie Kwon
Snapchat Discovery - “Can it be done in React Native?” (youtube.com)
Nov 12, 2018
In this video, we are looking at the Snapchat app. We use React Native gesture-handler and reanimated to implement the swiping out animation from the discovery section of the app. We use two new modules: Gesture Handler and Reanimated 🙌🏻Hope that you will enjoy the video! 😀 Let me know your thoughts on this.
Instagram Stories - “Can it be done in React Native?” (youtube.com)
Oct 29, 2018
In this video, we are looking at the Instagram stories transition effect. We build 3 solutions to this problem: each solution has a different level of precision and simplicity.
Headspace Meditation - “Can it be done in React Native?” (youtube.com)
Oct 16, 2018
In this video, we are looking at the Headspace meditation app. We are cloning one of the smooth animations it provides by using SVG Morph first and then we take a look at building the same effect with After Effects / Lottie.
Google Chrome iOS Tabs - “Can it be done in React Native?” (youtube.com)
Sep 26, 2018
In this video, we try to clone the cool animations from Google Chrome iOS tabs.
Demystifying complex animations creation process in React Native (youtube.com)
Sep 14, 2018
While Animations can be created in React Native pretty easily, real world mobile apps require a combination of several layers of animations, gestures and micro interaction animations to make user experience stand out. In this talk we will walk through the process from defining complex animation, to implementing it by going through all stages of animation creation process.
  • Vladimir Novick
Owning Transitions (youtube.com)
Sep 14, 2018
The "Transitioner" is the view in React Navigation responsible for animating between screens and supporting navigation gestures. We will discuss how views like "stack" work today, how they evolved, and how they fit into React Navigation and other navigation libraries. Historically, it has been quite difficult to create custom screen transitions and gestures. So the time has come to introduce a new Transitioner, and give you complete control over screen transitions in your React Native App.
  • Eric Vicenti
A sleek view transition recipe for web apps (youtube.com)
Sep 14, 2018
Have you ever wondered why good performance around animated transitions on views is so hard to achieve in web projects? Animations and performance are one of the top point of discussion when comparing web application to their native counterparts. I’m going to share my learnings on how to safely kick off route based animations, performance tricks and modern workflows to build reliable transitions for web applications.
  • Jeremias Menichelli
Joe & the Juice Cards - “Can it be done in React Native?” (youtube.com)
Sep 03, 2018
In this video we implement an apple wallet style animation in React Native.
Motion in JavaScript (youtube.com)
Mar 31, 2018
You may have heard of CSS in JS, but what alternatives are there for implementing interactive motions in JS? This talk will be a comparison of several approaches from using vanilla Javascript to libraries like Anime.js and Popmotion, as well as ones in React ecosystem like React Transition Group and React Motion.
  • Kaylie Kwon
Introduction to React Motion Tutorial (youtube.com)
Mar 17, 2018
We'll take a look at how to get up and running with React Motion to animate an element into and off of the screen based on a toggle value in the state.
React Native Fiber — a starter kit focused on animations (youtube.com)
Dec 04, 2017
Fiber is an iOS and Android React Native theme heavily focused on animations. It is inspired by Fiber from Framer.
Scroll Animations in React Native (youtube.com)
Nov 26, 2017
Small coding session that showcases how to use the React Native Animated API for scrolling animations.

Books & Guides

React Cookbook (packtpub.com)Get it on Amazon
Aug 30, 2018
Over 66 hands-on recipes that cover UI development, animations, component architecture, routing, databases, testing, and debugging with React
  • Carlos Santana Roldan

Courses & Video Series

React Native Gestures and Animations (start-react-native.dev)
Aug 25, 2019
Learn to leverage the power of declarative gestures and animations in order to build delightful user experiences that run at 60 fps even on low-grade Android devices.
UI Interactions in Framer Playground (designcode.io)
Jun 11, 2019
Create powerful design and code components for your app and design system using Framer X. Learn how to design and animate an app from scratch and use React to create production-ready components.
  • Meng To
React Native for Designers Part 2 (designcode.io)
May 15, 2019
Learn to build an iOS and Android app from scratch. A 6-hour course for designers teaching custom animations, Styled Components, Redux, API data, HTML rendering with Markdown and adaptive layouts in React Native.
  • Meng To
Framer UI Motion: Toggle (learnreact.design)
May 08, 2019
Learn the ins and outs of the new Framer API!
  • Linton Ye
Animating React (leveluptutorials.com)
May 01, 2019
Learn practical, physics based interface animation in React with React Spring. We dive into React Spring, an exceptional modern React animations library, to build common interface animations.
React for Designers (designcode.io)
Jul 24, 2018
With this course, you'll learn how to build and animate your site from scratch. Create highly customizable components for your design system. A 6-hour course for designers, by designers.
  • Meng To
Level 2 React (leveluptutorials.com)
May 23, 2018
In this series, we dive into intermediate React concepts where you'll learn things like, how to use the React Context API, how to make a portal in React, how to use and understand render props as well as animated transitions and interactive animations in React.
React: Managing Complex Interactions (lynda.com)
Mar 14, 2018
Learn how to add complex interactions-hover and click interactions, navigation popups, grids and galleries, scrolling, and more-in React applications.
React 101 For Designers (learnreact.design)
Sep 29, 2017
Learn React from the beginning. Style components yourself!
  • Linton Ye
Master React Native Animations (reactnativeanimations.com)
Aug 05, 2017
Simple, easy to follow, step-by-step lessons for every type of animation.
  • Jason Brown

Podcast Episodes

Matt Perry on Magic Motion and React Performance Anxiety (reactpodcast.com)
May 14, 2020
This week Matt Perry tells about Magic Motion — the killer new feature for Framer Motion that makes shared element transitions easy for React developers.
Animations and React Morphe with Bruno Lorenco (devchat.tv)
Aug 20, 2019
Bruno talks about what React Morph is, how it originated, and the flip animation technique. React Morph is uniquely designed to be compatible with many platforms. Bruno talks about his goal to make everything simpler, from having animations on your website, to making things easier for users of the application.
  • Dave Ceddia
  • Thomas Aylott
  • Leslie Cohn-Wein
  • Lucas Reis
  • Bruno Lorenco
Paul Henschel on React Spring (reactpodcast.com)
Jul 25, 2019
This week, on React Podcast, We sit with Paul Henschel and talk animation. Paul is the creator of React-spring a library for animating UI based on spring physics. We talk about the library's origin, its future, and how to create lasting beauty on the web.
React Native Animations feat. Catalin Miron (devchat.tv)
Apr 30, 2019
In today’s episode of the React Native Radio Podcast, the panel talks with Catalin Miron who is currently working for Skype. Catalin uses React and React Native and talks with Nader Dabit about past and current projects.
Make the Web Look Great with Matt Perry. On declarative animation, open source management, and importance of the open web (reactpodcast.com)
Jan 17, 2019
Matt Perry is the developer behind PopMotion, a declarative animation library for the web. Chantastic asks his inspiration for PopMotion, the difficulties of maintaining a low-level open source library, what he things declarative APIs might look like in the future.

Libraries

react-native-reanimated (github.com)954
v1.2.0
Aug 07, 2019
React Native's Animated library reimplemented
  • Krzysztof Magiera
  • Michał Osadnik
react-transition-group (reactcommunity.org)4887
v4.2.2
Aug 03, 2019
An easy way to perform animations when a React component enters or leaves the DOM
  • Jason Quense
lottie-react-native (airbnb.io)10747
v3.1.0
Jul 29, 2019
Lottie component for React Native (iOS and Android)
react-flip-toolkit (github.com)1513
v6.6.9
Jul 09, 2019
An animation utility library for highly configurable layout transitions
  • Alex Holachek
react-spring (react-spring.io)11815
v8.0.27
Jun 30, 2019
A spring physics based React animation library.
  • Paul Henschel
react-move (react-move.js.org)5779
v6.0.0
Jun 14, 2019
Beautiful, data-driven animations for React.
  • Steve Hall
  • Tanner Linsley
velocity-react (google-fabric.github.io)2903
v1.4.3
May 09, 2019
React components for interacting with the Velocity DOM animation library.
  • Fiona Hopkins
react-pose (popmotion.io)16433
v4.0.8
Mar 05, 2019
React components for the Pose animation system
  • Matt Perry
react-flip-move (joshwcomeau.github.io)2701
v3.0.3
Oct 19, 2018
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique
mauerwerk (github.com)728
v2.0.2
Sep 11, 2018
A react-spring driven masonry-like grid with enter/exit and shared element transitions.
  • Paul Henschel
react-overdrive (github.com)2865
v0.0.10
May 17, 2018
Super easy magic-move transitions for React apps
  • Tal Bereznitskey
react-reveal (react-reveal.com)1065
v1.2.2
May 16, 2018
Easily add reveal on scroll animations to your React app.
  • Roman Nosov
animated (animatedjs.github.io)1598
v0.2.2
Feb 14, 2018
Declarative Animations Library for React and React Native
  • Leland Richardson
react-motion (github.com)16262
v0.5.2
Oct 03, 2017
A spring that solves your animation problems
  • Cheng Lou