[Video](https://www.youtube.com/watch?v=jjtiIIjEsTw)

In today's haunted GUI Challenge, @AdamArgyleInk live codes CSS clip-path transitions, demo's some rad effects, and covers the gotchas. If you don't know clip-path, you will by the end.

Chapters:

- 0:00 - Introduction
- 0:41 - Overview
- 1:55 - Debugging Corner
- 2:20 - Reduced motion
- 4:55 - Chrometober
- 6:05 - clip-path syntax
- 14:20 - square transitions
- 19:25 - transition.style
- 21:02 - Outro

Resources:

- Try a demo → <https://goo.gle/3DxkVEH>
- Get the source → <https://goo.gle/3f7fm6n>
- Transition.style → <https://goo.gle/3W8nhkL>

Watch more GUI Challenges → <https://goo.gle/GUIchallenges>

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

[Back to all episodes](https://web.dev/shows/)