At 9am this morning I had the privilege of closing our oldest open ticket, one that's haunted the issues board since the days of Framer Motion, all the way back in February 2020.

It was titled "[FEATURE] Vue support?"

Yes, today I'm thrilled to finally announce Motion for Vue. An animation library that's simple to start and fun to master, its unique hybrid engine combining the performance of hardware accelerated browser APIs with the limitless potential of JavaScript.

How does it compare to Motion for React?

Thanks to the incredible efforts of our resident Motion and Vue expert Rick Hup, Motion for Vue is a feature complete port of Motion for React. This means springs, motion values, scroll animations and most excitingly, layout animations, are all here on day one.

Its declarative <motion /> API will be immediately familiar to Motion fans, except now with a Vue twist.

<template>
  <motion.div
    :initial="{ opacity: 0, scale: 0 }"
    :animate="{ opacity: 1, scale: 1 }"
  />
</template>

All the motion props you love are here, like gesture animation props whileHover, whilePress and whileInView.

<template>
  <motion.div :whileHover="{ scale: 1.1 }" :whilePress="{ scale: 0.9 }" />
</template>

I suspect the biggest reason people have been asking for Motion in Vue is for its powerful layout animations engine that drives complex layout animations across thousands of React and Framer websites. Well, it's here too!

<motion.div
  v-if="item.label === selectedTab.label"
  layout-id="underline"
/>

Motion+ for Vue

That's not all. Since taking Framer Motion independent, I've been building Motion+ to fund Motion development. It's a one-time fee, lifetime membership that unlocks the source code to premium examples, grants access to exclusive components, an invite to our private Discord, early access to new APIs, and more besides.

All of these Motion+ examples have been ported to Vue, like this App Store demo:

That includes a whole suite of Radix integration demos.

Our exclusive Motion+ components Cursor and AnimateNumber are also out now:

Get started

I'm super excited to invite Vue developers to the Motion community! People have already been making incredible interfaces with Vue and Motion with the vanilla JS API so I can't wait to see what people make with this.

Motion for Vue is available now via the motion-v package on npm, and you can learn how to make your first animation with our quick start guide. Or get stuck straight into code with our Motion for Vue Examples.