Add `:visible-once` variant

[florian-lefebvre]

Related to https://github.com/vueuse/motion/issues/25, it would be great to be able to trigger an animation when visible only once. I suggest adding a new variant for that but it could be an attribute like once.

[florian-lefebvre]

Meanwhile, I managed to reproduce this effect with the following (using Nuxt 3):

<!-- components/FadeAnimation.vue -->
<template>
  <div ref="el">
    <slot />
  </div>
</template>

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

const el = ref<HTMLElement>();

const { stop } = useMotion(el, {
  initial: {
    opacity: 0,
  },
  visible: {
    opacity: 1,
    transition: {
      delay: 300,
      duration: 500,
      onComplete: () => stop(),
    },
  },
});
</script>

[Tahul]

Would love a PR for this!

[florian-lefebvre]

I'll try to submit one soon. Just as a reminder for me, the files that are linked to this are src/directives/index.ts, src/utils/directives.ts and src/types/variants.ts. Feel free to tell me if I'm forgetting some of them

[jahermosilla]

@florian-lefebvre I think, one of the main changes should be on this line. Check "somehow" if the animation should be run only once and stop the Intersection Observer in that case.

[florian-lefebvre]

Oh yes you're right thx!

[HassanZahirnia]

Hey @florian-lefebvre 👋 Thanks for bringing up the idea of having such variant. 👍 I was also looking for a way to only apply animations once when they enter the viewport. I know you already did the hard work and made a PR, but I also tried to do one here: #50 I noticed your PR also adds a bunch of different presets so I thought I'm just gonna focus on this 1 single variant which we was discussed here so maybe @Tahul can have an easier time to consider merging this feature.

[Tahul]

Hello there!

Thanks again @florian-lefebvre ; as I have merged you PR, I am closing this now!

The docs about this new feature are available there: https://motion.vueuse.org/variants.html#visible-once