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

#1

Post by Etesam » Mon, Oct 23, 2023, 10:29 PM UTC

react-magic-motion is a npm package for react.js that gives you a component named . 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

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

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

#2

Post by KRAKRISMOTT » Tue, Oct 24, 2023, 7:07 AM UTC

How does it compare to the infamous framer motion?

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

#3

Post by sdgluck » Tue, Oct 24, 2023, 8:07 AM UTC

KRAKRISMOTT wrote: post #2

How does it compare to the infamous framer motion?

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

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

#4

Post by nvegater » Tue, Oct 24, 2023, 8:25 AM UTC

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

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

#5

Post by mock-possum » Tue, Oct 24, 2023, 8:33 AM UTC

Holy shit. That’s actually really impressive.

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

#6

Post by forward-slashed » Tue, Oct 24, 2023, 9:28 AM UTC

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

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

#7

Post by lloydatkinson » Tue, Oct 24, 2023, 9:50 AM UTC

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.

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

#8

Post by diggan » Tue, Oct 24, 2023, 10:21 AM UTC

forward-slashed wrote: post #6

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

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

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

#9

Post by aosaigh » Tue, Oct 24, 2023, 10:29 AM UTC

KRAKRISMOTT wrote: post #2

How does it compare to the infamous framer motion?

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

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

#10

Post by satvikpendem » Tue, Oct 24, 2023, 10:34 AM UTC

aosaigh wrote: post #9

KRAKRISMOTT wrote: post #2

How does it compare to the infamous framer motion?

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

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