v-animate 🚧 We are currently working on further improvements and adding more functionality to the directive. Please be aware that this particular aspect may undergo frequent changes. 🚧 v-animate is the best chooise for the ultra simple Animation like hover or click eventbase Animation. add v-animate to a Element and give it some AnimationParams directily. Done. In this case you dont get back a ref of JSAnimation . For more detailed information regarding the animation object, please refer to the Anime.js V4 Documatation . < template > < div > < div v-animate = " { x: 100 } " class = "box" / > You can also choose to extract the AnimationParams into a separate ref , either as a complete object or for specific values. This allows you to manage your basic animation logic within the setup, as demonstrated in the following example: < template > < div > < div v-animate = " { x: xVal } " class = "box" / > < pre >xVal: {{ xVal }} < script lang = "ts" setup > const xVal = ref ( 30 ); html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}

VAnimeTimeline