w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.5k stars 667 forks source link

[scroll-animations-1] Scroll and view timelines should be active in non-printed media #8688

Open flackr opened 1 year ago

flackr commented 1 year ago

In issue #8226 we resolved that for printed/paged media scroll and view timelines observing the root scroller are inactive. This was based on the comment that it "is basically the same problem for paged and print". I'm not sure that we made the correct call to treat the two things as the same thing.

Print is an exception because it must be printed with a single rendering. However, when viewing paged media in an ebook for example, I think it would make sense for a scroll timeline to be able to be used to reflect your progress through the pages of the book.

@fantasai @tabatkins WDYT?

fantasai commented 1 year ago

I think my main concern is that authors will write scroll animations in a way that doesn't work if you don't have actually continuous media. E.g. if you take @bramus’s "cards roll up and push back as you scroll" example, and the document paginates (possibly partway through some of the cards), are you even going to get anything sensible?

fantasai commented 1 year ago

CC @faceless2 @MurakamiShinyu See spec https://www.w3.org/TR/scroll-animations-1/

css-meeting-bot commented 1 year ago

The CSS Working Group just discussed [scroll-animations-1] Scroll and view timelines should be active in non-printed media, and agreed to the following:

The full IRC log of that discussion <TabAtkins> flackr: We previously decided that for printing purposes it doesn't make sense to ahve scroll animations be inactive
<TabAtkins> flackr: We defined it in a way that it disables for all paged media
<TabAtkins> flackr: Wondering if it makes sense to have these still run for paged media that can change its behavior, like a progress bar on an ereader
<astearns> +1 for enabling on interactive paged media devices
<TabAtkins> flackr: So I propose we support it for paged media generally, just not for printed media
<TabAtkins> fantasai: My concern with this is authors are v likely to write scroll anims that don't work if you don't have continuous media
<TabAtkins> fantasai: Like a page might be halfway thru an element's progress
<TabAtkins> fantasai: So it won't look good
<astearns> q+
<TabAtkins> fantasai: While an author is more likely to write their page in a way that works if scroll anims don't work at all
<TabAtkins> fantasai: Lots of reasons to do that
<TabAtkins> fantasai: but writing the page so that it makes sense when you happen to paginate halfway thru an animation, it's not likely
<TabAtkins> fantasai: we could define a page timeline for these kinds of things which would have discrete steps
<TabAtkins> fantasai: but i'd rather the author have an explicit understanding that it has discrete points, it's not continuous
<TabAtkins> astearns: kneejerk reaction to limit features for paged media because people could get it wrong
<TabAtkins> astearns: I'd rather allow people to do things for devices that are capable of it, and let them deal with the authoring problems of writing for both continuous and paged
<TabAtkins> astearns: There are some things you can do in desktop that look bad in mobile, but we dont' disable them there
<TabAtkins> fantasai: When you dont' design for mobile we lay out into a wide viewport because pages *do* break badly
<flackr> qq+
<astearns> ack astearns
<TabAtkins> fantasai: So people don't usually design for print, but it still generally works
<TabAtkins> fantasai: But with a scroll anim if you're animating an element halfway into view, and that's where the page break happens, yuo can't see the element
<TabAtkins> fantasai: If we have a page timeline, and your animations happen to work for both continouus and discrete, you can just switch your timeline
<ydaniv> q+
<TabAtkins> fantasai: But if we generally apply a continuous animation to paged it'll usually break, i think
<astearns> ack flackr
<Zakim> flackr, you wanted to react to emilio
<TabAtkins> flackr: It's not arbitrary, it's consistent with a browser
<TabAtkins> flackr: I'm curious where you'll get 90% is broken
<TabAtkins> fantasai: Not ture, you'll frequently have problems. Imagine a paragraph, page break in there, it's 60% in view
<TabAtkins> fantasai: you'll have 60% opacity because it fragmented there
<TabAtkins> fantasai: and you can't read it
<TabAtkins> fantasai: and that's just opacity, if you do fancy transforms or whatever the interim state can be unreadable
<TabAtkins> flackr: I was wondering if people would b eusing view timelines on things that could be fragmented, and i guess the answer is yes
<TabAtkins> flackr: my other concern is that having a differen ttype of timeline is simple for scroll timeline, but do we need something else for view timeline or do VT just not make sense in paged media?
<TabAtkins> flackr: I think it's easier for authors to turn them off with an MQ if they're likely to break
<florian> q+
<TabAtkins> fantasai: They're not gonna do that, they're just not gonna think about it
<bramus> +1 to fantasai there
<astearns> ack ydaniv
<TabAtkins> ydaniv: Usually people don't animate things that are fragmented
<TabAtkins> ydaniv: they animate things that they know are gonna stay on the screen as a unit
<TabAtkins> ydaniv: in the case of paged media, isn't that closer to having reduced motion?
<TabAtkins> ydaniv: If you had something and it was completely disabled, then you end up with something broken
<florian> q- later
<TabAtkins> astearns: not sure i understood
<TabAtkins> ydaniv: If someone made a scroll animation for their page but it's completely disabled on paged media, and the animation was supposed to bring things into view
<TabAtkins> ydaniv: so my intuition is that it should behave more like having reduced motion
<TabAtkins> astearns: ah so someone might author a scroll animation and they know they shoudl turn it off for reduced motion, and they'll deal with that case, but they won't think about paged media
<astearns> ack bramus
<TabAtkins> bramus: i agree with fantasai that authors won't think about this
<TabAtkins> bramus: i thought her example of animating the opacity was a great example, if you respected that during printing you could end up with what looks like an empty page
<TabAtkins> flackr: and that's if you animate something that can fragment as it comes into view
<TabAtkins> flackr: I'm okay with leaving it off, i just wanted to bring it up with the WG
<TabAtkins> astearns: And we can leave it like this until someone asks for animations on an eink device or something
<TabAtkins> fantasai: I think it would be great to have animations on paged media, it would just have to handle the fact that it's paged and discrete
<TabAtkins> florian: I was thinking fantasai's earlier analogy with mobile content was good
<fantasai> Like, I'm pretty sure a lot of the stuff on NY Times will break if you try to print it, without explicit accommodations for printing. NY Times probably has a print stylesheet, but most websites won't
<TabAtkins> florian: it's possible to have a good mobile design but by default it's broken, so we instead render like a desktop by default and let you opt into the good behavior
<TabAtkins> florian: So similar here so it's off by default but you can opt into working
<flackr> q+
<astearns> ack florian
<TabAtkins> florian: You mentioned that since it's paginate dit might be too hard to get it right so we just shouldn't do it
<TabAtkins> florian: But if people *can* get it right we should let people opt in
<TabAtkins> fantasai: I think until we ahve an exapmle, like the NYT has a bunch of animated scrolling articles
<TabAtkins> fantasai: If they wrote it naively, what would they get out of it?
<TabAtkins> fantasai: I think it woudl be broken
<TabAtkins> florian: Right I think it would be broken by default, so turn it off by default
<dbaron> amusing historical bug about animation and pagination: https://bugzilla.mozilla.org/show_bug.cgi?id=2586
<TabAtkins> florian: so I support it being off by defualt and having an opt-in would be nice. But we can add the opt-in for later
<TabAtkins> astearns: there is an example in the NYT with fragmented regions that works great
<TabAtkins> fantasai: yeah that's great, but they wrote it specifically for a fragmented context, it wasn't just a continuous media animatio nthat was run thru the paginator
<astearns> s/fragmented regions/fragmented regions and hand-coded scroll animations
<TabAtkins> flackr: Was thinking about detecting when an animation was declared in an MQ for paged media, and having it carry a flag that lets it work
<TabAtkins> I'd really like to avoid that. :(
<TabAtkins> flackr: The nice thing is that it's not additional syntax
<fantasai> TabAtkins: I would really like to avoid attaching state to something being in a media query
<fantasai> TabAtkins: we avoided in the past to avoid media queries implying state
<fantasai> TabAtkins: there might be reasons for it
<fantasai> TabAtkins: but want to avoid
<fantasai> TabAtkins: if we want an opt in, let's have an explicit opt in
<fremy> q?
<fantasai> TabAtkins: e.g. Opera used to do stuff with paged media and projection
<fremy> q+
<flackr> ack flackr
<fantasai> florian: projection MQ was weird, it made you go full screen or something like that?
<myles> +1 to avoiding logic of the form "if this was defined in a media query, take a different behavior"
<fantasai> TabAtkins: presence of MQ at least doesn't change your styles
<TabAtkins> fremy: do we ahve any paged media that's implemente din any browser?
<TabAtkins> fantasai: yeah, when you print
<TabAtkins> fremy: Besides that, we already ahve agreement on it not working when we print
<TabAtkins> flackr: yeah that was the previous resolution
<TabAtkins> astearns: think we're circling a bit, the resolution is to keep it turned off for all paged media, even if it's interactive
<TabAtkins> astearns: for now
<TabAtkins> astearns: So any objections to clsoing no change?
<TabAtkins> RESOLVED: close no change (but without prejudice, examples in the future can change it)
<fantasai> fantasai also does not want to figure out the interaction of paging and fragmentation
<fantasai> Like as you page, the fragmentation changes, becaus eyou animated the height of something is ... really terrifying