Unable to fire onRest callback with imperative API

[lezan]

I am do knot what I am doing wrong, but if someone can point it out I would be grateful.

Background:
Actually I am using both animejs and react-spring, because I recently add up code from an example which uses the first library, but I wanna switch to the second one because it is the one I use in my webapp.

First define spring:

const [spring, api] = useSpring(() => ({
	opacity: 1,
	transform: 'scale(1)',
}));

Then assign spring to container:

<animated.div style={spring}>
...
</animated.div>

Finally use start from imperative api:

api.start({
	opacity: 0,
	transform: 'scale(0.9)',
	onRest: () => { console.log('onRest'); },
});

I am calling api.start from a callback of a component. The callback is actually called because if I put a log here, it is print, but not onRest.

Do you see any particular issue with it? If not I am going to create a codesanbox.

Thanks in advance for your help!

[joshuaellis]

Do you have a code example for this issue I could look at?

[lezan]

A codesandbox?

[joshuaellis]

that would be great!

[lezan]

I tried to replicate here https://codesandbox.io/s/cardflipreact-spring-xzo7e some months ago, and it is somehow working (onRest is called), but doing the same thing in my webapp does not work.

Could be related to gatsbyjs?

If you want more context, I also tried to find some help on stackoverflow some months ago. Maybe you can find further info.

https://stackoverflow.com/questions/67460226/events-callback-onrest-does-not-fire-up-with-usespring-of-react-spring

[lezan]

@joshuaellis did you get a chance to look at it?

[joshuaellis]

I didn't but I don't use Gatsby so i'm not sure, you might have a better chance asking in their repo. Sorry I couldn't help further.

[miguelespinoza]

Hi there, I bumped into this issue as I was researching the same situation. I was able to replicate on codesandbox, but! after a second look, I realized what my problem was. I was using the imperative API, but was fixated on the useSpring hook to set the onRest prop, should actually be on the springRef.start function
https://codesandbox.io/s/elastic-feistel-o8ozi?file=/src/App.js

I hope this helps someone that's bumping into the same situation

[lezan]

Hello @miguelespinoza, thanks to bring to me your solution.
Unfortunately I get the same behavior with your implementation, onRest is not called at all, but not only onRest also, for instance, onStart. If I move api.start from where the callback is into useEffect, onRest - like onStart - is called without problem.
Also, it is not an issue related to onRest and GatsbyJS because I am able to use the event callback in the same project but in a different place.