Introducing Motion Vue: A Motion Library like Framer motion for Vue and Nuxt! #12593

rick-hup · 2024-12-22T07:23:35Z

rick-hup
Dec 22, 2024

Hey Vue community! 👋
I'm excited to introduce Motion Vue - a powerful animation library that brings Framer Motion's elegant animation API to Vue 3!

      <Motion
        v-if="show"
        :initial="{
          scale: 0,
        }"
        :animate="{
          scale: 1,
          rotate: 180,
        }"
        :exit="{
          scale: 0,
        }"
        :transition="{
          duration: 5,
        }"
        class="w-[200px] aspect-square bg-white rounded-md mx-auto"
        data-a="123"
      />

Just like the code above shows, you can create beautiful animations with a simple declarative API:

🎨 Spring physics & keyframe animations
🔄 Gesture animations (hover, tap, pan, drag)
👀 Scroll & viewport animations
🎭 Layout animations with FLIP
🚪 Enter/exit animations with AnimatePresence

As a huge fan of Framer Motion, I wanted to bring its amazing animation capabilities to the Vue ecosystem. That's why I created Motion Vue - to give Vue developers the same delightful animation experience that I fell in love with in the React world.
Let's make the Vue ecosystem more animated! 🚀
Check out the docs to get started and feel free to contribute GitHub repository!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue

Introducing Motion Vue: A Motion Library like Framer motion for Vue and Nuxt! #12593

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Vue

Introducing Motion Vue: A Motion Library like Framer motion for Vue and Nuxt! #12593

Uh oh!

rick-hup Dec 22, 2024

Replies: 0 comments

rick-hup
Dec 22, 2024