diff --git a/.changeset/animated-className.md b/.changeset/animated-className.md
new file mode 100644
index 0000000000..776871180c
--- /dev/null
+++ b/.changeset/animated-className.md
@@ -0,0 +1,5 @@
+---
+'@react-spring/web': patch
+---
+
+fix: recognize `className` prop to `AnimatedComponent`s
diff --git a/targets/web/src/animated.test.tsx b/targets/web/src/animated.test.tsx
index 7503f0fb42..6c7cf2c5dc 100644
--- a/targets/web/src/animated.test.tsx
+++ b/targets/web/src/animated.test.tsx
@@ -106,6 +106,16 @@ describe('animated component', () => {
mockRaf.step()
expect(wrapper.scrollTop).toBe(20)
})
+ it('accepts the className property', () => {
+ const className = spring('test')
+ const { getByTestId } = render(
+
+ )
+ expect(getByTestId('wrapper').className).toBe('test')
+ className.set('new')
+ mockRaf.step()
+ expect(getByTestId('wrapper').className).toBe('new')
+ })
it('accepts x/y/z as style keys equivalent to `translate3d`transform function', () => {
const { queryByTestId, rerender } = render(
diff --git a/targets/web/src/applyAnimatedValues.ts b/targets/web/src/applyAnimatedValues.ts
index 3ff5781c49..e05b84bf63 100644
--- a/targets/web/src/applyAnimatedValues.ts
+++ b/targets/web/src/applyAnimatedValues.ts
@@ -30,8 +30,15 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) {
instance.nodeName === 'filter' ||
(instance.parentNode && instance.parentNode.nodeName === 'filter')
- const { style, children, scrollTop, scrollLeft, viewBox, ...attributes } =
- props!
+ const {
+ className,
+ style,
+ children,
+ scrollTop,
+ scrollLeft,
+ viewBox,
+ ...attributes
+ } = props!
const values = Object.values(attributes)
const names = Object.keys(attributes).map(name =>
@@ -66,6 +73,9 @@ export function applyAnimatedValues(instance: Instance, props: Lookup) {
instance.setAttribute(name, values[i])
})
+ if (className !== void 0) {
+ instance.className = className
+ }
if (scrollTop !== void 0) {
instance.scrollTop = scrollTop
}