Learn VUE-MOTION with Real Code Examples

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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