FRAMER MOTION ANIMATION & WHY YOU SHOULD TRY IT OUT -
FRAMER MOTION ANIMATION & WHY YOU SHOULD TRY IT OUT
by on on react js

FRAMER MOTION ANIMATION & WHY YOU SHOULD TRY IT OUT

Animations has been one of my favorite things in building interactive apps. Framer motion is a cool library for animations with react js, vue js and more UI library we know these day. I saw a blog post from dev.to about framer motion & I decided to give a try. I have been an animation lover and has made a lot of videos on animaitons. Infact here are some of the video about animation that I made.

React Native: Beautiful Responsive UI - Loadscreen & Splash Screen

Bottom Tabbar Animation Challenge on React Native UI & Tapgestures + Reanimated

There are a lot of it you would fine on Boltskills Youtube Channel.

Framer motion is a production ready motion library, which supports 60fps animation and complex animation. Here are some of the type of animation you can perform with framer motion.

  1. 1. Target Motion
  2. 2. Transitions
  3. 3. Mount Animations
  4. 4. Keyframes
  5. 5. Variants
  6. 6. Propagation

Framer Motion also supports Gestions and give you the ability to make use of gestures like pan, grab, Hover, Tap to perform some cook animation.


Here is a simple animation with react js using Framer Motion.

import React from "react";
import { motion } from "framer-motion";

function App() {
  return (
    <div
      style={{
        margin: "auto",
        width: "50%",
        paddingTop: "3em",
        height: "500px",
        background: "yellow",
      }}
    >
      <motion.div
        style={{ background: "red", width: "100px", height: "300px" }}
        // animate={{ rotate: 360 }}
        // transition={{ duration: 4 }}
        // animate={{
        //   x: 0,
        //   backgroundColor: "#000",
        //   boxShadow: "10px 10px 0 rgba(0, 0, 0, 0.2)",
        //   position: "fixed",
        //   transitionEnd: {
        //     display: "none",
        //   },
        // }}

        initial={{ x: "100%" }}
        animate={
          {
            // scale: 0.5,
          }
        }
        whileHover={{
          scale: 1.2,
          transition: { duration: 1 },
        }}
        whileTap={{
          scale: 0.9,
        }}
      >
        Div is here
      </motion.div>
    </div>
  );
}
export default App;

Go ahead and give framer motion a try.