A shared layout animations for vue like framer motion.
npm install hero-motion
š A shared layout animations for vue like framer motion, use layoutId prop and components will animate from one to another.
š Smooth animations based on @vueuse/motion
āØ Written with TypeScript
š Easy to use
ā
Support most of the @vueuse/motion's props
š Support auto-import by nuxt-module
š„ļø Live example here
``
npm install hero-motion @vueuse/motion
Suggest to use this component wrap your hole project, this provider will provide private context for Hero component.
`vue
`
You can use hero with component, composable function or directive ways.
Component
`vue
`
Composable
`vue
`
Directive
> [!IMPORTANT]
> _The usage of directive is currently under development, and there may be unforeseen issues. We recommend using components or composables for now._
`vue
`
hero-motion also provides a Nuxt module for quick and easy integration
`ts`
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['hero-motion/nuxt'],
})
hero-motion/nuxt will auto import the Hero component for you, eliminating the need to manually import it in each file where you want to use it.
`vue`
`sh`
pnpm play
- Type: string
- Default:
- Type: string | number
- Default:
- Required:
- Type: string[]
- Default:
- Type: Transition
- Default:
Transition props can be used in both HeroProvider and Hero.
The configuration defined in HeroProvider will be used as global default value, and you do not need to re-declare it on each Hero components.
Example:
`vue`
layout-id="cursor"
:ignore="['width']"
:transition="{
duration: 1000,
type: 'keyframes',
bounce: 0
}"
/>
- Type: () => void
- Default: