28 Mar 2021

Introduction to Framer Motion |Framework Based React Library


framer motion library production ready prototype animation

Hi Today we are going share with a most popular & powerful framework that Framer Motion. Framer Motion is a framework which is usually use to create Awosome User Interface (UI). This framework depends over Reactjs and React DOM.

Framer Motion is a open source React based library to power the your projects by production-ready animations.

How to import Framer-Motion?

Framework Framer motion is based upon React. It needs React Js Dependency. And lot of other framework.

Framer Motion can be installed using JavaScript ES6 Module.

<script type="module">
import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
import { motion, AnimateSharedLayout, AnimatePresence }  from "https://cdn.skypack.dev/framer-motion@4.0.0";

// start work with (farmer-motion)


{•••}


</script>

Framer-Motion Demo/Example

  
  function SimpleGesture(){
  
  return React.createElement(motion.div, {
  style: {
  width: "100px",
  height: "100px",
  "border-radius": "8px",
  background: "red"

     },
   whileTap : {
   scale : 1.2
    }
  }, "Child Text Node ");
  }
  
  var root = document.getElementById("root");
  
  ReactDOM.render( React.createElement(SimpleGesture), root);
  

Simple Demo by Framer Motion Gestures API.


Reaction:

No comments:

No Comments

COMMENT FROM MESSAGE