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

  1. Use a built-in easing name (e.g. 'linear', 'easeInOutCubic') or pass an easing function (t => number).
  2. Extend options.patterns with your custom easing name when configuring VGoTo / createVuetify goto.
  3. 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

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


AI-assisted analysis of vuetifyjs/vuetify@8d153908df (2026-08-12). Data as JSON: /api/errors/47d44f89dd118478. Report an issue: GitHub.