search

tmg0 / hero-motion

🌊 A shared layout animation tool for vue like framer motion.
MIT License
28 stars 3 forks source link

More examples #62

Closed rylanharper closed 4 months ago

rylanharper commented 4 months ago

Hey @tmg0! This is a really awesome package! This is really a much needed addition to @vueuse/motion and I have been playing around with it a bit. It works great!

I would love to see more examples with @vueuse/motion and hero-motion and how they combine together to make more UI animations. I am using uilabs for some inspiration and have some similar components made in Vue (with tailwindcss and supported by @vueuse/motion), but I am struggling to get the layout to change in between click states.. For instance how would a button grow into a large UI component?

The default example in the playground is helpful (albeit somewhat confusing), but I would just like to see more basic layout changes between click event states. Any tips would be great!

tmg0 commented 4 months ago

Thank you for your suggestion and for using this package!

More examples in the playground and include some explanations in the documentation will be added in the future.

I have created a new example for how to enlarge a button on stackblitz, but I'm not sure if it meets your needs. You can take a look and see if it helps.

hero-motion currently only supports defining the properties that need to be transitioned in the style. But you can still use tailwindcss or some other libs to define the static styles.

I have tried to use getComputedStyle to accommodate all properties applied to the element, but there are some performance issues. So now I am trying some other methods.

rylanharper commented 4 months ago

@tmg0 Wow this is perfect! I feel like this example makes a lot more sense to me. Correct me if I am wrong, but the way I see the hero component is that it is basically the overarching layout container?

Hmm personally I don't think there is much of a need to animate container styles between states (with getComputedStyle) because its more about the inner-content within a layout transition. I can just add a styled child element (say a div that has a width and height of 400px) within the isLarge state and the layout seems to expand to show the whole element..at least it does when I am playing around with the example you just posted.

I'll try creating some advanced UIs with this over the weekend (like on that website I linked) and see if I run into any issues. Is this package able to be used within Nuxt3?

tmg0 commented 4 months ago

hero-motion should be able to be used in Nuxt. I would be happy if this package can help you.

hero component is a layout container, and your understanding is correct.

It registers globally through the layout-id to achieve transitions of elements with the same value, and transitions are implemented in the properties defined in the style.

Currently not many people are using this package, so there might be have some unexpected issues.

Welcome issue if there has any problems while using it.

rylanharper commented 4 months ago

Great! Sounds good. I'll post any issues I encounter here. Again, wonderful package:)

-Closing issue.