Description
Which react-spring target are you using?
-
@react-spring/web -
@react-spring/three -
@react-spring/native -
@react-spring/konva -
@react-spring/zdog
What version of react-spring are you using?
9.7.4
What's Wrong?
When using background css property as a spring value and trying to transition it produces an error when being transitioned with a gradient.
Uncaught (in promise) Error: Cannot animate between _J and HJ, as the "to" prop suggests
at v0._merge (chunk-sdxbpvym.js:1:33453)
at E (chunk-sdxbpvym.js:1:20623)
at U (chunk-sdxbpvym.js:1:20503)
at chunk-sdxbpvym.js:1:20302
at new Promise (<anonymous>)
at TZ (chunk-sdxbpvym.js:1:20074)
at v0._update (chunk-sdxbpvym.js:1:32158)
at chunk-sdxbpvym.js:1:31167
at Array.map (<anonymous>)
at v0.start (chunk-sdxbpvym.js:1:31145)
The arity of each "output" value must be equal
HTMLUnknownElement.callCallback
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4164:14
Object.invokeGuardedCallbackDev
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4213:16
invokeGuardedCallback
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4277:31
invokeGuardedCallbackAndCatchFirstError
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4291:25
executeDispatch
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:9041:3
processDispatchQueueItemsInOrder
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:9073:7
processDispatchQueue
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:9086:5
dispatchEventsForPlugins
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:9097:3
eval
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:9288:12
batchedUpdates$1
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26140:12
batchedUpdates
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3991:12
dispatchEventForPluginEventSystem
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:9287:3
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:6465:5
dispatchEvent
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:6457:5
dispatchDiscreteEvent
https://hpj9rs.csb.app/node_modules/react-dom/cjs/react-dom.development.js:6430:5
To Reproduce
Create a spring similar to the following and use the api to start transitioning to a gradient. The colors do not have to be oklch but there is an additional bug where using oklch makes the animation jump from a plain color right to the gradient without transition.
//numItems: number
const [sidebarSprings, sidebarApi] = useSprings(numItems, () => ({
background: '#eaeaea',
color: '#2c2c2c',
}));
// index: number
sidebarApi.start((i) => {
return {
background: i === index ? 'linear-gradient(to right, oklch(0.6 0.14 305), oklch(0.6 0.14 260))' : '#eaeaea',
color: i === index ? '#ffffff' : '#2c2c2c',
};
});Expected Behaviour
I expect that I can transition from a solid color background into a gradient smoothly. It is possible to make a workaround where you return a new gradient string to transition the gradient however it still does not transition it instantly applies changes. This workaround does not work for some colors like when using oklch(). It should be possible to transition background gradient colors smoothly.