Trouble using {config: (key) => ...} with useTrail

[cwgw]

When I set config as a function in useTrail, it doesn't get called with the arguments I'd expect.

I'd love to be able to do something like below with useTrail, but currently the key parameter I get is not a reference to the animated value; rather, it's a reference to each spring's index in the set.

const trail = useTrail(items.length, {
  to: {
    opacity: 0,
    translateY: 50,
  },
  config: (key) => ({
    clamp: key === 'opacity'
    ...

Rather than getting opacity and translateY, I'm getting 0, 1, 2, etc. I imagine this might be by design, but it'd be great to get both the key and index.

I love this library by the way. Thank you for all of the great work!

[Mathspy]

Disclaimer: I am also new to this so everything ahead might be completely incorrect
This is by design, I think, as having multiple configurations is basically having multiple different "springs". The idiomatic way of doing this would be using several useTrails, each with a different property (one for opacity, one for translateY). If there are a lot of duplicate settings you can extract those to an object that you spread

The key => config functionality is used when you want each individual item of your trail to have a different configuration

[aleclarson]

The config function is called items.length times. It lets you customize each spring individually, as @Mathspy said. It would be easier to help you if you provided a CodeSandbox. Closing for now.

[aleclarson]

@sjnonweb If you're talking about the v9 beta, please open a new issue. Thanks!

[sjnonweb]

@aleclarson Yes i commented here by mistake, i have posted my comment here now: #642 (comment)

…

On Mon, Apr 29, 2019 at 8:08 PM Alec Larson ***@***.***> wrote: @sjnonweb <https://github.com/sjnonweb> If you're talking about the v9 beta, please open a new issue. Thanks! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#590 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACSVJUGMLLD7RE336FUDBXLPS4B4TANCNFSM4G5HLMVQ> .