HN Theater @HNTheaterMonth

The best talks and videos of Hacker News.

Hacker News Comments on
Bringing page transitions to the web

Google Chrome Developers · Youtube · 8 HN points · 1 HN comments
HN Theater has aggregated all Hacker News stories and comments that mention Google Chrome Developers's video "Bringing page transitions to the web".
Youtube Summary
Native apps often feature transitions between states that both look great and help communicate the type of navigation to the user. The bad news: creating transitions between pages on the web is impossible. In-page transitions are possible, but complex. The good news: new APIs are coming to simplify this process, building on top of CSS animations and the web animation API, and it works across navigations!

Resources:
Demo → https://goo.gle/3M55GV8 (requires document-transition and enable-experimental-web-platform-features flags)
Developer guide → https://goo.gle/38hsYIU
Full explainer → https://goo.gle/3yrbzrS
Codelab → https://goo.gle/39cXoMw

Speaker: Jake Archibald

Watch more:
All Google I/O 2022 Sessions → https://goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → https://goo.gle/IO22_Web
All Google I/O 2022 technical sessions → https://goo.gle/IO22_Sessions

Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#GoogleIO
HN Theater Rankings

Hacker News Stories and Comments

All the comments and stories posted to Hacker News that reference this video.
May 16, 2022 · vekerdyb on Chrome Page Transitions
Accompanying Google I/O talk https://www.youtube.com/watch?v=JCJUPJ_zDQ4
May 16, 2022 · 2 points, 0 comments · submitted by recursion
dredmorbius
Such transitions translate quite poorly to e-ink devices, which have a limited pallet (1--16 greyscale shades, typically, or a desaturated colour palette), and high refresh times, from 0.25 to 4 seconds, depending on devices (most seem to accomplish 0.5 -- 1s at higher-quality modes, which includes colour).

Because of falling prices, improved battery life from e-ink displays, bright-light viewing advantage, and an increasing backlash to dopaminergic Web and app design, e-ink is seeing increasing appeal and use.

Oddly, what most suits e-ink devices is literal page-based navigation. Not scrolling, not pop-ups, not slides, not animation, but a full-page transition from previous to subsequent state, much as one would turn the page of a book. The limitations and ambiguities of scroll-based navigation in particular are addressed by this.

Pop-up elements are a possible exception to a full-page transition, as many e-ink devices can repaint portions of the screen. But even here, the less animation the better, and the key issue is to clearly indicate that a pop-up has occurred, and where it is, usually by clearly indicating both borders and any interactive elements of the pop-up itself. (Memo to designers: "flat" and low-contrast design fail at this tremendously.)

May 13, 2022 · 2 points, 0 comments · submitted by pbowyer
May 12, 2022 · 4 points, 0 comments · submitted by pier25
HN Theater is an independent project and is not operated by Y Combinator or any of the video hosting platforms linked to on this site.
~ yaj@
;laksdfhjdhksalkfj more things
yahnd.com ~ Privacy Policy ~
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.