Using Framer Motion to animate your website ✨

Writing long CSS animations has always been a hassle for web developers. But, what if I tell you, there is a better way of creating beautiful and pleasing animations with less code, yet incredibly easy?

The answer to this question is Framer Motion. 💯 Framer Motion is a production-ready motion library for React from Framer. Plus, you could use it with TypeScript, as well as Styled Components.

Using Framer Motion in one of my recent projects, I could animate various website elements with only a few lines of code. Therefore, this article is a sign for you to use Framer Motion for your next project! 😉

What is Framer Motion? 🚀

Framer Motion is a popular JavaScript library for creating animations and interactive user interfaces. It's built on top of React, which makes it easy to integrate with your existing React projects. With Framer Motion, you can add smooth, visually appealing animations to your website without having to write complex CSS or JavaScript code.

Pre-requisites ✅

• NodeJS installation complete.

• Knowledge of ReactJs.

Installation ⇣

To get started with Framer Motion, you'll need to install it as a dependency in your project. You can do this using npm or yarn:

npm install framer-motion

or...

yarn add framer-motion

After the installation is done, it needs to be imported into your project.

import { motion } from "framer-motion";

Framer Motion uses a declarative syntax to define animations, which means you can define animations using plain JavaScript objects.

Creating Animations with Framer Motion 🪄

Framer Motion provides several components that you can use to create animations. One of the most commonly used components is the motion component, which you can use to animate any React component.

To create a simple animation using Framer Motion, let's start by animating a div element. Here's an example:

import { motion } from "framer-motion";

function App() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      Hello, world!
    </motion.div>
  );
}

In this example, we're using the motion component to animate a div element.
We're using the initial and animate props to define the starting and ending states of the animation.
In this case, we're animating the opacity property from 0 to 1. We're also using the transition prop to define how long the animation should take.

Adding interactivity to your animations 🔮

One of the great things about Framer Motion is that it makes it easy to add interactivity to your animations. You can use Framer Motion's useAnimation and useMotionValue hooks to create dynamic animations that respond to user input.

For example, let's say we want to create an animation that rotates a div element when the user hovers over it. Here's an example:

import { motion, useAnimation } from "framer-motion";

function App() {
  const controls = useAnimation();

  return (
    <motion.div
      onMouseEnter={() => controls.start({ rotate: 360 })}
      animate={{ rotate: 0 }}
      transition={{ duration: 1 }}
    >
      Hover me!
    </motion.div>
  );
}

In this example, we're using the useAnimation hook to create a control for the animation. We're also using the onMouseEnter prop to trigger the animation when the user hovers over the div element. Finally, we're using the animate and transition props to define the starting and ending states of the animation.

These are just a few of the many amazing animations you can achieve from this amazing library! Framer Motion is super powerful when it comes to creating animations and interactive UI features.

Why would you wanna use Framer Motion for your next project? 🌟

1. Smooth and Performant Animations 🍃

   Framer Motion is built with performance in mind and uses hardware-accelerated animation under the hood. This means that the animations you create with Framer Motion will be smooth and performant, even on lower-end devices.

2. Declarative Syntax 📝

   Framer Motion's declarative syntax makes it easy to create complex animations without having to write a lot of code. With Framer Motion, you can create animations using plain JavaScript objects, which makes it easy to understand and modify your code.

3. Integrates with React 🌐

   Framer Motion is built on top of React, which means that it integrates seamlessly with your React projects. This makes it easy to use Framer Motion alongside other React libraries and components.

4. Interactivity ☃️

   Framer Motion makes it easy to add interactivity to your animations. With Framer Motion's hooks and components, you can create animations that respond to user input, such as mouse clicks, mouse movements, and touch events.

5. Wide range of animation options 🍱

   Framer Motion provides a wide range of animation options, including keyframe animations, physics-based animations, and more. This gives you the flexibility to create the exact animation you need for your project.