Learn Vue-motion - 10 Code Examples & CST Typing Practice Test

Vue Motion is a physics-based animation library for Vue.js that provides smooth, natural transitions using spring dynamics. It enables reactive, declarative motion tied directly to Vue’s reactivity system.

View all 10 Vue-motion code examples →

Simple Fade In Scale Up Fade + Scale Slide Right Slide Up Rotate Scale + Rotate Fade + Slide Right Fade + Slide Up Bounce Scale

Learn VUE-MOTION with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Fade In

# vue_motion/demo/App1.vue
<template>
    <motion-div :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" style="width:100px;height:100px;background:red;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Fades a div in on mount

Let’s Try →

Scale Up

# vue_motion/demo/App2.vue
<template>
    <motion-div :initial="{ scale: 0.5 }" :animate="{ scale: 1 }" style="width:100px;height:100px;background:green;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Scales up a div from 0.5 to 1

Let’s Try →

Fade + Scale

# vue_motion/demo/App3.vue
<template>
    <motion-div :initial="{ opacity: 0, scale: 0.5 }" :animate="{ opacity: 1, scale: 1 }" style="width:120px;height:120px;background:blue;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Fades in and scales a div

Let’s Try →

Slide Right

# vue_motion/demo/App4.vue
<template>
    <motion-div :initial="{ x: -100 }" :animate="{ x: 0 }" style="width:100px;height:100px;background:orange;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Slides a div from left to right

Let’s Try →

Slide Up

# vue_motion/demo/App5.vue
<template>
    <motion-div :initial="{ y: 100 }" :animate="{ y: 0 }" style="width:100px;height:100px;background:purple;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Slides a div up from below

Let’s Try →

Rotate

# vue_motion/demo/App6.vue
<template>
    <motion-div :initial="{ rotate: 0 }" :animate="{ rotate: 360 }" style="width:100px;height:100px;background:cyan;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Rotates a div from 0 to 360 degrees

Let’s Try →

Scale + Rotate

# vue_motion/demo/App7.vue
<template>
    <motion-div :initial="{ scale: 0.5, rotate: 0 }" :animate="{ scale: 1, rotate: 360 }" style="width:120px;height:120px;background:magenta;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Scales and rotates a div

Let’s Try →

Fade + Slide Right

# vue_motion/demo/App8.vue
<template>
    <motion-div :initial="{ opacity: 0, x: -100 }" :animate="{ opacity: 1, x: 0 }" style="width:100px;height:100px;background:lime;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Fades in while sliding right

Let’s Try →

Fade + Slide Up

# vue_motion/demo/App9.vue
<template>
    <motion-div :initial="{ opacity: 0, y: 50 }" :animate="{ opacity: 1, y: 0 }" style="width:100px;height:100px;background:yellow;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Fades in while sliding up

Let’s Try →

Bounce Scale

# vue_motion/demo/App10.vue
<template>
    <motion-div :initial="{ scale: 0.5 }" :animate="{ scale: 1 }" transition="{ type: 'spring', stiffness: 200, damping: 10 }" style="width:100px;height:100px;background:orange;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Scales a div with a bounce effect

Let’s Try →

Frequently Asked Questions about Vue-motion

What is Vue-motion?

What are the primary use cases for Vue-motion?

Animating Vue component transitions. Interactive UI motions (hover, drag, scroll-based). Animating lists, state changes, and conditional rendering. SVG and canvas-style motion in Vue. Page transitions for SPA navigation

What are the strengths of Vue-motion?

Deeply integrated with Vue reactivity. Smooth and natural physics-based motion. Template-friendly components for animations. Great for micro-interactions. Lightweight and easy to integrate

What are the limitations of Vue-motion?

Vue-only library. Not suitable for timeline-heavy animations. Complex 3D or WebGL animations require other tools. Less flexible than GSAP for sequenced choreography. Gesture integration varies across ecosystems

How can I practice Vue-motion typing speed?

CodeSpeedTest offers 10+ real Vue-motion code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Learn Vue-motion - 10 Code Examples & CST Typing Practice Test

Code Sample Descriptions

Simple Fade In

# vue_motion/demo/App1.vue
<template>
    <motion-div :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" style="width:100px;height:100px;background:red;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Fades a div in on mount

Let’s Try →

Scale Up

# vue_motion/demo/App2.vue
<template>
    <motion-div :initial="{ scale: 0.5 }" :animate="{ scale: 1 }" style="width:100px;height:100px;background:green;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Scales up a div from 0.5 to 1

Let’s Try →

Fade + Scale

# vue_motion/demo/App3.vue
<template>
    <motion-div :initial="{ opacity: 0, scale: 0.5 }" :animate="{ opacity: 1, scale: 1 }" style="width:120px;height:120px;background:blue;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Fades in and scales a div

Let’s Try →

Slide Right

# vue_motion/demo/App4.vue
<template>
    <motion-div :initial="{ x: -100 }" :animate="{ x: 0 }" style="width:100px;height:100px;background:orange;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Slides a div from left to right

Let’s Try →

Slide Up

# vue_motion/demo/App5.vue
<template>
    <motion-div :initial="{ y: 100 }" :animate="{ y: 0 }" style="width:100px;height:100px;background:purple;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Slides a div up from below

Let’s Try →

Rotate

# vue_motion/demo/App6.vue
<template>
    <motion-div :initial="{ rotate: 0 }" :animate="{ rotate: 360 }" style="width:100px;height:100px;background:cyan;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Rotates a div from 0 to 360 degrees

Let’s Try →

Scale + Rotate

# vue_motion/demo/App7.vue
<template>
    <motion-div :initial="{ scale: 0.5, rotate: 0 }" :animate="{ scale: 1, rotate: 360 }" style="width:120px;height:120px;background:magenta;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Scales and rotates a div

Let’s Try →

Fade + Slide Right

# vue_motion/demo/App8.vue
<template>
    <motion-div :initial="{ opacity: 0, x: -100 }" :animate="{ opacity: 1, x: 0 }" style="width:100px;height:100px;background:lime;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Fades in while sliding right

Let’s Try →

Fade + Slide Up

# vue_motion/demo/App9.vue
<template>
    <motion-div :initial="{ opacity: 0, y: 50 }" :animate="{ opacity: 1, y: 0 }" style="width:100px;height:100px;background:yellow;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Fades in while sliding up

Let’s Try →

Bounce Scale

# vue_motion/demo/App10.vue
<template>
    <motion-div :initial="{ scale: 0.5 }" :animate="{ scale: 1 }" transition="{ type: 'spring', stiffness: 200, damping: 10 }" style="width:100px;height:100px;background:orange;"></motion-div>
</template>

<script>
import { MotionDiv } from 'vue-motion'
export default {
    components: { MotionDiv }
}
</script>

Scales a div with a bounce effect

Let’s Try →

Frequently Asked Questions about Vue-motion

What is Vue-motion?

What are the primary use cases for Vue-motion?

What are the strengths of Vue-motion?

Deeply integrated with Vue reactivity. Smooth and natural physics-based motion. Template-friendly components for animations. Great for micro-interactions. Lightweight and easy to integrate

What are the limitations of Vue-motion?

How can I practice Vue-motion typing speed?

CodeSpeedTest offers 10+ real Vue-motion code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.