Skip to content

[css-view-transitions-1] Animate backdrop-filter for named elements #9358

Closed
@khushalsagar

Description

@khushalsagar

View Transition currently automatically animates an elements size/transform. backdrop-filter should probably also be in this list. Its a property of how the element renders where its embedded, not the element's content itself. Same discussion as mix-blend-mode: #8962.

With mix-blend-mode we don't set up an animation because it can't be interpolated but backdrop-filter can.

Here's an example: https://codepen.io/LukyVj/pen/MWZovLb. The following bit of CSS fixes the issue, which can be done automagically by the browser.

nav {
  view-transition-name: nav;
}

::view-transition-group(nav) {
  backdrop-filter: blur(3px);
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Unslotted

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions