useSpring, transforms, CSS positioning, changing midflight, and preserving momentum

[RickyRomero]

I'm trying to do something kind of complicated with react-spring on the web. In React, I have a component where the start and end positions are determined in CSS. So I run el.getClientBoundingRect() inside useLayoutEffect to get the target position before paint.

The idea is that I get the "from" bounding rect before the animation starts, get the "to" bounding rect in useLayoutEffect, and then run the api.start() hook once I have both rects. I work backwards to get the from transform, with the to state being equivalent to an identity transform. (Scale 1.0, translate 0, etc.)

This works! But I want to go even further and have the spring respond dynamically when the target changes. So I wrote some more routines to figure out when the spring is interrupted, get the current transformation out of the Controller, work backwards from there, and have the spring start from where it was interrupted. Again, the to state is always the identity transform.

This also works! So now I have a component which is positioned via CSS and can transition between states with a spring animation. But now the problem is, when the animation gets interrupted and I recalculate the from position, I necessarily lose the momentum in the spring solver.

Is there a way to make an animation in react-spring which has all these attributes and preserves momentum? Also, am I reinventing the wheel here? I don't think I missed anything in the docs but I could be wrong.

[joshuaellis]

Do you have an example you could share? I'm struggling to imagine what you're trying to do here.

[RickyRomero]

@joshuaellis I made a CodeSandbox to demonstrate the problem. https://codesandbox.io/s/jgl92 Clicking the canvas animates the pink box to the next position. When interrupting the animation, momentum is cleared – ideally when the target changes, the motion should smoothly curve toward the new target.

A couple of caveats which you can ignore:

1. The first animation appears to have a spring, but doesn't animate. Haven't figured that bug out yet...
2. When interrupting the animation, the box sometimes jumps to another position. I tried to resolve this starting at line 46 but it's not perfect. That routine works best when interrupting the animation starting at the top left corner.

I'm thinking about starting over with a new technique. The main problem is that currently, in order to change direction, the spring needs to know its previous target so it knows what size it was animating from in order to animate to a scale of 1 and a translation of 0. I'm thinking about a new approach where the spring always deals in absolute x/y/w/h, not relative transforms as shown here. That way it never needs to care where it's animating from. Instead it would just need the absolute coordinates of where it is and where it's going, and can spit out transforms calculated from that. Though I haven't figured out the best approach for translating the raw coordinates to something that animated.div can consume (without re-rendering 60 times per second).

[RickyRomero]

So, I just found out about view interpolation and it simplified things a lot for me. Now I can take raw, absolute x/y/w/h and animate between them.

Example here. https://codesandbox.io/s/rkkes I don't have the first run bug quite fixed yet, but I'm almost there.