Behind the Scenes - Building the Rotating Carousel Component

Written by - Benjamin Hendricks

---

Rotating Carousel Component

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. But instead of staying stuck mentally, I just started breaking down the problem.

---

Step 1: Lay Out the Circle of Strings

I couldn’t even think about animation until I figured out how to lay out the circle of strings. Once that was done, I could move on to the animated number, the orange dot, and the highlighting.

So... how do we lay out a circle of strings?

Let’s ask ChatGPT!

---

Step 2: Using GPT-4 (and DALL·E) as a Coding Assistant

I used GPT-4 with DALL·E extensively for this component. I’d provide screenshots of the design elements I wanted to build, and GPT would return JSX code for a React component.

While it wasn’t perfect, it helped a ton in:

• Getting the right layout
• Figuring out the math
• Debugging layout issues with annotated screenshots

---

---

Step 3: Break Out the Trigonometry

Math needed?! Yes, I had to dust off the trigonometry toolkit. Laying out elements in a circular pattern means dealing with angles, sine, and cosine.

But even with trig, the rotation animation was breaking. Elements would fly off in all directions — it was chaos.

That’s when TSE (ThreeSixtyEight) gave me the golden insight:

Think of the strings as a vertical list with a transform, and reset everything back to center after each rotation.

---

Step 4: Fake the Circle — Use Transforms

Rather than align elements around a real circle, I calculated Y and X transforms and rotations for each item in a vertical list:

• The element just above center gets shifted up and right, plus a small rotation.
• The element just below gets mirrored.
• After each rotation:
  • Visually animate to new positions
  • Move the last list item to the top
  • Reset everything back to baseline

This keeps the math simple: every animation starts from 0.

Once I switched from real circular math to this transformed vertical stack, everything clicked. It also made the carousel data-agnostic — no need to evenly split 360° anymore. The illusion of the circle holds, and you can include as many elements as you like.

---

Step 5: Number Animation with GSAP

The final tricky bit was the number animation beside the highlighted string. Here, GSAP came to the rescue.

GSAP is a JavaScript animation suite that lets you animate numbers easily. You pass in:

• The element
• The target number
• An increment (e.g., 1, 0.1, 0.01)

Want a fast spin? Use 1. Want smooth decimal precision? I used 0.01 so two decimal places could animate as well.

---

Step 6: Final Styling Touches

After all that came the polish:

• 🎨 Background color
• 🔤 Font tweaks
• 🟠 Highlighting the center item

What started as an intimidating component was built out over a couple of weeks in my spare time — and I’m thrilled it’s now live in the new Sentitrac design!

---

Try It Yourself

You can check out the carousel in action with live NFL fantasy projections at sentitrac.com.

If you haven’t subscribed yet, you’ll get a free week to try it out.

⚠️ Spot a bug in the rotation component? Report it and get free Sentitrac time — no joke!

Below is a side-by-side of the design and the final build. Which is which?