From 6a24368dd3746fe97386988e38c7bb6bf4f01e3b Mon Sep 17 00:00:00 2001
From: LoganDark <github@logandark.mozmail.com>
Date: Thu, 13 Jun 2024 07:32:26 -0700
Subject: [PATCH 1/3] support removing attributes from animated elements

---
 targets/web/src/applyAnimatedValues.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/targets/web/src/applyAnimatedValues.ts b/targets/web/src/applyAnimatedValues.ts
index 3ff5781c4..d4b945590 100644
--- a/targets/web/src/applyAnimatedValues.ts
+++ b/targets/web/src/applyAnimatedValues.ts
@@ -22,7 +22,7 @@ const attributeCache: Lookup<string> = {}
 type Instance = HTMLDivElement & { style?: Lookup }
 
 export function applyAnimatedValues(instance: Instance, props: Lookup) {
-  if (!instance.nodeType || !instance.setAttribute) {
+  if (!instance.nodeType || !instance.setAttribute || !instance.removeAttribute) {
     return false
   }
 
@@ -45,7 +45,7 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) {
         ))
   )
 
-  if (children !== void 0) {
+  if (props.hasOwnProperty('children')) {
     instance.textContent = children
   }
 
@@ -63,7 +63,12 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) {
 
   // Apply DOM attributes
   names.forEach((name, i) => {
-    instance.setAttribute(name, values[i])
+    const value = values[i]
+    if (value !== void 0) {
+      instance.setAttribute(name, value)
+    } else {
+      instance.removeAttribute(name)
+    }
   })
 
   if (scrollTop !== void 0) {
@@ -72,7 +77,7 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) {
   if (scrollLeft !== void 0) {
     instance.scrollLeft = scrollLeft
   }
-  if (viewBox !== void 0) {
+  if (props.hasOwnProperty('viewBox')) {
     instance.setAttribute('viewBox', viewBox)
   }
 }

From f8aeede06a4f467b013dfdbca344ff579d7c252e Mon Sep 17 00:00:00 2001
From: LoganDark <github@logandark.mozmail.com>
Date: Thu, 13 Jun 2024 07:33:30 -0700
Subject: [PATCH 2/3] add changeset

---
 .changeset/animate-attribute-removal.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/animate-attribute-removal.md

diff --git a/.changeset/animate-attribute-removal.md b/.changeset/animate-attribute-removal.md
new file mode 100644
index 000000000..41218e043
--- /dev/null
+++ b/.changeset/animate-attribute-removal.md
@@ -0,0 +1,5 @@
+---
+'@react-spring/web': patch
+---
+
+fix: support removing attributes from animated elements
\ No newline at end of file

From 66bf995efd91371678172d888f1c2a0704961bf2 Mon Sep 17 00:00:00 2001
From: LoganDark <github@logandark.mozmail.com>
Date: Thu, 13 Jun 2024 07:37:38 -0700
Subject: [PATCH 3/3] allow viewBox removal

---
 targets/web/src/applyAnimatedValues.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/targets/web/src/applyAnimatedValues.ts b/targets/web/src/applyAnimatedValues.ts
index d4b945590..c1fd3a0c7 100644
--- a/targets/web/src/applyAnimatedValues.ts
+++ b/targets/web/src/applyAnimatedValues.ts
@@ -78,7 +78,11 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) {
     instance.scrollLeft = scrollLeft
   }
   if (props.hasOwnProperty('viewBox')) {
-    instance.setAttribute('viewBox', viewBox)
+    if (viewBox !== void 0) {
+      instance.setAttribute('viewBox', viewBox)
+    } else {
+      instance.removeAttribute('viewBox')
+    }
   }
 }