VisibleOnce Visibility Variant does not work with Nuxt3 SSR / Nuxt Link

[jjsessa]

When navigating via a nuxt link component div will not appear the second time around. A reload fixes the issue can all styled divs then appear correctly.

[foxilated]

I came here to submit this exact issue, I've been having much trouble with it.

[cosmincartas]

I'm having the same issue but not only on visibleOnce variant, on visible as well. As a temporary fix I'm using the useMotion composable which seems to do the job.

const motionVariants: MotionVariants = {
    initial: {
        y: 100,
        opacity: 0
    },
    visibleOnce: {
        y: 0,
        opacity: 1
    }
};
const animatedSectionRef = ref<HTMLElement | null>();
useMotion(animatedSectionRef, motionVariants);

[barbecue]

[fabienbergerat]

I'm having the same issue but unfortunately using the composable doesn't seem to fix it.

[BobbieGoede]

This issue is likely fixed by #171 which is now included in the latest release v2.1.0, but without a reproduction I'm unable to confirm this, can someone check if this issue has been resolved after installing the latest version?

[github-actions[bot]]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

A link to a stackblitz project or public GitHub repository would be perfect. 👌

Please ensure that the reproduction is as minimal as possible.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[github-actions[bot]]

This issue was closed because it was open for 7 days without a reproduction.