Motion Vue

Mengenal Motion Vue: Animasi Modern & Ringan untuk Vue.js

Ingin bikin UI Vue-mu jadi lebih hidup dan interaktif? Tapi males ribet pakai CSS @keyframes atau library berat seperti GSAP?

Kenalin: Motion Vue — cara baru dan menyenangkan untuk membangun antarmuka dengan animasi yang mulus, ringan, dan sepenuhnya terintegrasi dengan Vue 3.

"Build beautiful motion-driven interfaces with Vue.js based on motion. Simple, powerful, and performant animations for modern web applications."

Kenapa Harus Pakai Motion Vue?

Motion Vue dibangun di atas Motion One, animasi engine berbasis Web Animations API dari tim yang sama di balik Framer Motion.

Berikut alasan kenapa kamu mungkin langsung jatuh hati:

✅ Simpel dan Deklaratif

Tidak perlu mikirin event lifecycle atau watch — cukup :animate dan :transition.

⚡ Super Ringan

Dibanding library lain, Motion Vue minim dependensi dan sangat cepat. Cocok untuk app skala kecil sampai besar.

🧠 Terintegrasi Reaktif

Props seperti initial, hover, press, dan in-view semuanya reactive. Cocok banget buat Vue dev.

🎨 Kombinasi Sempurna dengan Tailwind

Layout pakai Tailwind, animasi pakai Motion Vue — hasilnya? UI bersih dan ciamik!

💡 Contoh-Contoh Penggunaan Motion Vue

1. Animasi Dasar dengan `initial` dan `animate`

<script setup lang="ts">
import { Motion } from 'motion-v'
</script>

<template>
  <Motion
    class="bg-primary w-1/3 aspect-square rounded-2xl"
    :initial="{ scale: 0 }"
    :animate="{ rotate: 180, scale: 1 }"
    :transition="{
      type: 'spring',
      stiffness: 260,
      damping: 20,
      delay: 0.3,
    }"
  />
</template>

📌 Cocok untuk elemen yang ingin muncul dengan efek “zoom & rotate”.

2. Animasi Berurutan / Timeline-Style

<script setup lang="ts">
import { Motion } from 'motion-v'
</script>

<template>
  <Motion
    class="bg-primary h-20 aspect-square rounded-2xl"
    :animate="{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 180, 180, 0],
      borderRadius: ['0%', '0%', '50%', '50%', '0%'],
    }"
    :transition="{
      duration: 2,
      ease: 'easeInOut',
      times: [0, 0.2, 0.5, 0.8, 1],
      repeat: Infinity,
      repeatDelay: 1,
    }"
  />
</template>

📌 Bikin efek animasi berulang seperti loading icon atau attention seeker.

3. Animasi Stagger / Berurutan dengan Variants

<script setup lang="ts">
import { Motion } from 'motion-v'

const container = {
  hidden: { opacity: 1, scale: 0 },
  visible: {
    opacity: 1,
    scale: 1,
  },
}

const items = {
  hidden: { y: 20, opacity: 0, scale: 0.85 },
  visible: {
    y: 0,
    opacity: 1,
  },
}

const list = [0, 1, 2, 3]
</script>

<template>
  <Motion
    as="ul"
    :variants="container"
    initial="hidden"
    animate="visible"
    :transition="{
      type: 'spring',
      delayChildren: 0.5,
      staggerChildren: 0.2,
    }"
    class="rounded-2xl overflow-hidden  list-none p-2  grid-cols-2 grid-rows-2 aspect-square bg-primary/20 w-1/3  grid"
  >
    <Motion
      v-for="(item, i) in list"
      :key="item"
      :variants="items"
      class="bg-primary rounded-full origin-center"
    />
  </Motion>
</template>

📌 Cocok untuk grid, list, atau card yang ingin muncul satu per satu.

4. Hover & Press Interaktif

<script setup lang="ts">
import { Motion } from 'motion-v'
</script>

<template>
  <Motion
    :hover="{ scale: 1.2, rotate: 90 }"
    :press="{
      scale: 0.8,
      rotate: -90,
      borderRadius: '100%',
    }"
    :transition="{
      type: 'spring',
      stiffness: 260,
      damping: 20,
    }"
    as="button"
    class="rounded-2xl overflow-hidden list-none p-2 grid-cols-2 grid-rows-2 aspect-square bg-primary w-1/3 grid"
  />
</template>

📌 Tombol jadi lebih hidup dan terasa menyenangkan!

5. Fade-in Halus dengan `initial` + `animate`

<script setup lang="ts">
import { motion } from 'motion-v'
</script>

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

📌 Efek fade sederhana dan ringan untuk transisi konten.

6. Animasi Saat Elemen Muncul di Layar (Scroll In-View)

<script setup lang="ts">
import { Motion } from 'motion-v'
</script>

<template>
  <Motion
    class="bg-primary w-1/3 aspect-square rounded-2xl"
    :initial="{ scale: 0 }"
    :in-view="{ rotate: 180, scale: 1 }"
    :in-view-options="{
      once: true,
    }"
    :transition="{
      type: 'spring',
      stiffness: 260,
      damping: 20,
      delay: 0.3,
    }"
  />
</template>

📌 Efek masuk ketika user scroll — bagus untuk hero section, features, atau showcase.

🚀 Siap Coba Motion Vue?

Kamu bisa mulai dengan:

pnpm add motion-v
# atau
npm install motion-v

Lalu gunakan seperti di contoh-contoh di atas. Simpel, ringan, dan bikin UI kamu terasa profesional dan hidup ✨

Motion Vue adalah pilihan tepat untuk kamu yang ingin membuat antarmuka Vue.js dengan animasi modern tanpa ribet. Dengan API yang sederhana dan performa yang optimal, kamu bisa fokus pada pengalaman pengguna tanpa harus khawatir soal kompleksitas animasi.