React-spring: useSpring doesn't animate CSS grayscale filter

[wilsonrocks]

This is my first real github issue - apologies if I've missed something really obvious!

🐛 Bug Report

useSpring does not animate CSS grayscale filter in Chrome

To Reproduce

create a useSpring hook that animates between filter: 'grayscale(0)' and `filter: 'grayscale(1)' and it doesn't do anything.

Expected behavior

It would animate between it, as other filters would e.g. blur(0px) and blur(4px) which does work.

Link to repro (highly encouraged)

https://codesandbox.io/s/charming-thunder-yl4hv?fontsize=14

Environment

• react-spring v8.0.25
• react v16.86

[drcmda]

probably because it contains the word "grey", i guess it thinks it's a color.

the workaround for now would be to use interpolation:

style={{ filter: saturation.interpolate(s => `grayscale(${s})`) }}

[wilsonrocks]

Great, will try this tonight🙂 if this is an issue that might be easy to fix, I'd be happy to dip my toe in the pull request waters?

[drcmda]

sure, but make sure to target the v9 branch @aleclarson

[aleclarson]

@wilsonrocks You can find the contributor guide here. 👍

[wilsonrocks]

thanks @drcmda and @aleclarson

sorry if this is me being dense, or if this is the wrong place to put this - but I get this error from yarn making the install fail

[@react-spring/addons] src/index.ts → dist/index.js...
[@react-spring/addons] [!] (plugin rpt2) Error: /home/james/coding/react-spring/packages/addons/src/parallax.tsx(10,10): semantic error TS2305: Module '"../node_modules/@react-spring/animated/src"' has no exported member 'createAnimatedComponent'.
[@react-spring/addons] src/parallax.tsx
[@react-spring/addons] Error: /home/james/coding/react-spring/packages/addons/src/parallax.tsx(10,10): semantic error TS2305: Module '"../node_modules/@react-spring/animated/src"' has no exported member 'createAnimatedComponent'.
[@react-spring/addons]     at error (/home/james/coding/react-spring/node_modules/rollup/dist/rollup.js:9396:30)
[@react-spring/addons]     at Object.error (/home/james/coding/react-spring/node_modules/rollup/dist/rollup.js:15619:24)
[@react-spring/addons]     at Object.error (/home/james/coding/react-spring/node_modules/rollup/dist/rollup.js:16063:38)
[@react-spring/addons]     at RollupContext.error (/home/james/coding/react-spring/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:17187:30)
[@react-spring/addons]     at lodash_3 (/home/james/coding/react-spring/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24953:23)
[@react-spring/addons]     at arrayEach (/home/james/coding/react-spring/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:532:11)
[@react-spring/addons]     at forEach (/home/james/coding/react-spring/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:9360:14)
[@react-spring/addons]     at printDiagnostics (/home/james/coding/react-spring/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24926:5)
[@react-spring/addons]     at cache.getCompiled (/home/james/coding/react-spring/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:26736:21)
[@react-spring/addons]     at TsCache.getCompiled (/home/james/coding/react-spring/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24829:33)
[@react-spring/addons] 
[@react-spring/addons] error Command failed with exit code 1.
[@react-spring/addons] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
💥  Build failed. Check the logs above.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

when running yarn on the v9 branch

[aleclarson]

@wilsonrocks Whoops, I don't know how that one slipped by me. 😅 Fixed now!

[wilsonrocks]

Hi, so sorry about this, and thank you for all your help!

The yarn steps now work fine, but now when using it in my existing project with react-spring I get

Failed to compile.                                                                   

/home/james/coding/react-spring/packages/core/src/index.ts                           
Attempted import error: 'interpolate' is not exported from '@react-spring/animated'.                                                                                    

when running yarn start or yarn build.

The path in the error message suggests that the symlinking is working properly.

I still get the error on if I also run 'yarn link @react-spring/animated', although the yarn link command succeeds, but I'm not sure this helps much as I guess that should be imported anyway from just linking react-spring

Grepping for interpolate in the src folder of animated produces (among other hits)

interpolate.ts:1:export { createAnimatedInterpolation as interpolate } from 'shared/globals'

if that's any help?

Is the API different for v9?

[aleclarson]

It looks like your dev environment can't compile the TypeScript packages for you.

Did you try this command?

yarn build && yarn lerna exec 'cd dist && yarn link || exit 0'

[wilsonrocks]

ah yes - have tried that now!
my project now builds, but trying to use useTransition gives an invalid hook call error. This seems to be a common issue though, will keep googling! @aleclarson thanks for the help

[aleclarson]

We recently updated the contributor guide with a section about that particular error.

See here: https://github.com/react-spring/react-spring/blob/v9/CONTRIBUTING.md#duplicate-react-errors

[wilsonrocks]

Great, thank you, @aleclarson :smile: I've got it working now - will try and fix my actual issue after work tonight, thank you for all your help

[wilsonrocks]

hi - just to say, this is still on my list, just been really busy at work! hope to get to it soon:)