React Spring UseTransition list not removing in order

Question

I have been trying to animate a list of items in React JS using React Spring that changes with new data, but ran into an issue. The problem is, that after changing the state of "optionBubbles" (array of objects), the old items animate too slowly out and stay too long. The result, is that the new items animate below them, then drop down after the old items finish un-mounting.

Here is a video example https://vimeo.com/699831329

---

My useTransition

const animatedTransition = useTransition(optionBubbles, {
    from: { opacity: 0, scale: 0.1, config: { duration: 300}},
    enter: { opacity: 1, scale: 1.0, config: {} },
    leave: { opacity: 0, scale: 0, config: { duration: 200} },
    trail: 80,
    order: ['leave', 'enter', 'update']
})

---

My JSX

<OptionBubbleContainer>
  {animatedTransition((props, item, key) => {
    return (
      <OptionBubble
        key={key}
        option={item}
        animatedStyle={props}
      ></OptionBubble>
    );
  })}
</OptionBubbleContainer>

---

Note also that I am passing in the style props to the 'OptionBubble' which is a styled component with a main div that is a styled(animated.div). This is what the 'ContentView' inside an Option Bubble looks like

<ContentView onMouseEnter={() => style={{ ...props.animatedStyle }} onClick={() => Clicked()}>


     

Answer 1

It seems you need the new elements to wait until the old elements are gone. You can achieve that with the exitBeforeEnter option

const animatedTransition = useTransition(optionBubbles, {
    ...
    exitBeforeEnter: true,
})