onStart called after first animation tick

[Jacobjepsen27]

Hey there.

It took me some time to figure out that onStart: () => void is getting called after the first animation tick for useTransition() and it has caused me some problems. I need to be able to set a global 'isAnimating' state before the animation starts and not after.

What is the preferred way of setting global state before the animation starts and for subsequent transition starts?

It also got me thinking that it could be nice with a beforeStart: () => void event :)

Cheers.

[joshuaellis]

Hi @Jacobjepsen27

Sorry to hear it took you a while to figure this out, it is documented (albeit rather small) in the current docs here – https://react-spring.dev/common/props#events-as-functions, I've made this more prevalent in the new docs here – https://beta.react-spring.dev/docs/advanced/events#onstart

It really depends on how you're starting your animation. Realistically I don't think it's something we're going to add I would look at using an effect if your animation is trigger by an update of the item argument otherwise if you're using the imperative api then you can flag this at the same time you call the api.

[Jacobjepsen27]

Of course, i will make one asap. Thank you!

[Jacobjepsen27]

https://codesandbox.io/s/quizzical-bird-zifuet?file=/src/components/ChatbotTransition.tsx

[joshuaellis]

This is expected behaviour, your component needs to mount and will have the from styles applied firstly, so that's where the initial false comes in. You can see the behaviour here – https://codesandbox.io/s/quiet-breeze-iilspu?file=/src/components/ChatbotTransition.tsx

[Jacobjepsen27]

I don't understand why it relates to the global isAnimating state which should be set to true before the component (Step1) even mounts. Or am i missing something? :)

Also, I found a workaround to make the transition work from Step0 to Step1. Is this the preferred way to achieve this?

https://codesandbox.io/s/spring-resonance-j7f4r2?file=/src/components/ChatbotTransition.tsx:519-554

[Jacobjepsen27]

Okay I get it now. I were somehow convinced that the from styles were applied after springRef.start() but they are actually applied (and component mounted) as soon as props.index change. So it's clear why isAnimating is false.