How I (re)built the Medium clap effect — and what I got out of the experiment

As a web developer, I‘m constantly seeking out new challenges to push the boundaries of what I know and expand my skillset. One such challenge I took on was recreating the clap animation effect popularized by blogging platform Medium. You know the one – you click the clap icon to show appreciation for an article, and it responds with a delightful burst of animation. It‘s a small detail, but an incredibly satisfying microinteraction.

I wanted to deconstruct how this effect worked under the hood and try rebuilding it myself from scratch. My goal wasn‘t to make a pixel-perfect replica, but to create something that captured the core essence and feeling of Medium‘s clap.

Clapping together the tech stack

Before diving in, I evaluated what technologies would be best suited for the job. I settled on:

• HTML and SVG for the clap icon and page structure
• JavaScript for the interactivity
• ReactJS to build a component-based UI
• The mo.js animation library for the burst effects

SVG made sense for the clap icon, as its vector format allows it to scale without losing quality. I sourced my starter icon from the Noun Project, then customized it in Adobe Illustrator. Some SVGOMG optimization and it was ready to be dropped into my HTML.

Mo.js ended up being the star of the show for the animations. After researching different JavaScript animation libraries, mo.js stood out for its declarative API, beginner-friendliness, and easy path to recreating the types of effects seen in Medium‘s clap. It‘s maintained by Oleg Solomka (LegoMushroom) who has done an incredible job with the project.

Learning by stealing

Now I had my tools, but needed a starting point. How could I begin wrapping my head around mo.js and translating my ideas to code? I‘m a believer in the Pablo Picasso quote "Good artists copy; great artists steal." To be clear, this doesn‘t mean plagiarizing or ripping off other‘s work. I interpret it as studying from masters, borrowing elements of their style, and remixing them into something new.

With that in mind, I dug through tutorials and examples of mo.js in action, hoping to find something I could learn from and expand upon. I struck gold with Mary Lou‘s Codrops Animocons – a set of animated icons created with mo.js and inspired by a shot from Dribble user Daryl Ginn.

The Animocons weren‘t a one-to-one match for the Medium clap, but they demonstrated core concepts I needed to grasp. So I rolled up my sleeves and recreated the Codrops samples from the ground up, typing out each line of code by hand. Copying code mindlessly won‘t teach you much, but mindfully retyping it, playing with parameters, and seeing how things change is an effective way to absorb new concepts.

Ultra learning

With my Animocons warmup complete, it was time to face the Medium clap head-on. While I had a basic handle on mo.js now, I wasn‘t anywhere near an expert. Tackling an ambitious project like this meant I‘d need to rapidly skill up. Fortunately, I‘ve cultivated an approach for intense, focused learning.

My learning philosophy takes inspiration from Scott Young, who compressed MIT‘s notoriously difficult 4-year computer science curriculum into a single year of self-study. He‘s a proponent of "ultra learning" – strategically breaking down complex topics and drilling deep on the most vital parts.

To ultra learn mo.js, I started with a broad overview – skimming the documentation, watching tutorials on 2x speed, and reading a chapter from Sarah Drasner‘s SVG Animations book. The goal was to quickly map the terrain and identify the key areas to focus on.

Armed with this bird‘s-eye view, I then zeroed in on the specifics needed to build my clap effect. I worked through the mo.js tutorials more methodically, experimented with the library, and searched for code samples achieving similar effects to what I had envisioned. Each time I got stuck, I pushed myself to exhaust all resources before turning to help. By stretching to the edge of my abilities, I accelerated the learning process.

Clapping it all together

Soon, the concepts started clicking into place. It was time to apply my newfound mo.js knowledge to my clap effect. The basic structure looked like:

• Create a central clap icon that would serve as the trigger for the animation
• Build the individual elements to be animated – the smaller icons, the particles, the burst lines
• Define the animation timeline, choreographing how each element should move, scale, and fade over time
• Hook into the click event and fire the animation timeline when triggered

Of course, things rarely go perfectly to plan. I made many mistakes, hit walls, and spent days tweaking minutiae. But piece by piece, I saw my effect coming together. Through a combination of the Codrops samples, the mo.js documentation, and a healthy dose of Stack Overflow, I finally landed on something that I was happy with.

Here‘s a simplified snippet of the core animation configuration using mo.js:

const clap = new mojs.Burst({
  radius: { 0: 100 },
  count: 10,
  children: {
    shape: ‘circle‘,
    fill: { ‘cyan‘ : ‘yellow‘ },
    radius: { 6: 0 },
    duration: 1500,
    easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
  }
});

clap.play();

The aftermath

With my Medium clap doppelganger complete, I took a step back to reflect on what I had accomplished and what I had learned through the process.

Technically, I had leveled up my skills with SVG, React, and JavaScript animation. I gained an intimate understanding of the mo.js library and general animation concepts that I could apply to future projects.

More importantly though, this experiment reinforced my belief in the power of relentless self-improvement. By continually pushing myself beyond my comfort zone and engaging in deep, focused learning, I could tackle challenges that seemed daunting at the outset.

I also gained a newfound appreciation for the art of microinteractions and UI animation. The Medium clap exemplifies how a small, delightful interaction can make a big impact on the overall user experience. These microlevel details are often what separate good products from great ones.

Recreating the clap was immensely satisfying on a personal level, but I wanted to share the results with the world as well. I posted my creation on CodePen, where it racked up over 2,000 views. I gave a talk at the ReactJS Summit on SVG and microinteractions, using my clap effect as a key example.

Lessons learned

Deconstructing and reconstructing the Medium clap was an ambitious undertaking for me, but one that proved worthy of the effort. Here are the key takeaways from my experiment:

1. Continuously challenge yourself. Tackle projects that seem just beyond your current skill level. The struggle is what makes you grow.

2. Become an ultra learner. When faced with an intimidating topic, break it down, identify the essentials, and drill deep. Immersion is key to rapid skill acquisition.

3. Steal like an artist. Study the work of people you admire, internalize their techniques, and remix them into something uniquely yours. Innovation is often recombination.

4. Details make the difference. Microinteractions like the Medium clap can seem like nice-to-haves, but they‘re what create an intuitive and emotionally engaging user experience. Sweat the small stuff.

5. Share your work. Posting your creations publicly pushes you to make something you‘re proud of. You never know what opportunities may come from putting your work out there.

This experiment was just one of many self-imposed challenges on my journey as a developer. I have no intentions of slowing down. The more I learn, the more I realize how much there is to learn. And that excites me.

Here‘s to never settling, continuously improving, and clapping for ourselves along the way. 👏