0.5.2 • Published 7 months ago

hero-motion v0.5.2

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

Hero motion

NPM version

🌊 A shared layout animations for vue like framer motion, use layoutId prop and components will animate from one to another.

Features

šŸŽ 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

Installation

npm install hero-motion @vueuse/motion

Usage

HeroProvider

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>

Hero

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 { useHero } from 'hero-motion'
import { ref } from 'vue'

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 { directive } from 'hero-motion'
import { ref } from 'vue'

const vHero = directive()
</script>

<template>
  <div v-hero layout-id="LAYOUT_ID" />
</template>

Nuxt (>= 0.4.0)

hero-motion also provides a Nuxt module for quick and easy integration

// 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.

<template>
  <Hero as="div" layout-id="ID" />
</template>

Playground

Live Vite Example

Here!

Run Locally

pnpm play

Props

props.as

  • Type: string
  • Default: 'div'

props.layoutId

  • Type: string | number
  • Default: undefined
  • Required: true

props.ignore

  • Type: string[]
  • Default: []

props.transition

  • 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
  }"
/>

Emit

complete

  • Type: () => void
  • Default: () => {}

License

MIT License Ā© 2024-PRESENT Tamago

0.4.4

8 months ago

0.5.0

8 months ago

0.5.2

7 months ago

0.5.1

8 months ago

0.4.3

8 months ago

0.4.0-alpha.3

10 months ago

0.4.0-alpha.2

10 months ago

0.4.0-alpha.1

10 months ago

0.4.1

10 months ago

0.4.0

10 months ago

0.4.2

9 months ago

0.3.3

11 months ago

0.3.0

12 months ago

0.2.1

1 year ago

0.2.7

12 months ago

0.2.6

1 year ago

0.3.2

11 months ago

0.2.3

1 year ago

0.3.1

11 months ago

0.2.2

1 year ago

0.2.5

1 year ago

0.2.4

1 year ago

0.2.0

1 year ago

0.1.0

1 year ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago