[csswg-drafts] [scroll-animations-1][css-writing-modes-4] Direction of horizontal / vertical axes (#8665)

flackr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [scroll-animations-1][css-writing-modes-4] Direction of horizontal / vertical axes ==
It's unclear to me whether the direction horizontal and vertical increase in is defined. From [css-writing-modes-4](https://w3c.github.io/csswg-drafts/css-writing-modes-4/#horizontal-dimension):

> The physical dimensions are width and height, which correspond to measurements along the x-axis (horizontal dimension) and y-axis (vertical dimension), respectively.

This clarifies that horizontal is always the x-axis, but there was some confusion when implementing scroll-timeline whether an animation on the horizontal axis should flip or not when in an RTL scroller.

There's effectively two options (for brevity only explaining horizontal):
1. Horizontal is equivalent to inline in a horizontal writing mode and block in a vertical writing mode, but follows the respective flow direction. This means that in RTL horizontal starts at the right and increases in the left direction.
2. Horizontal always starts at the left and increases to the right.

Whichever is the chosen one, I also wanted to make sure it's clear from the spec.

# Affected specs

* Affects animation direction in [scroll-animations-1](https://drafts.csswg.org/scroll-animations-1/)
* May affect [css-scroll-snap-1](https://w3c.github.io/csswg-drafts/css-scroll-snap/#properties-on-the-scroll-container)

# Examples

## Parallax

Transform (and I believe background-position) currently can only be expressed in physical axes. Developers may expect to be able to use `horizontal` / `vertical` so that the scroll / view timeline is also physical and work with both transform:
```css
@keyframes slide {
  from { transform: translateX(0); } /* unnecessary but included for clarity. */
  to   { transform: translateX(200px); }
}
. parallax-transform {
  animation-name: slide;
  animation-timeline: scroll(horizontal);
  position: absolute;
  left: 0; /* starts anchored to left edge */
}
```

And background-position:
```css
@keyframes bg-slide {
  from { background-position: left center; }
  to   { background-position: right center; }
}
. parallax-transform {
  animation-name: bg-slide;
  animation-timeline: scroll(horizontal);
  background-image: url('parallax-background.webp');
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8665 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 31 March 2023 16:59:19 UTC