Creating our first animation with React Pose

React Pose is a declarative motion system for HTML, SVG, and React. It is a very cool library with which you can do amazing animations with React.

Getting ready

For this recipe, we will need to install the following packages and update our react and react-dom to be 16.4.2 or higher:

  npm install react react-dom react-pose styled-components

How to do it...

Follow these steps to create a React pose animation:

1. First, let's create our component structure:

import React, { Component } from 'react';
import posed from 'react-pose';
import styled from 'styled-components';
import './Animations.css';

class Animations extends Component {
render() {
return (
      <div class="Animations">

      </div>
    );
  }
}

export default Animations;

File: src/components/Animations/index.jsx

2. The second thing we need to do is to create our first posed div with the states of our animation (normal and hover) and create a styled div using styled-components:

import...