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

67.8

Supply Chain

90.5

Quality

74.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

4

Total

1,081

Closed

148

Merged

929

Issues

Open

248

Total

1,688

Closed

1,440

Releases

Unable to fetch releases

Contributors

107

Unable to fetch Contributors

View all 107 contributors

Languages

6

TypeScript

HTML

JavaScript

Makefile

CSS

Dockerfile

TypeScript (76.2%)

HTML (16.53%)

JavaScript (6.99%)

Makefile (0.13%)

CSS (0.12%)

Dockerfile (0.03%)

Developer

framer

Download Statistics

Total Downloads

189

Last Day

1

Last Week

1

Last Month

4

Last Year

51

GitHub Statistics

26,480 Stars

6,007 Commits

866 Forks

107 Watching

87 Branches

107 Contributors

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

189

Last day

0%

1

Compared to previous day

Last week

0%

1

Compared to previous week

Last month

33.3%

4

Compared to previous month

Last year

-19%

51

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

Versions

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 2024-12-16

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