{"id":1082,"date":"2024-02-29T09:12:52","date_gmt":"2024-02-29T15:12:52","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1082"},"modified":"2024-02-29T09:12:52","modified_gmt":"2024-02-29T15:12:52","slug":"view-transitions-handling-aspect-ratio-changes","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/view-transitions-handling-aspect-ratio-changes\/","title":{"rendered":"View transitions: Handling aspect ratio changes"},"content":{"rendered":"\n<p><a href=\"https:\/\/jakearchibald.com\/2024\/view-transitions-handling-aspect-ratio-changes\/\">Jake Archibald has some great examples of awkward gotchas with View Transitions<\/a>. View Transitions are naturally great at tweening one state of a DOM element to the next, but you&#8217;ll see likely-unwanted ghosting if the element changes <em>shape<\/em> from one state to the next. You can either prevent it from changing shape by changing either the starting or ending state, or in the case that you need the different shapes, grab ahold of the parts and have them move individually how you want them to. <\/p>\n\n\n\n<p>I found it satisfying that the answers weren&#8217;t in <em>more<\/em> new exotic web technologies, but just in understanding and using existing CSS layout better.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jake Archibald has some great examples of awkward gotchas with View Transitions. View Transitions are naturally great at tweening one state of a DOM element to the next, but you&#8217;ll see likely-unwanted ghosting if the element changes shape from one state to the next. You can either prevent it from changing shape by changing either [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1084,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[7,101],"class_list":["post-1082","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-css","tag-view-transitions"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/02\/ghost-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=1082"}],"version-history":[{"count":2,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1082\/revisions"}],"predecessor-version":[{"id":1085,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1082\/revisions\/1085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/1084"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=1082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=1082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=1082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}