How To Animate a Winners’ Podium

Create a simple animated winners’ podium from scratch using React and Framer Motion

Gamification! … was a buzzword a few years ago. Despite that, it’s still common to find gamified elements in Apps and SaaS products today — game elements like points, rankings against others, etc. In this article we’re going to look at how we can create a winners’ podium that animates winners one by one for added dramatic effect. We’ll be using React and an open source library called Motion. At the end of this article you’ll see how simple it is to build something with fancy animations. I’ll assume that you have no more than basic React experience.

We’ll do the podium together, then you can try the cards in the bottom half!

Framer Motion is an animation and gesture library for React from the company that makes Framer, the popular prototyping tool. It lets us create animations in a declarative way in React using simple components like <motion.div />.

I’m not a designer, and the point of this article isn’t to blow you away with my sexy design skills (which I don’t have.) Instead, we want to look at how simple it is to make an interesting animation that helps communicate useful information to users in an engaging, fun way.

If you’d like to just jump straight to a fully working demo, you’ll find a Fancy version and a Simple version on CodeSandbox.