Unlock the Power of Realistic Animations with React Motion

Getting Started

To follow along, make sure you have Node and npm installed on your computer, as well as create-react-app (which can be installed globally with npm install -g create-react-app). We’ll be using create-react-app to build our projects.

Understanding React Motion

Before we dive into the examples, let’s take a brief look at the three main components exported by React Motion: Motion, StaggeredMotion, and TransitionMotion. We’ll be working with the Motion component, which uses the render prop pattern to animate our components.

When creating animations, we’ll be working with two key properties: stiffness and damping. These properties control the feel and structure of our animations, with stiffness determining how forcefully the object is pulled towards its final value, and damping simulating friction as the object approaches its target.

Example 1: Animated Hamburger Menu

Let’s create a simple hamburger menu that slides into view when clicked. We’ll use styled-components to create a styled Wrapper component, and React Motion to animate the movement of the side section.

import { Motion, spring } from 'eact-motion';

const Wrapper = styled.div`
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #333;
  color: #fff;
  padding: 20px;
`;

const Menu = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (

  );
};

Example 2: Preloader Animation

Next, we’ll simulate a preloader animation that spins while some action is running in the background. We’ll use React Motion to create a smooth, spinning animation that can be easily customized.

import { Motion, spring } from 'eact-motion';

const Preloader = () => {
  const [isSpinning, setIsSpinning] = useState(true);

  return (
    
      {(style) => (

      )}
    
  );
};

Example 3: Progress Bar

In this example, we’ll build a simple progress bar that fills up as some action completes. We’ll use React Motion to create a smooth, animated fill effect.

import { Motion, spring } from 'eact-motion';

const ProgressBar = () => {
  const [progress, setProgress] = useState(0);

  return (
    
      {(style) => (

      )}
    
  );
};

Example 4: Animated Notification

Let’s create a login system that notifies the user with a sliding animated notification when they click the Sign in button. We’ll use React Motion to create a smooth, animated notification that slides into view.

import { Motion, spring } from 'eact-motion';

const Notification = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    
      {(style) => (

      )}
    
  );
};

Example 5: Animated Jumbotron Revealer

Finally, we’ll create an animated “jumbotron revealer” that gradually reveals a jumbotron image when the page loads. We’ll use React Motion to create a complex, cascading animation that’s sure to impress.

import { Motion, spring } from 'eact-motion';

const JumbotronRevealer = () => {
  const [isRevealed, setIsRevealed] = useState(false);

  return (
    
      {(style) => (

      )}
    
  );
};