@pegasis/framer-motion

A simple and powerful React animation library

Usage no npm install needed!

<script type="module">
  import pegasisFramerMotion from 'https://cdn.skypack.dev/@pegasis/framer-motion';
</script>

README

Framer Motion

Framer Motion

An open source and production-ready motion
library for React on the web.


Chat on Discord


Framer Motion is an open source, production-ready library that's designed for all creative developers.

It looks like this:

<motion.div animate={{ x: 0 }} />

It does all this:

  • Springs
  • Keyframes
  • Layout animations
  • Shared layout animations
  • Gestures (drag/tap/hover)
  • SVG paths
  • Exit animations
  • Server-side rendering
  • Orchestrate animations across components
  • CSS variables

...and a whole lot more.

Get started

🐇 Quick start

npm install framer-motion

import { motion } from "framer-motion"

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

📚 Docs

Check out our documentation for guides and a full API reference.

Or checkout our examples for inspiration.

🛠 Contribute

Want to contribute to Framer Motion? Our contributing guide has you covered.

👩🏻‍⚖️ License

Framer Motion is MIT licensed.

Framer

Get on the same page as your designers before production. Get started with design and prototyping in Framer.