umma.dev

Framer Motion in React Apps

What is Framer Motion?

A package that lets you animate things within React applications.

Framer Motion Set Up with React

npm install framer-motion

import { motion } from "framer-motion"

// basic example
import { motion } from "framer-motion";

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1, x: 500, scale: 2 }}
/>;

Examples

Resources

GitHub Resource

Documentation Examples

Framer Motion GitHub Repo

React Portfolio Example

Websites Using Framer Motion

Framer

Vercel

Webflow

Typeform

Code Sandbox Examples