Skip to content

Open source, production-ready animation and gesture library for React

License

Notifications You must be signed in to change notification settings

wurstbonbon/motion

This branch is 1 commit ahead of, 3131 commits behind motiondivision/motion:main.

Folders and files

NameName
Last commit message
Last commit date
Oct 26, 2021
Jul 1, 2021
Oct 26, 2021
Nov 23, 2021
Jul 15, 2020
Dec 13, 2021
Nov 23, 2021
Dec 14, 2021
Dec 22, 2021
Mar 9, 2021
Oct 26, 2021
Oct 26, 2021
Jan 25, 2019
Nov 3, 2021
Dec 22, 2021
May 18, 2021
Nov 16, 2018
Oct 26, 2021
Nov 1, 2021
Jun 13, 2019
Nov 11, 2021
Dec 5, 2019
Dec 5, 2019
Dec 2, 2021
Dec 17, 2021
Dec 7, 2021
Sep 24, 2020
Oct 26, 2021
Dec 13, 2021

Repository files navigation

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.

About

Open source, production-ready animation and gesture library for React

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 87.0%
  • HTML 11.5%
  • JavaScript 1.2%
  • Other 0.3%