React Animation with Framer Motion # 2
Tags: javascript, react, frontend, webdev
Published: 2020-06-18 17:21:04

---
title: React Animation with Framer Motion # 2
published: true
description: Learn animation in React, orchestrate
tags: #javascript #react #frontend #webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/q8nkduwyfdfssw5ltgfd.gif
---
![EricGit.me](https://dev-to-uploads.s3.amazonaws.com/i/q8nkduwyfdfssw5ltgfd.gif)

## Orchestrate

In today's post we're gonna make cool animation which you see pretty much everywhere which name is Orchestrate, let's make it 


Assuming you've installed ReactJs along with framer-motion in your machine, or you can just open up codesandbox which is absolute free and Awesome UI. 
let's import all the dependencies in our project
```
import * as React from "react";
import { useState } from "react";
import { motion } from "framer-motion";
```

Now, let's talk turkey, we would have a list which contain item as real-world example, there must be a list ( collection of items ).
we will keep the the initial opacity of the list `opacity: 0` then we'll have to make it visible `opacity: 1`, we can declare a object with keys hidden as well as visible, like so
```
  const list = {
    hidden:  { opacity: 0 },
    visible: { opacity: 1 }
  };
```

I think you got the picture, now we need to pass the object to the `motion` component via `variant`.

```
 const list = {
    hidden: { opacity: 0 },
    visible: { opacity: 1 }
  };

  return (
      <motion.div
        initial="hidden"
        animate="visible"
        variants={list}
      >
        <h1>Hello</h1>
      </motion.div>
  );
```
![EricGit.me](https://dev-to-uploads.s3.amazonaws.com/i/7y58z0zj9oorjmrs64qw.gif)

- initial is the `motion` props, address the the beginning state
- animate props take any CSS property to animate the target, if value change in animate props, component will automatically animate to update the target
- variants props take object with a predefined value like above


### Add Items

```
  const item = {
    hidden: { opacity: 0 },
    visible: { opacity: 1 }
  };

return (
   <motion.div 
       initial="hidden" 
       animate="visible" 
       variants={list}>
          <motion.div variants={item} />
          <motion.div variants={item} />
          <motion.div variants={item} />
          <motion.div variants={item} />
      </motion.div>
);
```
![EricGit.me](https://dev-to-uploads.s3.amazonaws.com/i/hbmw9560mdczlsj80eaw.gif)

for the items also declare object with the `hidden` and `visible` keys with values. and add some item inside parent element, but for the child elemnent we don't need to define `animate`, `hidden` properties, cause of `variants`, 
 If a motion component has children, changes in variant will pass down through the component hierarchy until a child component defines its own `animate` property. it declare automatically for us. never forget this!


### We almost there

we need to pass one by one each element, not all at the same time, let do this

```
const list = {
    hidden: {
      opacity: 0,
      transition: {
        when: "afterChildren"
      }
    },
    visible: {
      opacity: 1,
      transition: {
        when: "beforeChildren",
        staggerChildren: 0.3
      }
    }
  };
```

![ericGit.me](https://dev-to-uploads.s3.amazonaws.com/i/hbmw9560mdczlsj80eaw.gif)

by declaring `transition` properties in the list, we tell the `transition` to animate after child and before Child, and `staggerChildren` takes value as delay!

[Live Demo source code](https://codesandbox.io/s/framer-motion-orchestrate-y8jm0)


Resource: https://www.framer.com/api/motion/animation/