Composables
useSplitText
Documentation for useSplitText composable.
Reactive wrapper for the splitText function from AnimeJS.
A lightweight, responsive and accessible text utility function to split, clone and wrap lines, words and characters of an HTML Element.
Type Definition
function useSplitText(
target: SplitTextTargets,
parameters: TextSplitterParams
): {
lines: Ref<HTMLElement[]>,
words: Ref<HTMLElement[]>,
chars: Ref<HTMLElement[]>,
properties: ComputedRef<NonFunctionProperties<TextSplitter>>,
revert: () => void,
split: () => void,
refresh: () => void,
}
Arguments
target
SplitTextTargets required
The element or selector containing the text to split.
parameters
TextSplitterParams
Sample usage
import { stagger } from '#nanime/utils'
const text = useTemplateRef('phrase')
const { chars } = useSplitText(text, {
chars: true,
})
useAnimate(chars, {
y: [{ to: '-30%' }, { to: 0 }],
delay: stagger(50),
duration: 600,
ease: 'inOutCirc',
loop: true,
})
<template>
<span ref="phrase" class="text-xl text-default font-mono">
Hello World!
</span>
</template>
Hello World!
Return Value
Returns an object with reactive references to the split elements and helper methods.
| Property | Type | Description |
|---|---|---|
lines | Ref<HTMLElement[]> | Array containing line elements. |
words | Ref<HTMLElement[]> | Array containing word elements. |
chars | Ref<HTMLElement[]> | Array containing character elements. |
properties | ComputedRef<object> | The underlying TextSplitter properties. |
split | () => void | Manually trigger split. |
revert | () => void | Revert the DOM to its original state. |
refresh | () => void | Re-calculate splits (useful on resize). |
API
Types
type SplitTargets = HTMLElement | string
type SplitTextTargets = SplitTargets | MaybeElementRef<HTMLElement> | null | undefined | MaybeElementRef<VueInstance>
See AnimeJS Text documentation for more details.