Composables
useScrambleText
Documentation for useScrambleText composable.
Instant playView on GitHub
The useScrambleText composable wraps the scrambleText utility from AnimeJS, providing a reactive way to animate text with a scramble/reveal effect.
Arguments
target
AnimeTargets required
The element whose text content will be scrambled. Can be a CSS selector, DOM element, Vue template ref, or component.
animationOptions
MaybeRefOrGetter<AnimationParams>
Standard AnimeJS animation parameters (e.g.,
autoplay, loop, alternate). These control the animation playback, not the scramble behavior.scrambleOptions
MaybeRefOrGetter<ScrambleTextParams>
Options specific to the scramble effect. See the AnimeJS Scramble Text documentation for all available options.
Example
Hello from nanime!
import type { ScrambleTextParams } from '#nanime/types'
import { useIntervalFn } from '@vueuse/core'
const el = useTemplateRef('text')
const index = ref(0)
const texts = [
'Hello from nanime!',
'Scramble text with animejs!',
'Reactive composables rock',
'Care to star us on github? :)',
]
const scrambleConfig = computed((): ScrambleTextParams => ({
text: texts[index.value],
chars: 'symbols',
perturbation: 0.3,
settleRate: 25,
settleDuration: 350,
revealRate: 20,
}))
useScrambleText(el, { ease: 'inCirc', duration: 2500 }, scrambleConfig)
useIntervalFn(() => {
index.value = (index.value + 1) % texts.length
}, 5000)
<template>
<p
ref="text"
class="font-mono text-lg"
>
Hello from nanime!
</p>
</template>
Return Value
Returns a shallowReactive object wrapping the AnimeJS animation instance.
API
Types
function useScrambleText(
target: AnimeTargets,
animationOptions?: MaybeRefOrGetter<AnimationParams>,
scrambleOptions?: MaybeRefOrGetter<ScrambleTextParams>,
): JSAnimation
type AnimeTargets = TargetsParam | MaybeElementRef | MaybeElementRef[]
See AnimeJS Scramble Text documentation for the full ScrambleTextParams type.
Caveats
- Don't destructure the return value. The instance is wrapped in
shallowReactive, and destructuring copies its values out once, disconnecting them from the instance.
// loses the connection to the instance
const { restart } = useScrambleText(el, {}, { text: 'Hello' })
// keeps it
const animation = useScrambleText(el, {}, { text: 'Hello' })
animation.restart()
Call
useScrambleText synchronously in setup() for it to react to animationOptions and scrambleOptions
changes. Called from onMounted, a watcher, or a handler, it runs in
instant mode: the animation is
created once and both option objects are read only that first time.