I've got a horizontal scroll with v-motion-slide-visible-once-right

[Thomas Bonnet]

Hello, when I put v-motion-slide-visible-once-right on my code with Nuxt v3, I've got a horizontal scroll.
I followed the process to include motion on my project. Animations works, but create this bug.

[Antonio Mario Cavuto]

I have the same bug. Did u solve the issue?

[Thomas Bonnet]

I have the same bug. Did u solve the issue?

Nope, I've got the issue again.

[Antonio Mario Cavuto]

So apparently the bug is caused by the x: 100 (which is translate 100 on the x axis) that is in the preset 'v-motion-slide-visible-once-right'.
I fixed this by specifying the pixels in the directive, for example, like so:
<template><div v-motion :initial="{ opacity: 0, x: "100px" }" :visibleOnce="{ opacity: 1, x: 0 }"</template>
I hope it's useful.

[Thomas Bonnet]

Hello, thanks for your reply @tony1c, I tested your code, but seems not working. Same issue.

However, I edited with v-motion variants, and works :

<template>
<div v-motion :initial="initial" :visibleOnce="enter">
</div>
</template>
<script setup>
const initial = ref({
  x: 10,
  opacity: 0,
  visibility: "hidden",
})

const enter = ref({
  x: 0,
  opacity: 1,
  visibility: "visible",
})
</script>

I reduced to 10px instead of 100px, sometimes bugs are... just stupid 😆🚀