A little while ago I was given a cool design for an Instagram story styled bubble component where each bubble would smoothly slide into its new position when we got its new order from the API.

While it can be straightforward to do a whole load of animations and transitions with CSS, it took me a while to find an example of animating the reordering of list items, especially with React. Since I’ve also started to get used to the concepts of React Hooks I wanted to use them to implement this animation too.

I found this difficult to do using React hooks because my component would automatically rerender, in its new order, when it got new data. I was trying to hook into the moment before rerendering to smoothly transition from one state to another. Without the componentWillReceiveProps function call from the class components, this was hard to do.

I was under the (incorrect) assumption that there would be loads of React hooks examples out in the wild. I honestly just wanted a copypasta solution that I wouldn’t have to tweak too much 👀. I also didn’t want to bring in some huge, usually overly flexible package to reorder one small thing. I did come across a great post by Joshua Comeau (linked below). It explains how to do exactly what I needed, but with class components. With React hooks I needed to re-think some of the concepts to get it to work, but I’ve based the majority of this work on that post.

What we want to happen:

1. Keep an eye out for when our element list is going to change
2. When it changes we want to calculate the previous positions and the new positions of each element in the list before the DOM updates
3. Also before the DOM updates with the new order of the list we want to “pause” the update and show a smooth transition of each item in the list from its old position to its new position

Let’s start with a parent component that just renders the children that is passed into it, AnimateBubbles:

import React from "react";

	const AnimateBubbles = ({ children }) => {
	  return children;
	};

	export default AnimateBubbles;
view raw
AnimateReordering_AnimateBubbles-initial.jsx hosted with ❤ by GitHub

Then we can use that component by rendering our items inside of it. In my case I’ve created a Bubble component that adds the styles to make each image a circle, the full code is here. The Bubble component also forwards the ref onto the DOM element. This is important as we can use the ref to find where the element is rendered in the DOM, then we can calculate its position. Another important prop is the key, this is not only needed for React when mapping over elements, but we can also use later to uniquely identify each item and match its old and new positions in the DOM.

#react-hook #animation #uselayouteffect #react