Animation With React

Articles & Tutorials

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

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

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

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-spring (react-spring.io)11815
v8.0.27
Jun 30, 2019
A spring physics based React animation library.
  • Paul Henschel
react-transition-group (reactcommunity.org)4887
v4.2.0
Jun 29, 2019
An easy way to perform animations when a React component enters or leaves the DOM
  • Jason Quense
react-flip-toolkit (github.com)1513
v6.6.5
Jun 25, 2019
An animation utility library for highly configurable layout transitions
  • Alex Holachek
react-native-reanimated (github.com)954
v1.1.0
Jun 19, 2019
React Native's Animated library reimplemented
  • Krzysztof Magiera
  • Michał Osadnik
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
lottie-react-native (airbnb.io)10747
v2.6.1
Mar 29, 2019
Lottie component for React Native (iOS and Android)
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