React-spring: Animating linear-gradient background-color

[noushad-pp]

🐛 Bug Report

It is not possible to animate background-color with linear gradient value with either renderprops nor the hooks

To Reproduce

Does not work

<Spring
  from={{ backgroundColor: 'linear-gradient(135deg, rgb(185, 198, 109) 0%, rgb(34, 48, 17) 100%)' }}
  to={{ backgroundColor: 'linear-gradient(135deg, rgb(192, 199, 165) 0%, rgb(31, 44, 31) 100%)' }}>
  {props => <div style={props}>hello</div>}
</Spring>

Works

<Spring
  from={{ background: 'linear-gradient(135deg, rgb(185, 198, 109) 0%, rgb(34, 48, 17) 100%)' }}
  to={{ background: 'linear-gradient(135deg, rgb(192, 199, 165) 0%, rgb(31, 44, 31) 100%)' }}>
  {props => <div style={props}>hello</div>}
</Spring>

Expected behavior

(A clear and concise description of what you expected to happen.)

Link to repro (highly encouraged)

(Please provide either a CodeSandbox demo or an example GitHub repo.)

Environment

• react-spring v8.0.27
• react v16.10.1

[aleclarson]

Please try with v9: npm install react-spring@next

If that doesn't work, create a sandbox for us to test with. Thanks 👍

[noushad-pp]

It still didn't work with react-spring@next

heres is a codesandbox link

I also tried animating background property from linear gradient value to a normal rgba() and it also didnt work

[aanich-assf]

@noushad-pp, could you elaborate more on what you expect to happen? I don't have any issues animating linear-gradient values for a background color.

[aleclarson]

@noushad-pp Your sandbox works for me.

I also tried animating background property from linear gradient value to a normal rgba() and it also didnt work

That's not expected to work

[noushad-pp]

@aleclarson If you look at the codesandbox, the second div is completely white and thus its not animating

[aleclarson]

Oh, that's also expected. As this article says:

Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the <color> data type.