React Transition group and keyframes

Recently, I had a hard time to do what seems to be a very simple thing: Animate a little notification pill that bounce and show a new number every time an unread message is coming for the user on my React app.

The code

I will explain the whole story, but you are probably here for the code, so here we are :

The Story

The team was already using React Transition Group to animate component on mount and unmount lifecycle. But it was a bit different this time, I wanted the animation to run every time the number of messages in my React context was updated. RTG got the answer : Switch Transition.

Switch Transition

Switch transition of RTG allows you to unmount a component while mounting another. So the trick was to animate the component with previous value with “bounce out” CSSTransition while we animate the component with the new value with the “bounce out”.
We have to add a “key” prop with the value in order to rerender the CSSTransition every time the digit change.

At this moment I have a nice SwitchTransition with the fade effect (I kept it in codesandbox to show you how it is simple with simple css fade transition).

But I wanted to have the bounce effect, and for that I wanted to use keyframes instead of basic css transition. Unfortunately, I didn’t get any example on internet so I decided to show how we can do it.

Animate.style

animate.style is a wonderful website where you can find a lot of cool css based animation. But we complex animation comes css keyframes, and first I didn’t get to make SwitchTransition work with keyframes. Where transition make correctly trigger the end event of RTG lib, I couldn’t with keyframes even with the addEndListener prop.

props: timeout

It seems so weird at first, in javascript word, timeout are often synonym of “I have no idea how to do it, so I will randomly wait a certain amount of time to be sure it’s executed”. But I still think it’s the only way to make SwitchTransition works with keyframes animation. SwitchTransition have timeout props that needs to be set at the exact animation duration and it becomes really easy to use.

props: appear

appear is not mandatory at all, but if you don’t put it in your CssTransition, the animation will not take place on first mount. I think it should be true by default.

classNames

We use sass modules and I struggle at the beginning to make it work because I was stuck copying the css transition I saw everywhere. But Sebastien, a colleague that save me on this, understood that with animation that triggers automatically (not the case with transition), we simply need to implement the className enter and exit. activeis no longer needed with keyframes.

Conclusion

I hope the code can help people to understand how to do it and I didn’t put to much mistakes in this post. I think it can save some times to developer because examples are the best way to understand. So if you want to animate on value change in react, a nice way is :

• SwitchTransition
• CssTransition with timeout props, appear props, and the key props with the value to rerender.
• Keyframes animation on enter and exit className