Show HN: React-magic-motion, a package to automatically animate your components

[Etesam]

https://www.react-magic-motion.com/

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://github.com/etesam913/react-magic-motion

[lloydatkinson]

I 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.

[nvegater]

The defaults are opinionated but also minimalistic, I like this! Props on the simplicity!

[KRAKRISMOTT]

How does it compare to the infamous framer motion?

[sdgluck → KRAKRISMOTT]

It'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...).

[nwienert → sdgluck]

But... what makes it different?

[pests → nwienert]

It provides an opinioned-default transition for child components. You don't work directly with framer - you use the HOC it provides and your elements animate automatically based in (what I assume) are sensible defaults.

[aosaigh → KRAKRISMOTT]

Why is framer infamous? Genuine question - I’ve only used it occasionally

[satvikpendem → aosaigh]

It's not, I assume the parent is using "famous" and "infamous" interchangeably, which is incorrect.

[forward-slashed]

How would one adapt this to vanilla js (or clojurescript)?

[thih9 → forward-slashed]

Not 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/

[diggan → forward-slashed]

Unsure 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 → diggan]

This requires reagent?

[diggan → forward-slashed]

I 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 → diggan]

I'm using Electric clojure, so no.

[mock-possum]

Holy shit. That’s actually really impressive.