π 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 in TypeScript
π Easy to use
β Support most of the @vueuse/motion's props
npm install hero-motion @vueuse/motion
Suggest to use this component wrap your hole project, this provider will provide private context for Hero
component.
<script setup>
import { HeroProvider } from 'hero-motion'
</script>
<template>
<HeroProvider>
<RouterView />
</HeroProvider>
</template>
You can use hero
with component, composable function or directive ways.
Component
<script setup>
import { Hero } from 'hero-motion'
</script>
<template>
<Hero as="div" layout-id="ID" />
</template>
Composable
<script setup>
import { ref } from 'vue'
import { useHero } from 'hero-motion'
const domRef = ref()
useHero(domRef, {
layoutId: 'LAYOUT_ID'
})
</script>
<template>
<div ref="domRef" />
</template>
Directive
Important
The usage of directive
is currently under development, and there may be unforeseen issues. We recommend using components
or composables
for now.
<script setup>
import { ref } from 'vue'
import { directive } from 'hero-motion'
const vHero = directive()
</script>
<template>
<div v-hero layout-id="LAYOUT_ID" />
</template>
See playground.
- Type:
string
- Default:
'div'
- Type:
string | number
- Default:
undefined
- Required:
true
- Type:
string[]
- Default:
[]
- Type:
Transition
- Default:
@vueuse/motion['Transition']
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:
<Hero
as="div"
layout-id="cursor"
:ignore="['width']"
:transition="{
duration: 1000,
type: 'keyframes',
bounce: 0
}"
/>
- Type:
() => void
- Default:
() => {}