Description
Motion is an open source, production-ready library that's designed for all creative developers.
It looks like this:
framer/motion alternatives and similar libraries
Based on the "UI Animation" category.
Alternatively, view framer/motion alternatives based on common mentions on social networks and blogs.
-
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
react-router-transition
Transitions built for react-router, powered by react-motion. -
react-gsap-enhancer
Use the full power of React and GSAP together. -
React Native Circle Menu
⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Made by @Ramotion -
react-motion-ui-pack
Wrapper component around React Motion for easier UI transitions. -
react-spark-scroll
Scroll-based actions and animations for react. -
react-mt-svg-lines
A React.js wrapper component to animate the line stroke in SVGs. -
react-web-animation
React components for the Web Animations API -. -
react-transitive-number
React component to apply transition effect to numeric strings, a la old Groupon timers. -
react-parallax-component
Easiest way to add scroll parallax effect on the component. -
auto-size-transition
A component that scale dynamically according to the internal children size -
react-tsparticles
A lightweight component to easily create interactive particles animations
Get performance insights in less than 4 minutes
Do you think we are missing an alternative of framer/motion or a related project?
Popular Comparisons
-
framer/motionvsreact-gsap-enhancer
-
framer/motionvsreact-spring
-
framer/motionvsreact-motion
-
framer/motionvsrc-animate
-
framer/motionvsreact-router-transition
|
SaaSHub - Software Alternatives and Reviews
Sponsored
www.saashub.com
|
README
An open source and production-ready motionlibrary for React on the web.
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:
- Spring animations
- Simple keyframes syntax
- Gestures (drag/tap/hover)
- Layout and shared layout animations
- SVG paths
- Exit animations
- Server-side rendering
- Variants for orchestrating 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 Motion? Our contributing guide has you covered.
License
Motion is MIT licensed.
*Note that all licence references and agreements mentioned in the framer/motion README section above
are relevant to that project's source code only.