5 ms·
Show HN: React-magic-motion, a package to automatically animate your components
react-magic-motion is a npm package for react.js that gives you a component named <MagicMotion>. All children of this MagicMotion tag will have all their layout changes animated.
This automatic animation built on top of framer-motion, so that means that you will get all of its features as well (spring animation, shared layout animations, etc...).
https://www.react-magic-motion.com/ https://www.react-magic-motion.com/
https://github.com/etesam913/react-magic-motion https://github.com/etesam913/react-magic-motion
- KRAKRISMOTT 3y agoHow does it compare to the infamous framer motion?
- sdgluck 3y agoIt's in the post: > This automatic animation built on top of framer-motion, so that means that you will get all of its features as well (spring animation, shared layout animations, etc...).
- aosaigh 3y agoWhy is framer infamous? Genuine question - I’ve only used it occasionally
- satvikpendem 3y agoIt's not, I assume the parent is using "famous" and "infamous" interchangeably, which is incorrect.
- nvegater 3y agoThe defaults are opinionated but also minimalistic, I like this! Props on the simplicity!
- mock-possum 3y agoHoly shit. That’s actually really impressive.
- forward-slashed 3y agoHow would one adapt this to vanilla js (or clojurescript)?
- diggan 3y agoUnsure about vanilla JS, but for ClojureScript, import the MagicMotion component from react-magic-motion and then wrap whatever you want to automate with the MagicMotion component, seems to be enough (but I haven't tried myself).
- forward-slashed 3y agoThis requires reagent?
- diggan 3y agoI guess you could use a React component somehow without Reagent, but if you're using ClojureScript you're most likely already using Reagent I guess?
- forward-slashed 3y agoI'm using Electric clojure, so no.
- thih9 3y agoNot sure if it makes sense to adapt a library which relies that much on react to a non-react project. Depending on the project, you could achieve a similar effect with other means, from pure css to some other library like https://revealjs.com/auto-animate/ https://revealjs.com/auto-animate/
- lloydatkinson 3y agoI was about to ask how this compares to Framer Motion but looks like it uses it internally > react-magic-motion's only dependency is framer-motion as the automatic animation is built off of framer-motion's layout animations.