react-spring

react-spring copied to clipboard

🚀 Feature Proposal

useTrail uses useSprings under the hood and the - I believe - undocumented attach attribute to attach controllers from the first spring to the last. I think it would be useful to allow users specify which index should useTrail use as its origin.

Motivation

I made a small carousel lib with staggered animation: https://github.com/dbismut/react-soft-slider

In my situation, I needed slides to trail the dragged slide, which index can obviously vary. To make that happen, I reused the source code from useTrail and adapted to my needs. I'm not exactly sure what would be the best API for this though, possibly set({..., attachedIndex: index }). I'm also wondering if useTrail could also share the same set(i => ({...})) as useSprings.

Example

Heavily inspired from the example on react-use-gesture: https://codesandbox.io/s/nwj6597vq4

Another use case would be such as the one described in #196

Allowing to flip between the first index and last index would allow useTrail to be reversed, pull in from 1→n, and then pull out n→1

We no longer use attach and we do allow a reverse prop. To pass a custom index is something we currently do not support, but it is something we could look at adding in the future.