HTML content

An example using Motion for Vue to animate HTML content by rendering a MotionValue with RowValue component.

Vue

RIck HupFebruary 16, 2025

Source code

<script setup lang="ts">
import { animate, useMotionValue, useTransform,RowValue } from "motion-v"
import { onMounted, onUnmounted } from "vue"

const count = useMotionValue(0)
const rounded = useTransform(() => Math.round(count.get()))

let controls

onMounted(() => {
    controls = animate(count, 100, { duration: 5 })
})

onUnmounted(() => {
    controls?.stop()
})
</script>

<template>
  <div class="motion-count">
    <RowValue :value="rounded" />
  </div>
</template>

<style scoped>
.motion-count {
    font-size: 64px;
    color: #4ff0b7;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>