[bug]: transitioning background with gradient causes error

[alexkahndev]

Which react-spring target are you using?

• [X] @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.

Link to repo

https://codesandbox.io/p/sandbox/hpj9rs

[Amyx000]

@alexkahndev Thats native browser thing, transition doesn't work for gradients even if you use vanilla css.

[alexkahndev]

@alexkahndev Thats native browser thing, transition doesn't work for gradients even if you use vanilla css.

https://codesandbox.io/p/sandbox/wqc96c

[nini22P]

In version 9.7.5 , I could make the gradient background work this way, but it doesn't work in the latest 10.0.1.

  const [{ background }, api] = useSpring(
    () => ({
      background: `linear-gradient(45deg, ${customTheme.palette.primary.main}33, ${customTheme.palette.primary.main}15, ${customTheme.palette.primary.main}05, transparent)`,
    })
  )

  useMemo(
    () => api.start({
      background: `linear-gradient(45deg, ${customTheme.palette.primary.main}33, ${customTheme.palette.primary.main}15, ${customTheme.palette.primary.main}05, transparent)`
    }),
    [api, customTheme.palette.primary.main]
  )

<animated.div
  style={{
    width: '100vw',
    height: '100dvh',
    background: background,
  }}
/>