- From: Stephen McGruer via GitHub <sysbot+gh@w3.org>
- Date: Thu, 19 Sep 2019 05:42:39 +0000
- To: public-css-archive@w3.org
stephenmcgruer has just created a new issue for https://github.com/w3c/csswg-drafts:
== Issues with ScrollTimeline and animating physical vs logical properties when using writing modes ==
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 https://github.com/WICG/scroll-animations/issues/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.
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4350 using your GitHub account
Received on Thursday, 19 September 2019 05:42:40 UTC