Component Jitters at Screen Edges When Using `v-motion` Slide Presets Along Y-Axis

[3ein39]

System info

Nuxt.js: (3.8.2)

• Vue Use Motion: (2.2.3)
• Browser: (tried chrome, brave and firefox)
• Operating System: Fedora Linux

Reproduction

Code Snippet:

<template>
  <div class="flex items-center justify-center h-[2000px]">
    <div id="box" class="bg-blue-400 rounded-2xl w-20 h-20 flex" v-motion-slide-visible-bottom>
    </div>
  </div>
</template>

Steps to Reproduce:

1. Apply a v-motion slide preset that slides along the y-axis.
2. Observe the component behavior when it approaches the edges of the screen.

Describe the bug

Hello,

I encountered an issue while using v-motion slide presets that involve sliding along the y-axis. The problem arises at the edges of the screen, where the component begins to jitter up and down. This behavior disrupts the smoothness of the animation.

Expected Behavior:

The component should slide smoothly without any jittering or unwanted up and down movement at the screen edges.

Actual Behavior:

The component jitters up and down when it reaches the edges of the screen, causing a disruption in the smoothness of the animation.

Additional Information:

I have recorded a video to demonstrate the issue.

Additional context

Logs

No response

[BobbieGoede]

Technically speaking this is working as intended but I understand the confusion.

The slide visible bottom preset moves the element up when it enters the viewport and does the reverse when it leaves the viewport, but by moving back down the element once again enters the viewport, triggering an infinite loop at this scroll offset (in an out of viewport).

The easiest workaround is using v-motion-slide-visible-once-bottom, but this means the element won't animate when not visible anymore.

[3ein39]

Thank you for the detailed explanation and for clarifying how the v-motion-slide-visible-bottom preset works. I appreciate your suggested workaround of using v-motion-slide-visible-once-bottom.

Should I proceed to close this issue as resolved from my end?

Technically speaking this is working as intended but I understand the confusion.

The slide visible bottom preset moves the element up when it enters the viewport and does the reverse when it leaves the viewport, but by moving back down the element once again enters the viewport, triggering an infinite loop at this scroll offset (in an out of viewport).

The easiest workaround is using v-motion-slide-visible-once-bottom, but this means the element won't animate when not visible anymore.

[BobbieGoede]

Ah if this resolves your issue we can close it! 😄

Let me know if you have any more questions, I'll add a notice (at some point) in the docs to explain this behavior to hopefully prevent others from running into the same issue.