Issues with ScrollTimeline and animating physical vs logical properties when using writing modes

[stephenmcgruer]

This is somewhat of a meta-issue about animations, but it is one that is clearly exposed if ScrollTimeline becomes a standard. The issue is that many CSS properties, most predominantly transform, are physical based but ScrollTimelines are logical (possibly; see WICG/scroll-animations#22).

Consider a ScrollTimeline driving a translateX(..) animation:

const timeline = new ScrollTimeline({ scrollSource: scroller, orientation:  'inline' });
const effect = new KeyframeEffect(target, { transform: [ 'translateX(0)', 'translateX(100%)' ] }, 1000);
const animation = new Animation(timeline, effect);
animation.play();

In a direction: ltr scroller, this works as intended - the target moves left-to-right as you scroll left-to-right. But in a direction: rtl scroller, the target moves left-to-right as you scroll right-to-left :(

As noted, this is a meta issue in that it's not immediately solvable by a ScrollTimeline spec. I'm mostly filing it so we are aware of the issue and can discuss it. One approach that may work is just to push on some form of logical transform ability, e.g. adding transform: translateLogical(..) or similar.

[flackr]

This seems like more of a request for logical transform functions than any change to scroll linked animations.

[MurhafSousli]

I confirm the bug, moving custom horizontal scrollbar thumb using translateX works fine in LTR, but in RTL the logical position goes in the opposite direction

however, when I animate right property with position: absolute to move the thumb, it works fine in RTL.