Environment

• Operating System: Windows_NT
• Node Version: v22.17.1
• Nuxt Version: 4.1.1
• CLI Version: 3.28.0
• Nitro Version: 2.12.4
• Package Manager: [email protected]
• Builder: -
• User Config: modules, devtools, app, css, site, compatibilityDate, nitro, eslint, schemaOrg, scripts, supabase
• Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], motion-v/[email protected], @nuxtjs/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.0.1

Reproduction

https://codesandbox.io/p/devbox/new-cloud-r8s3yz?workspaceId=ws_5DYg3LqMrjTKCvwSfjZf5g

Description

<UChangelogVersions> has two motion-related issues caused by improper useScroll targeting.

1. Motion applied to the entire page:

The motion animation (fade/translate) is applied globally to the window scroll instead of being scoped to the component container.

As a result, the entire page animates when scrolling, not just the changelog items.

2. Incorrect behavior inside custom scroll containers

When the component is rendered inside a scrollable container (not the main window), the motion does not track or trigger correctly.

Proposition:

Instead of just being a boolean, add the possibility to pass UseScrollOptions similar to indicatorMotion prop behavior :

/**
   * Display an indicator bar on the left.
   * @defaultValue true
   * @see https://motion.dev/docs/vue-use-scroll#api
   */
  indicator?: boolean | UseScrollOptions

Additional context

No response

Logs