[scroll-animations-1][css-writing-modes-4] Direction of horizontal / vertical axes #8665
Description
It's unclear to me whether the direction horizontal and vertical increase in is defined. From css-writing-modes-4:
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):
- 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.
- 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
- May affect css-scroll-snap-1
Examples
Parallax
Transform (and I believe background-position) currently can only be expressed in physical axes (See #4350). Developers may expect to be able to use horizontal / vertical so that the scroll / view timeline is also physical and work with both transform:
@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:
@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');
}