Feature Request: Support for Directives to Handle Layout Shifting

[arindampradhan]

Hi there,

I'm wondering if it would be possible to incorporate support for directives to handle layout shifting within the @vueuse/motion library. This feature would be highly beneficial for developers who need to manage complex animations and layout changes in Vue 3 applications.

References:

Hero Motion - This library provides a similar functionality and could serve as inspiration for how layout shifting can be handled.
Framer Motion - This reference demonstrates an effective approach to managing layout animations, which could be adapted to fit the Vue ecosystem.

Thank you for considering this feature request! Your work on @vueuse/motion has been incredibly valuable, and this addition would make it even more versatile.

---

I’ve created a parallel thread in the hero-motion repository regarding the potential addition of layout shifts to @vueuse/motion. If this feature could be incorporated, it would be immensely beneficial.

You can find the thread here: link.

[arindampradhan]

@Tahul can you kindly look into this request. The developer of hero-motion has agreed to contribute to this repo.

[NoelDeMartin]

Hey, I recently started working on a library supporting this type of animations, also built on top of @vueuse/motion: https://noeldemartin.github.io/vivant/

I looked at Hero Motion, and it seems like layout animations don't work with complex animations involving nested elements.

I'm also willing to contribute any of this if the maintainers are interested, but it's just a proof of concept so I doubt it can be integrated. Though let me know if you are interested to learn more about my approach.

[tmg0]

Thank you for your response, I have looked at vivant. it's really a awesome lib, and it seems provided more features than hero-motion.

Regarding the part about hero-motion, there may be issues with complex animations. Could you provide a reproduction example? and issue welcome, I'll try to fix it.

[NoelDeMartin]

Ok @tmg0, I opened an issue in the Hero Motion repo, we can continue the conversation there.

[tmg0]

Thanks a lot for that!