{"id":106058,"date":"2021-12-28T07:00:00","date_gmt":"2021-12-28T15:00:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/oldnewthing\/?p=106058"},"modified":"2021-12-17T21:35:34","modified_gmt":"2021-12-18T05:35:34","slug":"20211228-00","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20211228-00\/?p=106058","title":{"rendered":"A rejected attempt to inject pseudo-physics into Windows 8 toast notifications"},"content":{"rendered":"<div id=\"p20211228_styles\">\u00a0<\/div>\n<p>Windows 8 toast notifications appeared in the upper right corner of the screen, and you dismissed them by flicking them to the right.<\/p>\n<div style=\"background-color: #0b5fa7; padding: 1em 0; width: 30em; height: 6em; position: relative; overflow: hidden;\">\n<div style=\"background-color: #0072c5; color: white; padding: 1em; position: absolute; right: 0; width: 20em; font-family: Segoe UI Light, Tahoma, sans-serif; font-size: 10pt; line-height: 150%; animation: simple-toast-exit 4s linear infinite;\">\n<div><b>Budget meeting<\/b><\/div>\n<div>Conference Room A<\/div>\n<div>Today: 1:30 PM<\/div>\n<div style=\"position: absolute; right: 1em; bottom: 1em; font-family: Segoe UI, sans-serif;\">\ud83d\udcc5\ufe0e<\/div>\n<div style=\"position: absolute; background-color: gray; border-radius: 2em; border: solid 1px black; animation: simple-toast-exit-finger 4s linear infinite; height: 3em; width: 3em; top: 2em; left: 10em;\">\u00a0<\/div>\n<\/div>\n<\/div>\n<p>During the design explorations for how toasts should behave, a senior executive lobbied for the ability to pull the toast to the <i>left<\/i>.<\/p>\n<p>What happens when you pull the toast to the left?<\/p>\n<p>Well, nothing yet.<\/p>\n<p>But the deal is that the toast is on an invisible rubber band, and when you let go, the toast goes <i>zoom<\/i> off to the right.<\/p>\n<div style=\"background-color: #0b5fa7; padding: 1em 0; width: 30em; height: 6em; position: relative; overflow: hidden;\">\n<div style=\"background-color: #0072c5; color: white; padding: 1em; position: absolute; right: 0; width: 20em; font-family: Segoe UI Light, Tahoma, sans-serif; font-size: 10pt; line-height: 150%; animation: elastic-toast-exit 4s linear infinite;\">\n<div><b>Budget meeting<\/b><\/div>\n<div>Conference Room A<\/div>\n<div>Today: 1:30 PM<\/div>\n<div style=\"position: absolute; right: 1em; bottom: 1em; font-family: Segoe UI, sans-serif;\">\ud83d\udcc5\ufe0e<\/div>\n<div style=\"position: absolute; background-color: gray; border-radius: 2em; border: solid 1px black; animation: elastic-toast-exit-finger 4s linear infinite; height: 3em; width: 3em; top: 2em; left: 10em;\">\u00a0<\/div>\n<\/div>\n<\/div>\n<p>So now, instead of just flinging the toast off the screen, you can <i>shoot it<\/i> off the screen!<\/p>\n<p>I don&#8217;t know how long it took the design team to talk the senior executive down from this idea. For all I know, the visualization above is the closest it ever came to reality.<\/p>\n<p>Maybe they were able to convince the senior executive by pointing out that if you add this behavior for dragging to the left, then you won&#8217;t be able to add swipe-left features in the future. The swipe-left gesture got wasted on this stupid animation.<\/p>\n<p>Or because the overall design aesthetic for Windows 8 was to <i>reject<\/i> physics and skeumorphism and embrace the digital nature of computers.<\/p>\n<p>Or because it made Windows 8 look like the misbehaving student shooting rubber bands at the teacher.<\/p>\n<p>Whatever the reason, the result is that you can&#8217;t shoot Windows 8 notifications across the screen. Not that <i>you<\/i> ever asked for that.<\/p>\n<p>\n<script>\n(function() {\n  \/\/ break up \"style\" to prevent wordpress from injecting random junk\n  document.getElementById(\"p20211228_styles\").innerHTML = `<s` + `tyle>\n@keyframes simple-toast-exit {\n    from { transform: none; }\n    40%  { transform: none; }\n    50%  { transform: translateX(+500px); }\n    to   { transform: translateX(+500px); }\n}\n@keyframes simple-toast-exit-finger {\n    from { opacity: 0%; }\n    19%  { opacity: 0%; }\n    20%  { opacity: 80%; }\n    to   { opacity: 80%; }\n}\n@keyframes elastic-toast-exit {\n    from { transform: none; }\n    25%  { transform: none; }\n    60%  { transform: translateX(-150px); }\n    65%  { transform: translateX(+500px); }\n    to   { transform: translateX(+500px); }\n}\n@keyframes elastic-toast-exit-finger {\n    from { opacity: 0%; }\n     5%  { opacity: 0%; }\n     6%  { opacity: 80%; }\n    65%  { opacity: 80%; }\n    66%  { opacity: 0%; }\n    to   { opacity: 0%; }\n}\n<\/s` + `tyle>`;\n})();\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Like a mischievous rubber band flung across the screen.<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[2],"class_list":["post-106058","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-history"],"acf":[],"blog_post_summary":"<p>Like a mischievous rubber band flung across the screen.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/106058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=106058"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/106058\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=106058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=106058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=106058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}