diff --git a/.changeset/animate-attribute-removal.md b/.changeset/animate-attribute-removal.md
new file mode 100644
index 0000000000..41218e043f
--- /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
diff --git a/targets/web/src/applyAnimatedValues.ts b/targets/web/src/applyAnimatedValues.ts
index 3ff5781c49..c1fd3a0c77 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,8 +77,12 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) {
   if (scrollLeft !== void 0) {
     instance.scrollLeft = scrollLeft
   }
-  if (viewBox !== void 0) {
-    instance.setAttribute('viewBox', viewBox)
+  if (props.hasOwnProperty('viewBox')) {
+    if (viewBox !== void 0) {
+      instance.setAttribute('viewBox', viewBox)
+    } else {
+      instance.removeAttribute('viewBox')
+    }
   }
 }