Thinking on ways to solve TOASTS

In today's GUI Challenge, @Adam Argyle shares thinking on a way to build toasts, a non-interactive and passive component for UI to provide user feedback. Explore the [output] element, CSS grid, animations and the FLIP technique which helps build an adaptive and accessible component.

Chapters:
0:00 - Introduction
0:23 - Overview
2:02 - [output]
3:00 - Layout
4:41 - Animation
5:50 - JavaScript Part 1
6:55 - Reduced Motion
7:43 - Keyframes
8:09 - JavaScript Part 2
10:48 - F.L.I.P.
14:18 - Outro

Resources:
Read along → https://goo.gle/3GghBfI
Try a demo → https://goo.gle/3EHsuXG
Get the source → https://goo.gle/3oykceU
FLIP → https://goo.gle/3oz8P6D
Paul Lewis (from SuperCharged) → https://goo.gle/31IOFy0

Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#GUIchallenges #CSS #ChromeDeveloper