Skip to content

Next 15.3 breaks scroll animations #78046

Closed
Closed
@IvanKalinin

Description

@IvanKalinin

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/lgl5ty

To Reproduce

https://codesandbox.io/p/devbox/lgl5ty

  1. Start the application with NextJS 15.3.x
  2. Add CSS scroll animation
    E.g.
@keyframes parallax {
  from {
    transform: translateX(var(--transition-from));
  }
  to {
    transform: translateX(var(--transition-to));
  }
}

@supports (animation-timeline: view()) {
  [data-part="image"] {
    animation: parallax linear;
    animation-timeline: view();

    --transition-from: -50%;
    --transition-to: -100%;
  }
}
  1. See, the animation does not work.
    bundler generate this code
@supports (animation-timeline: view()) {
    [data-part="image"] {
        --transition-from: -50%;
        --transition-to: -100%;
        animation: linear parallax view();
    }
}
Image

Current vs. Expected behavior

It works fine with 15.2
https://codesandbox.io/p/devbox/whd6nm

it generates this CSS

@supports (animation-timeline: view()) {
    [data-part="image"] {
        --transition-from: -50%;
        --transition-to: -100%;
        animation: auto linear 0s 1 normal none running parallax normal normal;
    }
}
Image

Provide environment information

Next.JS 15.3.0

Which area(s) are affected? (Select all that apply)

CSS

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    CSSRelated to CSS.TurbopackRelated to Turbopack with Next.js.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions