{"id":10088,"date":"2026-06-19T10:59:23","date_gmt":"2026-06-19T15:59:23","guid":{"rendered":"https:\/\/master.dev\/blog\/?p=10088"},"modified":"2026-06-19T10:59:24","modified_gmt":"2026-06-19T15:59:24","slug":"in-n-out-animations-view-transitions-part-3-3","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/in-n-out-animations-view-transitions-part-3-3\/","title":{"rendered":"In-N-Out Animations: View Transitions (Part 3\/3)"},"content":{"rendered":"\n

The point of this series is animating elements in and out of view, particularly on Hard Mode\u2122\ufe0f. That is, when those elements transition from display: none;<\/code> to display: block;<\/code> (or another display time, or visibility changes, etc) that was traditionally territory where animating was hard.<\/em><\/p>\n\n\n\n

Just as hard is animating an element when the element is entering the DOM for the very first time, and even harder, when it’s leaving<\/em> the DOM. But now we’ve got View Transitions in our toolbox and it’s going to help us do just this.<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n In-N-Out Animations: Dialogs (Part 1\/3)<\/a>\n <\/li>\n
  2. \n In-N-Out Animations: Popovers (Part 2\/3)<\/a>\n <\/li>\n
  3. \n In-N-Out Animations: View Transitions (Part 3\/3)<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    View Transitions<\/h2>\n\n\n\n

    We’re going to look at “same page” view transitions which is most relevant here. But there are also “multi page” view transitions which are arguably more broadly amazing.<\/p>\n\n\n\n

    The core API we’re dealing with for same-page view transitions is like this:<\/p>\n\n\n

    addButton.addEventListener(\"click\"<\/span>, () => {\n  document<\/span>.startViewTransition(()<\/span> =><\/span> {\n    addItemToDOM();\n  });\n});\n\nremoveButton.addEventListener(\"click\"<\/span>, () => {\n  document<\/span>.startViewTransition(()<\/span> =><\/span> {\n    removeItemToDOM();\n  });\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    But we probably wanna add a little resiliency there for browsers who may not support them, and give ourselves a little cleanup function if we need it too:<\/p>\n\n\n
    addButton.addEventListener(\"click\"<\/span>, () => {\n  if<\/span> (!document<\/span>.startViewTransition) {\n    addItemToDOM();\n    cleanupIncomingItems();\n    return<\/span>;\n  }\n\n  const<\/span> transition = document<\/span>.startViewTransition(()<\/span> =><\/span> {\n    addItemToDOM();\n  });\n  transition.finished.then(cleanupIncomingItems);\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Notice that not all these functions are defined yet. Here’s a pretty bare-bones example:<\/p>\n\n\n\n