Issue with instant animation

[egdiala]

I'm currently using @vueuse/motion to animate a project I'm working on but then i notice a slight delay before my animation starts. Almost as if the dom renders before the animation begins. Is there a way I can go about this? Using nuxt3, tailwind and ts. Also using ssr

<script setup lang="ts">
import { MotionVariants } from '@vueuse/motion';

const variants: MotionVariants = {
  initial: {
    y: 24,
    opacity: 0
  },
  enter: {
    y: 0,
    opacity: 1,
    transition: {
      type: 'tween',
      delay: 500,
      duration: 800,
      velocity: 690
    }
  }
}
</script>

<template>
  <div v-motion :initial="variants.initial" :enter="variants.enter" class="max-w-2xl">
    <h1>
      Hello.
    </h1>
  </div>
</template>

[timvandaatselaar]

Hey @egdiala ,

You can try to wrap the motion variants within the v-motion tag like this. This will add the inline styles immediately instead.

<template>
  <div v-motion="
    {
      initial: {
        y: 24,
        opacity: 0
      },
      enter: {
        y: 0,
        opacity: 1,
        transition: {
          type: 'tween',
          delay: 500,
          duration: 800,
          velocity: 690
        }
      }
    }"
    class="max-w-2xl">
    <h1>
      Hello.
    </h1>
  </div>
</template>

[egdiala]

Worked like magic. Thank you @timvandaatselaar