React Cookbook

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 React, { Component } from 'react';import posed from 'react-pose';import styled from 'styled-components';import './Animations.css';// Creating our posed divconst ...