Framer Motion-React.js library

Framer Motion is react library Allow us to make smooth complex animations in reacting with simple and small amounts of code

Code discuss below is available on my GitHub- Click here to visit

Framer motion's website-https://www.framer.com/motion/

more things are in animation but to get started

Framer-Motion setup→

in terminal put→ npm i framer-motion

Framer-Motion animation props→

1. BOX1→Move this box from left to right

define which HTML element you want to animate for that

import motion element from framer-motion

now use props to animate and do a lot of stuff

duration for the tween type and stiffness for the spring type

state for controlling the animation

react-way→

import React, { useState } from "react";
import { motion } from "framer-motion";
export default function Box1() {
  const [isAnimating, setIsAnimating] = useState(false);
  return (
    <div className="box-container">
      <motion.div
        className="box"
        animate={{
          x: isAnimating ? 1750 : 0,
          opacity: isAnimating ? 1 : 0.5,
          rotate: isAnimating ? 360 : 0,
        }}
        initial={{
          opacity: 0.1,
        }}
        transition={{
          type: "spring",
          stiffness: 20,
        }}
        onClick={() => setIsAnimating(!isAnimating)}
      ></motion.div>
    </div>
  );
}

Event and Drag

on hovering it should get bigger and on clicking it should get smaller

and also should be dragable

import React, { useState } from "react";
import { motion } from "framer-motion";
export default function Box2() {
  return (
    <div className="box-container">
      <motion.div
        className="box"
        drag
        dragConstraints={{
          right: 20,
          left: -20,
          top: 5,
          bottom: 5,
        }}
        whileHover={{
          //10% larger
          scale: 1.1,
        }}
        whileTap={{
          //10% samller
          scale: 0.9,
        }}
      ></motion.div>
    </div>
  );
}

Variants in Framer Motion

initial animation for box to appear and then 3 box inside it appears

variant is predefine the style and tell what you want to change

import { motion } from "framer-motion";
export default function Box2() {
  const boxVarient = {
    shree: {
      x: 100,
      scale: 1.5,
      backgroundColor: "black",
    },
    dubbu: {
      x: 20,
      scale: 0.5,
      backgroundColor: "blue",
    },
  };
  return (
    <div className="box-container">
      <motion.div
        className="box"
        variants={boxVarient}
        initial="dubbu"
        animate="shree"
      ></motion.div>
    </div>
  );
}

animation for 3 boxes are→

if parent tag has variant then children will have it to

import { motion } from "framer-motion";
export default function Box2() {
  const boxVariant = {
    hidden: {
      x: "-100vw",
    },
    visible: {
      x: 0,
      trasition: {
        delay: 0.5,
        when: "beforeChildren",
      },
    },
  };
  const listVarient = {
    hidden: {
      x: -10,
      opacity: 0,
    },
    visible: {
      x: 0,
      opacity: 1,
      staggerChidren: 0.2,
    },
  };
  return (
    <div className="box-container">
      <motion.div
        className="box"
        variants={boxVariant}
        animate="visible"
        initial="hidden"
      >
        {[1, 2, 3].map((box) => {
          return (
            <motion.li
              className="boxItem"
              variants={listVarient}
              animate="visible"
              initial="hidden"
            ></motion.li>
          );
        })}
      </motion.div>
    </div>
  );
}

Keyframes

The animation is created by gradually changing from one set of CSS styles to another.

animation is squares will grow and shrink in that its border-radius also changes and rotation also happens

import { motion } from "framer-motion";
export default function Box4() {
  return (
    <div className="box-container">
      <motion.div
        className="box"
        animate={{
          scale: [1, 1.4, 1.4, 1, 1],
          borderRadius: ["20%", "20%", "50%", "50%", "20%"],
          rotate: [0, 0, 270, 270, 0],
        }}
        transition={{
          duration: 2,
        }}
      ></motion.div>
    </div>
  );
}

Animation with button (with event useAnimation Hook)

as we discuss in Box1 example it is very react way to do that animation now we wills see the magic of useAnimation Hook

import { motion, useAnimation } from "framer-motion";
export default function Box5() {
  const control = useAnimation();
  return (
    <div className="box-container">
      <button
        onClick={() => {
          control.start({
            X: 1500,
            transition: { duration: 2 },
          });
        }}
      >
        Move Right
      </button>
      <button
        onClick={() => {
          control.start({
            X: 0,
            transition: { duration: 2 },
          });
        }}
      >
        Move Left
      </button>
      <button
        onClick={() => {
          control.start({
            borderRadius: "50%",
            transition: { duration: 1 },
          });
        }}
      >
        Circle
      </button>
      <button
        onClick={() => {
          control.start({
            borderRadius: 0,

            transition: { duration: 2 },
          });
        }}
      >
        Squre
      </button>
      <button
        onClick={() => {
          control.stop();
        }}
      >
        Stop
      </button>
      <motion.div className="box" animate={control}></motion.div>
    </div>
  );
}