Installations

npm install wy-framer-motion

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

16.15.0

NPM Version

8.5.5 Score

74.6

Supply Chain

90.5

Quality

74.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

5

Total

1,121

Closed

151

Merged

965

Issues

Open

250

Total

1,739

Closed

1,489

Releases

Unable to fetch releases

Contributors

111

Unable to fetch Contributors

View All 111 Contributors

Languages

6

TypeScript

HTML

JavaScript

CSS

Makefile

Dockerfile

TypeScript (76.87%)

HTML (15.97%)

JavaScript (6.75%)

CSS (0.24%)

Makefile (0.13%)

Dockerfile (0.03%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

framer

Download Statistics

Total Downloads

204

Last Day

1

Last Week

3

Last Month

12

Last Year

58

GitHub Statistics

MIT License

27,261 Stars

6,134 Commits

904 Forks

112 Watchers

91 Branches

111 Contributors

Updated on Feb 14, 2025

Bundle Size

144.99 kB

Minified

49.58 kB

Minified + Gzipped

Bundlephobia

Maintainers

1

Package Meta Information

Latest Version

7.2.1

Package Id

wy-framer-motion@7.2.1

Unpacked Size

1.61 MB

Size

422.96 kB

File Count

19

NPM Version

8.5.5

Node Version

16.15.0

Total Downloads

Cumulative downloads

Total Downloads

204

Last Day

0%

1

Compared to previous day

Last Week

-40%

3

Compared to previous week

Last Month

200%

12

Compared to previous month

Last Year

-1.7%

58

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

7

@motionone/dom framesync hey-listen popmotion style-value-types tslib @emotion/is-prop-valid

Peer Dependencies

2

react react-dom

Optional Dependencies

1

@emotion/is-prop-valid

Framer Motion Icon

Framer Motion

An open source motion library for React, made by Framer.

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

It looks like this:

1<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

Install framer-motion with via your package manager:

npm install framer-motion

Then import the motion component:

1import { motion } from "framer-motion"
2
3export const MyComponent = ({ isVisible }) => (
4    <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
5)

📚 Docs

Check out our documentation for guides and a full API reference.
Or see our examples for inspiration.

💎 Contribute

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

👩🏻‍⚖️ License

Framer Motion is MIT licensed.

✨ Framer

Design and publish sites that inspire. Try Framer for free.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.2

/10

Last Scanned on 2025-02-10

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More