DEV Community

loading...

React Animation with Framer Motion # 2

HasOne
A TECH enthusiast Guy, who is mad to change himself to be able to change the World. and learning how to share happiness and how to enjoy other's success!
・2 min read

Alt Text

Orchestrate

In today's post we're gonna make cool animation which you see pretty much everywhere which names 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

Alt Text

  • 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 traget
  • 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

Alt Text

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

Alt Text

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/

Discussion (0)

Forem Open with the Forem app