Skip to content

[css-anchor-position] custom @position-try should allow transform-origin and translate #11666

Open
@o-t-w

Description

@o-t-w

When adding animations to elements making use of anchor positioning, it would be useful to be able to change the transform-origin and translate depending on the position of the anchor. This would be possible if a custom @position-try could include the transform-origin property.

This Codepen demonstrates the sort of effects developers may want to achieve that are dependent on transform-origin being set in the appropriate place. Here's an example of how broken the animation looks when flip-block repositions the popover.

An example of using tranlate: the following transition works well when a dropdown is shown below the button that opens it, but would look strange if the dropdown is above the button.

[popover]:popover-open {
  opacity: 1;
  translate: 0 0;
  transition: opacity .2s, translate .25s, display .25s allow-discrete, overlay .25s allow-discrete;
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    translate: 0 -4px;
  }
}

I wanted it to look like the anchored popover was literally dropping down from the button, which only makes sense if it is below the button.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions