Animation in Vue.js vs React.js

[yial2]

@sdras I see you tweeting about Vue.js lately. I wonder where will you put Vue.js if you are revisiting comparison of different animation technologies article?

My personal experience is that using Vue.js feel a lot more intuitive when I need to use CSS/animation. React-motion by Cheng Lou is definitely very helpful in React.js land, but it does require some learning and getting used to.

[sdras]

Hi @yial2! Thanks for stopping by :)

I totally agree. I think the reason I'm tweeting about Vue so much is I find it so intuitive and useful. I do think that the transition and transition-group components feel a little less clunky than ReactCSSTransitionGroup. Though I like both React and Vue, I would say I feel downright giddy right now about using Vue. I'm kool-aid drunk on it for sure.

I would, however, feel like it's a false equivalency to equate the transitions in Vue with React-Motion. React-Motion is a library unto itself, most of the complex things I'm doing in Vue are really done with GSAP, which transition has good hooks for, but reaches a limit, due to the singular el value, in which case I'll use a lifecycle hook like mounted()- see this demo for what I mean: https://github.com/sdras/vue-weather-notifier.

React-Motion works with a fundamentally different kind of motion, that's similar to game-based animation, where you give something mass and physics and send it on it's way. I would say that the ability to transition state in an interruptible manner holds similarities to Vue's very nice dynamic state transitions: https://vuejs.org/v2/guide/transitioning-state.html but React-Motion is a bit more advanced in that it offers you spring physics right away while Vue offers a hook (a very nice one, but you would still have to write it or pair it with something). This is kind of like how React doesn't really give you motion out of the box, but rather a hook that you can pair with whatever you choose.

There are certainly a lot of motion libraries to choose from, and you could even write really easy beautiful transitions from scratch with the hooks that Vue offers you, and yes, I do think you'd be better off writing those from scratch in Vue than in React with what the API provides.

There's so much to play around with! It's pretty exciting and there's no wrong answer. Hope that answers your question.

[yial2]

Yes, you did answer my question! THANK YOU @sdras !

[sdras]

awesome! 🤘🏼