DEV Community

Obada
Obada

Posted on

What is React Framer Motion?

#webdev #programming #react #framermotion

React Framer Motion
Framer Motion is an open-source motion library for React, Created by Framer. Framer Motion is production-ready and offers a wide of features, it was created to help developers create smooth and interactive animations with ease.

Key Features
Framer Motion provides a variety of features to enhance your animation, including:

  • Spring: Create natural and realistic animations using spring control.

  • Keyframes: Define animations using keyframes for more control.

  • Layout animation: Animate layout changes seamlessly.

  • Shared layout animations: Coordinate animations across multiple components.

  • Gestures: Add drag, tap, and hover interactions to your animation.

  • Scroll animations: Animate elements based on scroll position.

  • SVG paths: Animate SVG elements and paths.

  • Exit animations: Define animations for elements when they are removed from the DOM.

  • Server-side rendering: Support for server-side rendering to improve performance.

  • Hardware-accelerated animations: Utilize hardware acceleration for smoother animations.

  • Orchestrate animations across components: Coordinate complex animations across multiple components.

  • CSS variables: Use CSS variables to control animations dynamically.

Getting Started
To get started with Framer Motion, you need to install it via your package manager. You can use npm to install it:

npm install framer-motion
Enter fullscreen mode Exit fullscreen mode 
import { motion } from "framer-motion";

export const MyComponent = ({ isVisible }) => (
  <motion.div animate={{ opacity: isVisible ? 1 : 0 }}/>
);
Enter fullscreen mode Exit fullscreen mode

Practical Example
Here is a practical example of how to use Framer Motion to create a simple animation:

import React, { useState } from "react";
import { motion } from "framer-motion";
const App = () => {
 const [isVisible, setIsVisible] = useState(true);
 return (
   <div>
     <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
     <motion.div
       animate={{ opacity: isVisible ? 1 : 0 }}
       transition={{ duration: 0.5 }}
     >
       Hello, Framer Motion!
     </motion.div>
   </div>
 );
};
export default App;
Enter fullscreen mode Exit fullscreen mode

In this example, clicking the button toggles the visiblity of the "Hello, Framer Motion" with a smooth fade-in and fade-out animation.

Conclusion
Framer Motion is a powerful and versatile animation library for React that offers a wide range of features to create smooth and interactive animations. It is easy to get started with and provides extensive documentation and examples to help you create stunning animations for your projects.

Top comments (0)