{"id":38203,"date":"2025-08-27T07:00:00","date_gmt":"2025-08-27T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=38203"},"modified":"2025-08-21T15:20:18","modified_gmt":"2025-08-21T22:20:18","slug":"animating-image-state-changes-spas-view-transition-api","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api","title":{"rendered":"Animating Image State Changes in SPAs With View Transition API + Cloudinary"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Creating a smooth, responsive user experience in modern single-page applications (SPAs) requires more than just fast loading times, it demands visual continuity. The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/View_Transition_API\">View Transition API<\/a>, a new feature in modern browsers, provides a powerful yet simple way to animate changes between DOM states, helping users stay grounded in the flow of an app.<\/p>\n<p>In this blog post, we\u2019ll explore how to pair this emerging web API with <a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a>, a media platform that delivers optimized and responsive images, to create seamless transitions when swapping images in a SPA. Building a photo gallery, a product showcase, or any interface that dynamically updates visual content? This combination enhances user engagement while keeping implementation clean and performant.<\/p>\n<h2>Live Demo: View Transition API + Cloudinary in Action<\/h2>\n<p>Before we dive into the implementation details, here\u2019s a live example of what we\u2019re building. Click the button to cycle through Cloudinary-hosted images with smooth, animated transitions handled by the View Transition API:<\/p>\n<iframe width=\"100%\" height=\"650\" src=\"\/\/jsfiddle.net\/musebe\/8uf2qL73\/2\/embedded\/result\/\" frameborder=\"0\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\"><\/iframe>\n<h2>How It Works<\/h2>\n<p>Now that you\u2019ve seen the result, let\u2019s unpack how this works under the hood. We\u2019re combining two modern tools:<\/p>\n<ul>\n<li>\n<p>Cloudinary handles image hosting, optimization, and transformation.<\/p>\n<\/li>\n<li>\n<p>The View Transition API provides built-in browser support for animating transitions between DOM states, reducing the need for complex manual animation logic.<\/p>\n<\/li>\n<\/ul>\n<p>Together, they allow us to seamlessly update images with animated transitions in just a few lines of code.<\/p>\n<h2>Set Up the Project<\/h2>\n<p>To keep things simple and organized, create the following structure:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\/view-transition-demo\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 styles.css\n\u2514\u2500\u2500 script.js\n\n<\/code><\/pre>\n<p>Each file will handle a specific concern: markup, styles, and behavior.<\/p>\n<h2>Create the HTML Structure<\/h2>\n<p>In <code>index.html<\/code>, we lay out a heading, an image loaded from Cloudinary, and a button for triggering the transition. The most important part is the <code>view-transition-name<\/code> attribute:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span>\n  <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"main-image\"<\/span>\n  <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_600\/sample.jpg\"<\/span>\n  <span class=\"hljs-attr\">view-transition-name<\/span>=<span class=\"hljs-string\">\"cloudinary-image\"<\/span>\n\/&gt;<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This tells the browser to track this image element across updates, enabling smooth visual transitions.<\/p>\n<p>We also include a simple button:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"next-btn\"<\/span>&gt;<\/span>Next Image<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>And don\u2019t forget to link the CSS and JS files:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"styles.css\"<\/span> \/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"script.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Connect to Cloudinary<\/h2>\n<p>Cloudinary allows us to serve responsive, optimized images via URL. We can dynamically change images using a consistent URL pattern:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_600\/{image-name}.jpg\n<\/code><\/pre>\n<p>In JavaScript, we\u2019ll maintain an array of image filenames and construct new URLs on the fly when users click the button.<\/p>\n<h2>Implement Image Transitions<\/h2>\n<p>In <code>script.js<\/code>, we handle the core logic:<\/p>\n<p>First, keep track of which image is currently displayed:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> images = &#91;<span class=\"hljs-string\">\"sample.jpg\"<\/span>, <span class=\"hljs-string\">\"dog.jpg\"<\/span>, <span class=\"hljs-string\">\"balloons.jpg\"<\/span>];\n<span class=\"hljs-keyword\">let<\/span> currentIndex = <span class=\"hljs-number\">0<\/span>;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Then, set up a function to update the image:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateImage<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> next = (currentIndex + <span class=\"hljs-number\">1<\/span>) % images.length;\n  <span class=\"hljs-keyword\">const<\/span> newSrc = <span class=\"hljs-string\">`https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_600\/<span class=\"hljs-subst\">${images&#91;next]}<\/span>`<\/span>;\n  <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"main-image\"<\/span>).src = newSrc;\n  currentIndex = next;\n}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>To apply the transition, we wrap that update in <code>startViewTransition<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"next-btn\"<\/span>).addEventListener(<span class=\"hljs-string\">\"click\"<\/span>, () =&gt; {\n  <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">document<\/span>.startViewTransition) {\n    <span class=\"hljs-built_in\">document<\/span>.startViewTransition(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> updateImage());\n  } <span class=\"hljs-keyword\">else<\/span> {\n    updateImage(); <span class=\"hljs-comment\">\/\/ fallback if unsupported<\/span>\n  }\n});\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This is all you need to get animated DOM updates \u2014 no manual animation logic or extra libraries required.<\/p>\n<h2>Define Custom Transition Animations<\/h2>\n<p>In <code>styles.css<\/code>, we first style the image and assign the same <code>view-transition-name<\/code> that we used in the HTML:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">img<\/span> {\n  <span class=\"hljs-attribute\">view-transition-name<\/span>: cloudinary-image;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n  <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">12px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.2<\/span>);\n}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>To control the animation itself, we define styles for the \u201cold\u201d and \u201cnew\u201d visual states of the image:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-pseudo\">::view-transition-old(cloudinary-image)<\/span> {\n  <span class=\"hljs-attribute\">animation<\/span>: fadeOut <span class=\"hljs-number\">0.4s<\/span> ease forwards;\n}\n\n<span class=\"hljs-selector-pseudo\">::view-transition-new(cloudinary-image)<\/span> {\n  <span class=\"hljs-attribute\">animation<\/span>: fadeIn <span class=\"hljs-number\">0.4s<\/span> ease forwards;\n}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>And here are the keyframes that make it work:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-keyword\">@keyframes<\/span> fadeIn {\n  <span class=\"hljs-selector-tag\">from<\/span> { <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>; <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">scale<\/span>(<span class=\"hljs-number\">0.98<\/span>); }\n  <span class=\"hljs-selector-tag\">to<\/span>   { <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">1<\/span>; <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">scale<\/span>(<span class=\"hljs-number\">1<\/span>); }\n}\n\n<span class=\"hljs-keyword\">@keyframes<\/span> fadeOut {\n  <span class=\"hljs-selector-tag\">from<\/span> { <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">1<\/span>; <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">scale<\/span>(<span class=\"hljs-number\">1<\/span>); }\n  <span class=\"hljs-selector-tag\">to<\/span>   { <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>; <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">scale<\/span>(<span class=\"hljs-number\">1.02<\/span>); }\n}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This results in a subtle, polished transition where the old image fades and scales out while the new one fades and scales in.<\/p>\n<h2>Ensure Browser Compatibility<\/h2>\n<p>The View Transition API is currently only supported in <strong>Chrome 111+<\/strong>, <strong>Edge<\/strong>, and other Chromium-based browsers. That\u2019s why we check for support before using it.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">document<\/span>.startViewTransition) {\n  <span class=\"hljs-comment\">\/\/ use animated transition<\/span>\n} <span class=\"hljs-keyword\">else<\/span> {\n  <span class=\"hljs-comment\">\/\/ fallback update<\/span>\n}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This keeps the core functionality working across all browsers, even if some don\u2019t support the transition animations yet.<\/p>\n<h2>Wrapping Up<\/h2>\n<p>Using the <strong>View Transition API<\/strong> alongside <strong>Cloudinary<\/strong>, we\u2019ve built a lightweight, performant way to animate image changes in a single-page app with just a few lines of code.<\/p>\n<p>We:<\/p>\n<ul>\n<li>\n<p>Loaded optimized images from Cloudinary.<\/p>\n<\/li>\n<li>\n<p>Used <code>view-transition-name<\/code> to track elements.<\/p>\n<\/li>\n<li>\n<p>Animated DOM updates with <code>startViewTransition()<\/code>.<\/p>\n<\/li>\n<li>\n<p>Customized transitions with CSS pseudo-elements.<\/p>\n<\/li>\n<\/ul>\n<p>It\u2019s simple, efficient, and feels great in action, especially in supported browsers like Chrome and Edge.<\/p>\n<h2>Bonus: Where to Go Next<\/h2>\n<ul>\n<li>\n<p><strong>Transition multiple elements.<\/strong> Assign unique <code>view-transition-name<\/code>s to text, cards, or other components.<\/p>\n<\/li>\n<li>\n<p><strong>Try multi-page transitions.<\/strong> Add <code>@view-transition { navigation: auto; }<\/code> to animate full-page navigation.<\/p>\n<\/li>\n<li>\n<p><strong>Use real Cloudinary features.<\/strong> Add transformations like cropping or overlays during image swaps. <a href=\"https:\/\/cloudinary.com\/users\/register_free\">Sign up<\/a> for a free Cloudinary account to try it for yourself.<\/p>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":38406,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[332,165],"class_list":["post-38203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-api","tag-image-transformation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Animating Image State Changes in SPAs With View Transition API + Cloudinary<\/title>\n<meta name=\"description\" content=\"Learn how to create smooth, animated image transitions in single-page applications using the new browser-native View Transition API and Cloudinary&#039;s image optimization.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animating Image State Changes in SPAs With View Transition API + Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Learn how to create smooth, animated image transitions in single-page applications using the new browser-native View Transition API and Cloudinary&#039;s image optimization.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-27T14:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1755643231\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Animating Image State Changes in SPAs With View Transition API + Cloudinary\",\"datePublished\":\"2025-08-27T14:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1755643231\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog.jpg?_i=AA\",\"keywords\":[\"API\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api\",\"url\":\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api\",\"name\":\"Animating Image State Changes in SPAs With View Transition API + Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1755643231\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog.jpg?_i=AA\",\"datePublished\":\"2025-08-27T14:00:00+00:00\",\"description\":\"Learn how to create smooth, animated image transitions in single-page applications using the new browser-native View Transition API and Cloudinary's image optimization.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1755643231\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1755643231\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animating Image State Changes in SPAs With View Transition API + Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Animating Image State Changes in SPAs With View Transition API + Cloudinary","description":"Learn how to create smooth, animated image transitions in single-page applications using the new browser-native View Transition API and Cloudinary's image optimization.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api","og_locale":"en_US","og_type":"article","og_title":"Animating Image State Changes in SPAs With View Transition API + Cloudinary","og_description":"Learn how to create smooth, animated image transitions in single-page applications using the new browser-native View Transition API and Cloudinary's image optimization.","og_url":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api","og_site_name":"Cloudinary Blog","article_published_time":"2025-08-27T14:00:00+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1755643231\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Animating Image State Changes in SPAs With View Transition API + Cloudinary","datePublished":"2025-08-27T14:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api"},"wordCount":11,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1755643231\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog.jpg?_i=AA","keywords":["API","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api","url":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api","name":"Animating Image State Changes in SPAs With View Transition API + Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1755643231\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog.jpg?_i=AA","datePublished":"2025-08-27T14:00:00+00:00","description":"Learn how to create smooth, animated image transitions in single-page applications using the new browser-native View Transition API and Cloudinary's image optimization.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1755643231\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1755643231\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/animating-image-state-changes-spas-view-transition-api#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Animating Image State Changes in SPAs With View Transition API + Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1755643231\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog\/Animating_Image_State_Changes_in_SPAs_with_View_Transition_API_Cloudinary-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/38203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=38203"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/38203\/revisions"}],"predecessor-version":[{"id":38204,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/38203\/revisions\/38204"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/38406"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=38203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=38203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=38203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}