🌊 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
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 both component and composable method.
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>
- Type:
string
- Default:
'div'
- Type:
string | number
- Default:
undefined
- Required:
true
- Type:
string[]
- Default:
[]
- Type:
Transition
- Default:
undefined
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.
type Transition = {
delay: number
repeat: number
repeatDelay: number
repeatType: 'loop' | 'mirror' | 'reverse'
type: 'spring' | 'keyframes'
stiffness: number
damping: number
mass: number
bounce: number
duration: number
ease: string
}
Example:
<Hero
as="div"
layout-id="cursor"
:ignore="['width']"
:transition="{
duration: 1000,
type: 'keyframes',
bounce: 0
}"
/>