Building Sentitrac: Rotating Carousel Component

You are reading "Software, My Dream Job," a software engineering newsletter covering one person's perspective from working in the software industry. If you'd like to receive notifications for new editions, click or tap "Subscribe" above.

Building this rotating carousel component, as you see above, concerned me when ThreeSixtyEight revealed their design work to me a few weeks ago. It looks fantastic and is a clever way to present a lot of information in a reasonably compact format, but I knew I had no idea how to build it.

It looks like a circle of strings rotating around a central point, stopping when each string is horizontally aligned. At the same time, a number to the right is being updated to match the string. So, if the strings represent projection sources, the number represents the projection from that particular source.

While that look and feel makes sense, how do you build this? I'm no web developer and was daunted at the prospect of building this out. Instead of staying there mentally, I just started breaking down the problem.

First things first, I had to lay out the circle of strings. I can't even consider animating them into the desired rotation effect until after that is done! After all that is figured out, I would get to the animated number, and of course the orange dot and highlighting.

How do we lay out a circle of strings? Let's ask ChatGPT! I used GPT-4 with Dall-E a lot for this component, providing screenshots of the design elements I was looking to build and asking for React JSX component code in return. While it wasn't perfect, it helped a ton in figuring out some of the math needed. I could also provide screenshots of what wasn't working and get feedback.

Math needed?! Yes, I had to break out the trigonometry toolkit to get this component to work. But even with trig, the rotation wasn't working. I could lay out the elements, but as soon as I started any animations, the elements went flying in all directions.

That's when TSE provided the key insights: think of the strings as a vertical list with a transform and reset everything back to center (while rotating your underlying list) after each rotation.

For the element just above the center, there is a slight Y transformation up, a slight X transformation to the right, and a small rotation. For the element just below the center, reverse it all. On top of that, after each unitary visual rotation, rotate the underlying list (as in, move the last element to the first position) and then reset everything. Each rotation animation is going from 0, simplifying the math.

Instead of trying to align strings along the diameter of a circle, I just had to compute the transformation needed for each position and animate to those positions! Trig was still involved, but it became much more straightforward from here.

Not only does thinking of this as a vertical list with each element transformed provide an easier path to implementation, but it also makes this component much more flexible. Without the limitation of a real circle -- initially, I was divvying up the 360 degrees of a circle evenly with each element -- there are no size limitations to this component's internal data list! It doesn't matter how many elements we have; they will continue to look like they're moving in a circle; it's a fake circle anyway!

The last tricky part was the number animation. The key here was to use GSAP, a Javascript animation suite of tools that made this animation much easier than I expected. You give it an element with a number, tell it to which number you want to go and at what increment you want to get there, and that's it! It automatically animates between the two for you, using the step increment you provided. Want it to fly through? Let it increment by 1 or more. In our case, I wanted 2 digits after the decimal to also animate, so I used an increment of 0.01.?

After that, it was all just styling:

• Adding the background color.
• Making sure the font was right.
• Adding the highlighting of the central, horizontal string.

What looked like a very daunting component was built out in a week or two in my spare time, and I'm so excited that it will now feature in the new design on Sentitrac! You can check it out with live NFL fantasy projections at sentitrac.com; if you haven't subscribed yet, you'll get a free week to try it out. If you notice anything wrong with the rotation component, there's free Sentitrac time available for reporting an issue! Below is a side-by-side of the design, along with what I built. Which is which? Let me know which one you think I built in the comments!