Animation With React

Articles & Tutorials

Animated Sparkles in React (
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 (
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 (
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 (
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 (
Apr 15, 2020
Build good-looking and smooth animated arcs in React Native with ReanimatedArc library.
  • Jakub Mazurek
Animating Route Transitions Using React Router (
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 (
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 (
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 (
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 (
Dec 16, 2019
Replacing the Gesture Responder System with the Gesture Handler.
  • Sayid Hayani
Scroll, Refraction and Shader Effects in Three.js and React (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
Aug 01, 2019
Learn the simplest way to listen to CSS animation events in ReactJS.
  • Sonny Recio
Creating a Toggle Animation in React Native (
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 (
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 (
Jun 20, 2019
Learn how to build a zoom feature for your react app using react-pose
  • Dominik Tarnowski
Creating Animations Using React Spring (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
Oct 26, 2017
This is a step-by-step tutorial to make a React animation.
Animating Route Transitions with React Router (
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 (
Aug 06, 2017
5 Options for React Web Animations, and which of these are cross-platform.
Introducing Lottie (
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

WhatsApp Photos - “Can it be done in React Native?” (
May 19, 2020
In this video, we are looking at the WhatsApp Photos user-interaction.
The 10-min React Native Wallet Animation (
May 15, 2020
In this video, we build an animation provided to use by the amazing Mengo To from
The 10-min React Native Swipe (
May 12, 2020
In this video, we build a swiper with React Native.
Making a 3D Engine with React Native (
May 06, 2020
In this video, we build a baby 3d engine with React Native.
The 10-min React Native Skew & Tween Transforms (
May 05, 2020
In this video, we showcase the decompose2d and tween function from redash.
The 5-min Rotation Gesture (+ 5-min Bonus) (
Apr 28, 2020
In this video, we use the RotationGestureHandler for the first time.
React Native & D3: Japanese Candlestick Chart (
Apr 09, 2020
In this clip, we build a simple D3 Candlestick chart using D3.
React Native Pinch Gesture (
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?” (
Mar 31, 2020
In this video, we are looking at the Instagram pinch-to-zoom effect.
Introduction to React Motion (
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 (
Mar 24, 2020
In today's video, we will be looking at React Native transforms.
React Native Long Press Animation Challenge (
Mar 17, 2020
In today's video, we will be looking to implement in React Native the animation challenge.
React Native 3D Animations Challenge (
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 (
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?” (
Feb 18, 2020
In this video, we are building the Airbnb Shared Element Transition.
React Spring to Framer Motion Conversion (
Feb 06, 2020
A quick code blog to show how easy Framer Motion can be.
Tinder Swipe Animation in React (
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 (
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 (
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 (
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 (
Nov 04, 2019
I review a React Animated Sidebar component/hook that Alex created.
Working with Framer Motion (
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 (
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?” (
Oct 22, 2019
In this video, we are building the Google Chrome Tab ordering feature.
Animate words in a sentence using Animated.stagger (
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?” (
Oct 08, 2019
In this video, we are building the Liquid Swipe example from Cuberto.
Spotify Player - “Can it be done in React Native?” (
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 (
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 (
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 (
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 (
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 (
Jul 30, 2019
I talk about the drag and drop list I created with Reanimated and RecyclerListView.
The 5 minutes React Native Tap Gesture (
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 (
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?” (
Jul 16, 2019
In this video, we are building the BBC iPlayer using React Native.
The 5 minutes React Native Declarative Animation (
Jul 04, 2019
In this video, we are a simple animation using React Native.
Managing Animations (Sanely) in (Insanely) Complex Apps (
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?” (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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?” (
Apr 25, 2019
In this video, we are looking at the Apple Bedtime feature.
Clear Todos Pinching - “Can it be done in React Native?” (
Apr 08, 2019
In this video, we are looking at the Google Chrome refresh effect.
The 5 minutes React Native 3D Animation (
Mar 28, 2019
In this video, we are building a 3D animation in 5 minute using React Native.
Tabbar Animation Challenge (
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 (
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 (
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?” (
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) (
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 (
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 (
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 (
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?” (
Dec 31, 2018
In this video, we are looking at the YouTube app transitions.
Motion in React (
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?” (
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?” (
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?” (
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?” (
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 (
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 (
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 (
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?” (
Sep 03, 2018
In this video we implement an apple wallet style animation in React Native.
Motion in JavaScript (
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 (
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 (
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 (
Nov 26, 2017
Small coding session that showcases how to use the React Native Animated API for scrolling animations.

Books & Guides

React Cookbook ( 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 (
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 (
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 (
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 (
May 08, 2019
Learn the ins and outs of the new Framer API!
  • Linton Ye
Animating React (
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 (
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 (
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 (
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 (
Sep 29, 2017
Learn React from the beginning. Style components yourself!
  • Linton Ye
Master React Native Animations (
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 (
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 (
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 (
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 (
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 (
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.


react-native-reanimated (
Aug 07, 2019
React Native's Animated library reimplemented
  • Krzysztof Magiera
  • Michał Osadnik
react-transition-group (
Aug 03, 2019
An easy way to perform animations when a React component enters or leaves the DOM
  • Jason Quense
lottie-react-native (
Jul 29, 2019
Lottie component for React Native (iOS and Android)
react-flip-toolkit (
Jul 09, 2019
An animation utility library for highly configurable layout transitions
  • Alex Holachek
react-spring (
Jun 30, 2019
A spring physics based React animation library.
  • Paul Henschel
react-move (
Jun 14, 2019
Beautiful, data-driven animations for React.
  • Steve Hall
  • Tanner Linsley
velocity-react (
May 09, 2019
React components for interacting with the Velocity DOM animation library.
  • Fiona Hopkins
react-pose (
Mar 05, 2019
React components for the Pose animation system
  • Matt Perry
react-flip-move (
Oct 19, 2018
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique
mauerwerk (
Sep 11, 2018
A react-spring driven masonry-like grid with enter/exit and shared element transitions.
  • Paul Henschel
react-overdrive (
May 17, 2018
Super easy magic-move transitions for React apps
  • Tal Bereznitskey
react-reveal (
May 16, 2018
Easily add reveal on scroll animations to your React app.
  • Roman Nosov
animated (
Feb 14, 2018
Declarative Animations Library for React and React Native
  • Leland Richardson
react-motion (
Oct 03, 2017
A spring that solves your animation problems
  • Cheng Lou