Motion animated components

[dan-hale]

Description

I want to use motion vue to animate components within NuxtUI.

Hugo proposed there is a way to do this within a project, however I don't see how it would be possible without adding motion as a dependency to NuxtUI and modifying the component itself:

@HugoRCD We could make an example in the docs with Motion based on this example: https://examples.motion.dev/vue/smooth-tabs

Originally posted by @benjamincanac in #488

So my questions are:

1. If possible, how could motion animations be added to NuxtUI components within a project without modifying the core component? (If so, I'd be happy to build an example for the docs)
2. Should we build new motion animated versions of components? (So projects that don't want the animations don't need to import motion-vue)
3. How do we keep the new components in sync with the original ones if they change?
4. Should motion animated components be a NuxtUI Pro feature?

Additional context

No response

[HugoRCD]

@dan-hale I actually tried to integrate it but it's not possible without completely modifying the component 🥲
So I'd say you'd need another version of the component with Motion, but that would require too much work for the moment 😅

[dan-hale]

@HugoRCD When you say too much work, is that in general or just for the team? I'd be happy to experiment with this.

And, do you think a solid argument could be made for adding Motion to the primary component (with a prop to enable/disable, or configure the animation)?

I can think of a few examples in NuxtUI where animations could be very cool. Check out these Vuetify examples for reference:

VDialog animates from activator
VWindow animates smoothly animates tabs / forms

[HugoRCD]

@dan-hale At the moment I'd say it's a lot of work for the team, but you can clearly start experimenting so I can look at it later when we take a moment for this topic!

[simonmaass]

this would be great!

[github-actions[bot]]

Hi! 👋 This issue has been open for 60 days without activity and will be closed in 7 days. Please comment if it's still relevant.

[dan-hale]

I think this is still relevant. I also think a manual implementation that doesn't rely on Motion or any library for that matter may be the way do it. For example, here is some code I wrote to animate a vertical stepper transition with no external deps. It smoothly adjusts the height of the wrapper between each slot, as well as slide between each slot:

<script setup lang="ts">
import type { StepperItem } from '@nuxt/ui'

defineProps<{ steps: StepperItem[] }>()

const step = defineModel<number>('step', { default: 0 })

const containerRef = useTemplateRef('containerRef')
const { width } = useElementSize(containerRef)

const height = ref()
const direction = ref<number>(1)
watch(step, (c, p) => direction.value = c > p ? 1 : -1)

async function onEnter(el: Element, done: () => void) {
  el.clientHeight === 0 ? requestAnimationFrame(() => height.value = el.clientHeight) : (height.value = el.clientHeight)
  setTimeout(done, 1000)
}

async function onLeave(el: Element, done: () => void) {
  if (el instanceof HTMLElement) el.style.position = 'absolute'
  setTimeout(done, 1000)
}

async function onBeforeLeave(el: Element) {
  if (el instanceof HTMLElement) el.style.position = 'absolute'
  height.value = el.clientHeight
}
</script>

<template>
  <div ref="containerRef" :style="{ 'height': `${height}px`, '--width': width ? `${width}px` : '100%', '--direction': direction }" class="transition-height duration-1000 ease-in-out relative overflow-clip">
    <Transition
      :duration="1000"

      enter-from-class="opacity-0 blur-lg absolute transform-gpu translate-y-[calc(var(--direction)*100%)]"
      enter-to-class="opacity-100 blur-0 absolute transform-gpu translate-y-0"

      leave-from-class="opacity-100 blur-0 absolute transform-gpu translate-y-0"
      leave-to-class="opacity-0 blur-lg absolute transform-gpu translate-y-[calc(var(--direction)*-100%)]"

      @before-leave="onBeforeLeave"
      @enter="onEnter"
      @leave="onLeave"
    >
      <div :key="step" class="transition-[transform,opacity,translate,filter] duration-1000 ease-in-out w-[var(--width)]">
        <component :is="$slots[step]" />
      </div>
    </Transition>
  </div>
</template>

[github-actions[bot]]

Hi! 👋 This issue has been open for 60 days without activity and will be closed in 7 days. Please comment if it's still relevant.

[github-actions[bot]]

Hi! 👋 This issue has been open for 60 days without activity and will be closed in 7 days. Please comment if it's still relevant.

[github-actions[bot]]

Hi! 👋 This issue has been open for 60 days without activity and will be closed in 7 days. Please comment if it's still relevant.

[benjamincanac]

Honestly I have no idea how we could achieve this, we have motion has a dependency but I don't think it's worth it for most cases to use motion instead of css animations 😬

[dan-hale]

@benjamincanac

I think this is mostly true. I think there are a few components that could use animations, but perhaps some JS and CSS without Motion is a better approach?

I think the Stepper, and Tabs (content) both could use animations.

Do you have an opinion on adding transition animations to these components? And on using Motion vs plain JS and CSS?