DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for React Animation with Framer Motion # 2
HasOne
HasOne

Posted on • Updated on

React Animation with Framer Motion # 2

EricGit.me

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";
Enter fullscreen mode Exit fullscreen mode

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 }
  };
Enter fullscreen mode Exit fullscreen mode

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>
  );
Enter fullscreen mode Exit fullscreen mode

EricGit.me

  • 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>
);
Enter fullscreen mode Exit fullscreen mode

EricGit.me

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
      }
    }
  };
Enter fullscreen mode Exit fullscreen mode

ericGit.me

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

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

Top comments (0)

50 CLI Tools You Can't Live Without

The top 50 must-have CLI tools, including some scripts to help you automate the installation and updating of these tools on various systems/distros.