[ ! ] Vue needs a better motion library (re: Framer Motion)

[arpowers]

Writing this here because there is a substantial need for a comparable library in Vue to match the appeal of Framer Motion for React.

I realize this library is a significant undertaking for someone, but its also the clearest advantage that React has over Vue.

Is anyone working on this? I've seen this but that seems like just a wrapper for the standard <transition> vue already has...

[Mat4m0]

There is this library "Motion One" from the same creator as Framer Motion, you can use it with Vue:
https://motion.dev/vue/quick-start

[arpowers]

Thanks for adding that, looks interesting. Doesn't seem to do the same type of animations as Framer Motion, will keep an eye on it...

[LinusBorg]

I've seen this but that seems like just a wrapper for the standard vue already has...

I suspect you only looked at the first page of "Features" which demos the simple presets that it ships with? You might want to look again.

Compare i.e. https://www.framer.com/motion/use-spring/ to https://motion.vueuse.org/api/use-spring

It offers pretty much the same, or at least a very similar API and featureset that Frame motion does (though likely not every feature). It even says "Declarative API inspired by Framer Motion" on the front page.

[LinusBorg]

Also check out VueUse base library. You might miss some things like framer's useScroll, but you can find counterparts of those in other parts of the VueUse library, i.e.:

https://vueuse.org/core/useScroll/#usescroll

[reslear]

State of Animation Libraries in 2024 for Vue 3:

• Framer Motion

  • Vue Support: Still not supported
  • Alternative: Utilize some utilities from the universal vanilla JS

• Motion One

  • Status: Deprecated
  • Fork: Maintained version available at @oku-ui/motion

• @vueuse/motion

  • Recommendation: Best current solution
  • Limitations: Lacks active development, doesn't support layouts, among other features

• hero-motion

  • Status: New solution in development
  • Usage: Aims to support layout animations
  • Performance: Currently questionable #96, serves as an add-on to vueuse/motion

Utils:

• @morev/vue-transitions - Reusable interface transitions for Vue 2 and Vue 3 with no CSS needed.

• AutoAnimate - Zero-config, drop-in animation utility that adds smooth transitions to your web app.

Posts

• Do you still need Framer Motion?
• Feature comparison table

[Mat4m0]

It's a sad state indeed, at this point I would recommend going with GSAP, if you need more advanced animations than vueuse/motion

[reslear]

State of Animation Libraries in pre-2025 for Vue 3:

• Motion official 🔴

  Framer Motion is now independent, introducing Motion use Framer Motion outside of React. Either with vanilla JS, or other frameworks like Vue.

  • Vue Support: Motion+ Early Access, wait Unlocks for everyone in early 2025.

• Motion Vue 🟢

  Vue 3 animation library based on official Motion animate.

  • Status: Best solution today, makes sense to use before the official Motion library is released, already used in Reka UI (Radix Vue).

[ChuckD30]

Motion for Vue now available: https://motion.dev/blog/introducing-motion-for-vue

it has Nuxt support too!