vuetifyjs/vuetify · error · TypeError
Easing function "${options.easing}" not found.
Error message
Easing function "${options.easing}" not found. What it means
Thrown by scrollTo() in the goto composable when the resolved easing is falsy. Easing is resolved from options.patterns[options.easing] (a named key) or, if options.easing is a function, used directly. If the name does not match any key in patterns (and it is not a function), it throws a TypeError.
Source
Thrown at packages/vuetify/src/composables/goto.ts:88
export async function scrollTo (
_target: ComponentPublicInstance | HTMLElement | number | string,
_options: GoToOptions,
horizontal?: boolean,
goTo?: GoToInstance,
) {
const property = horizontal ? 'scrollLeft' : 'scrollTop'
const options = mergeDeep(goTo?.options ?? genDefaults(), _options)
const rtl = goTo?.rtl.value
const target = (typeof _target === 'number' ? _target : getTarget(_target)) ?? 0
const container = options.container === 'parent' && target instanceof HTMLElement
? target.parentElement!
: getContainer(options.container)
const ease = PREFERS_REDUCED_MOTION() ? options.patterns.instant
: typeof options.easing === 'function' ? options.easing
: options.patterns[options.easing]
if (!ease) throw new TypeError(`Easing function "${options.easing}" not found.`)
let targetLocation: number
if (typeof target === 'number') {
targetLocation = getOffset(target, horizontal, rtl)
} else {
targetLocation = getOffset(target, horizontal, rtl) - getOffset(container, horizontal, rtl)
if (options.layout) {
const styles = window.getComputedStyle(target)
const layoutOffset = styles.getPropertyValue('--v-layout-top')
if (layoutOffset) targetLocation -= parseInt(layoutOffset, 10)
}
}
targetLocation += options.offset
targetLocation = clampTarget(container, targetLocation, !!rtl, !!horizontal)
View on GitHub (pinned to 8d153908df)
Solutions
- Use a built-in easing name (e.g. 'linear', 'easeInOutCubic') or pass an easing function (t => number).
- Extend options.patterns with your custom easing name when configuring VGoTo / createVuetify goto.
- Omit `easing` to use the default.
Example fix
// before
const { goTo } = useGoTo()
goTo('#section', { easing: 'bounce' }) // throws
// after
const { goTo } = useGoTo()
goTo('#section', { easing: 'easeInOutCubic' })
// or a custom function:
goTo('#section', { easing: t => 1 - Math.pow(1 - t, 3) }) Defensive patterns
Strategy: validation
Validate before calling
function resolveEasing(nameOrFn: string | ((t: number) => number), patterns: Record<string, (t: number) => number>) {
if (typeof nameOrFn === 'function') return nameOrFn
const fn = patterns[nameOrFn]
if (!fn) throw new TypeError(`Unknown easing: ${nameOrFn}`)
return fn
} Type guard
function isEasingName(v: unknown, patterns: Record<string, unknown>): v is string {
return typeof v === 'string' && v in patterns
} Try / catch
try {
goTo('#sec', { easing: customName })
} catch (e) {
if (e instanceof TypeError && /Easing function/.test(e.message)) {
goTo('#sec', { easing: 'easeInOutCubic' })
} else throw e
} Prevention
- Whitelist easing names against the configured patterns.
- Pass a function for custom curves to avoid name lookups.
- Document the default patterns keys for your team.
When it happens
Trigger: Passing a VBtn/`v-btn` with `:to`-style scroll, or calling useGoTo()(...).go(target, { easing: 'bounce' }) where 'bounce' is not in the patterns map. Default patterns include keys like 'linear', 'easeInOutCubic', etc.
Common situations: Custom easing name that does not exist in the default pattern set, typo in the easing string, or passing a CSS easing curve string (meant for transitions) into the JS scroll API.
Related errors
- ${input} is not a valid timestamp. It must be a Date, number
- Unrecognized pagination target ${pageBy}
- [${v}] cannot be parsed into date format specification
- [Vuetify] Could not find injected goto instance
AI-assisted analysis of vuetifyjs/vuetify@8d153908df (2026-08-12).
Data as JSON: /api/errors/47d44f89dd118478.
Report an issue: GitHub.