useTransition animations happen in sequence

[kennycrosby]

Can my useTransition animations happen in sequence?

I have a button that changes to another button once clicked, the designers want this button to fully fade out before the next one fades in. Seemed easily doable but I can't seem to find anywhere in the docs how to achieve this. I tried useChain but that doesn't seem to be the intended purpose. useTransition seems to be the perfect hook for what I'm doing but I just want it to happen in sequence rather than at the same time. Is there something I am missing?

const transitions = useTransition(isAboutOpen, null, {
    from: { position: 'absolute', opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

{transitions.map(({ item, key, props }) =>
            item ? (
              <Styled.BackButton style={props} key={key} onClick={handleAboutClick}>
                BACK
              </Styled.BackButton>
            ) : (
              <Styled.AboutButton style={props} key={key} onClick={handleAboutClick}>
                About
              </Styled.AboutButton>
            )
          )}

Buttons are indeed using animated.button and the fade is working, just not in sequence... export const BackButton = styled(animated.button)

[tomdohnal]

This is something that react-spring can't di natively at the moment (See #1064)
Nonetheless, you can implement it yourself similarly to this: https://codesandbox.io/s/boring-shadow-v66x2?file=/src/App.js

[alesvojta]

Hi @kennycrosby possible solution for your problem can be found here:
#583 (comment)

example for your case:
https://codesandbox.io/s/dazzling-ptolemy-uy25p