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-spring
✌️ A spring physics based React animation library -
react-flip-move
Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. -
-
react-router-transition
painless transitions built for react-router, powered by react-motion -
react-anime
✨ (ﾉ´ヮ´)ﾉ*:･ﾟ✧ A super easy animation library for React! -
-
react-gsap-enhancer
Use the full power of React and GSAP together -
React Native Circle Menu
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Reactnative library made by @Ramotion -
react-motion-ui-pack
Wrapper component around React Motion for easier UI transitions. -
gooey-react
The gooey effect for React, used for shape blobbing / metaballs (0.5 KB) 🧽 -
react-parallax-tilt
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies -
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-atv-img
A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React. -
react-track
Track the position of DOM elements. Create cool animations. -
react-web-animation
React components for the Web Animations API - http://react-web-animation.surge.sh -
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 -
react-tween
DEPRECATED - Recommend https://github.com/tannerlinsley/react-move instead! -
-
-
-
auto-size-transition
A component that scale dynamically according to the internal size -
react-scroll-rotate
Very simple react component for rotate element based on scroll position -
react-tsparticles
A lightweight component to easily create interactive particles animations
Build stunning web applications quickly using Syncfusion JavaScript UI controls.
Do you think we are missing an alternative of framer/motion or a related project?
|
Scout APM: A developer's best friend. Try free for 14-days
sponsored
scoutapm.com
|
Popular Comparisons
-
framer/motionvsreact-spring
-
framer/motionvsreact-gsap-enhancer
-
framer/motionvsreact-motion
-
framer/motionvsrc-animate
-
framer/motionvsreact-router-transition
|
Run Linux Software Faster and Safer than Linux with Unikernels
sponsored
github.com/nanovms
|
README
Framer Motion An open source and production-ready motionlibrary for React on the web.
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:
- 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 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.
*Note that all licence references and agreements mentioned in the framer/motion README section above
are relevant to that project's source code only.