In today’s GUI Challenge, @AdamArgyleInk progressively enhances a multi-state button to morph between states using the super rad View Transitions api.
Chapters:
0:00 – Introduction
0:49 – View Transitions review
1:35 – HTML
2:34 – Support CSS
3:04 – JS
4:42 – startViewTransition()
5:25 – Morph CSS
6:25 – Animation Inspection
7:55 – More button states
8:41 – Effect recap
9:54 – Outro
Resources:
Try a demo → https://goo.gle/43xmXi0
Get the source → https://goo.gle/44IILrH
View Transitions → https://goo.gle/44D8yBu
More about View Transitions on Adam’s blog → https://goo.gle/41MzE89
Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
#GUIchallenges