-
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...
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 35 -
❤️ 4
Replies: 5 comments 3 replies
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
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...
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
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.:
Beta Was this translation helpful? Give feedback.
All reactions
-
State of Animation Libraries in 2024 for Vue 3:
-
- Vue Support: Still not supported
- Alternative: Utilize some utilities from the universal vanilla JS
-
- Status: Deprecated
- Fork: Maintained version available at @oku-ui/motion
-
- Recommendation: Best current solution
- Limitations: Lacks active development, doesn't support layouts, among other features
-
- 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
Beta Was this translation helpful? Give feedback.
All reactions
-
❤️ 9
-
It's a sad state indeed, at this point I would recommend going with GSAP
, if you need more advanced animations than vueuse/motion
Beta Was this translation helpful? Give feedback.
All reactions
-
😕 2 -
👀 1
-
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.
-
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).
Beta Was this translation helpful? Give feedback.
All reactions
-
🎉 4
-
Motion for Vue now available: https://motion.dev/blog/introducing-motion-for-vue
it has Nuxt support too!
Beta Was this translation helpful? Give feedback.