The Original Medium Clap Micro Interaction
My Implementation
If you just want to see the code you can click here.
Medium is my go-to site for discovery and browsing of new technologies and updates. Until about a year ago, medium had a simple “Like” system similar to Facebook and the such, you could simply state if you liked a certain content published by giving it a “heart”, thus giving the author sort of a fame/social based token of appreciation that increases post exposure.
Then, Medium pioneered a first of its kind clapping feature that would push the web interactions and animations level a major leap forward into the era of micro-interactions. Slightly different from the original “Like” feature technically, a clap was not a simple toggle button but rather a more dynamic way of “liking” or supporting a piece of content by clapping multiple times for an article especially appreciated or liked by a certain reader.
This intriguing newly introduced mechanism was accompanied by various animation triggering, transitioning and intertwining within each other in a seamless manner. A world class standard for the emerging world of micro-interactions was introduced, and even up until today Medium’s clapping feature is considered one of the more powerful, complex, elegant and user friendly micro-interaction out there.
The web is enhanced by various user experiences, that form up this little bit extra that makes us enjoy(sub-consensually) various websites even more than others, without even thinking deeper and trying to analyze why and how.
Similar to a very good dish in a restaurant of which you just enjoy a highly balanced taste and exquisite aesthetics of a carefully planned and executed culinary experience without feeling an urgency to decipher which ingredients the dish is composed of.
Moreover, you just enjoy the dish holistically as a whole and have an experience to be remembered and recommended.
When I saw the new clap interaction, I immediately recognized the technical complexity of creating such an animation. Seemingly a simple and subtle clapping button, it is clear that much thought went into its design and implementation and required non trivial techniques to achieve the final outcome. I was intrigued to venture through implementing it myself and find out what it takes to implement this interaction from scratch as well as enjoying the journey of discovering and learning in doing so. I indeed had learned a whole lot from this experiment, I am pleased to present to you my own DIY Clap Interaction Guide.
How do we approach this challenge of breaking down a micro-interaction? First let’s take a look at its idle mode and try to figure out the composition of its basic building blocks.
Medium Clap — Idle Mode
The medium clap button seems to be composed of three parts:
Triggering the hover effect
When hovering the idle button we clearly see some sort of a pulse released from the circle and spreads equally towards all directions evenly and when reaching a certain length travelled this pulse is fully faded out. This reminds me of a radar or sonar effect. I also noticed that the opacity of this sonarish effect begins to fade away from the moment it appears until the circle reaches a certain length and fully disappears in opacity: 0;
, all we see left behind the faded sonar is the circle’s border remaining colored in the same greenish color as of the sonar effect.
Triggering the Click effects
This is probably the most complex area of the micro-interaction, so let’s take it slowly and approach each part with attention. Starting at the center of the circle, we can clearly see the clapping-hands icon shifting colors, a short inspection(via Dev Tools in Chrome Browser) of this icon indicates:
It is a unique SVG element: before the click event its inner color is either transparent or white (matching the background), and the stroke of the SVG is green. The moment a click occurs, the SVG Icon shifts its fill
& stroke
colors in contrast: now the “empty” central part of the clapping hands is filled with green which pops out to the user’s eyes instantly and the border is now white/transparent. This effect can be achieved in various ways: A simple one could be the changes of fill
, stroke-width
and color
properties on the SVG element. The original SVG icon is copyrighted, so I went with a simple hand icon that would not change much during my take on this micro-interaction.
We can also notice a green circle with the text “+1” appearing right above the button with a very short sliding effect on the y axis. This could be done using transform: translateY("desired pixels");
when the element appears, then a short pause of the green circle in its set location, and finally another use of transform: translateY("desired pixles");
and a transition
of opacity
from 1 to 0 during the sliding + fading effect upwards. A small note is that the counter is incremented on each click and re-triggers the above animation.
Particles Pop Effect — slowed down
To play with just the particles system and get a hang of the code, I invite you to click the transparent button and see how the particles formation randomizes angles and burst in this fiddle:
In Result — click the transparent button to see the particles formation “burst” effect
This one was a little challenging to figure it in real speed, so I decided to record a short GIF.
This allowed me to take a better look at the moving particles by slowing down the frames. There is a frame where the particles can be seen clearly with opacity: 1;
, letting us analyse this complex part more efficiently. In the longest pausing frame in which we see the particles clear we can recognize a certain pattern in the visual elements.
A single frame — one particle group is highlighted
It is simply a green square with about a few pixels width and height and right next to it a pyramid-shaped triangle with its tip aligned horizontally to the square, with a small base width and about x1.5/2 the size in its 2 other vertices. This particle group is duplicated 5 times as we can also see.
z-index
. The group is than also given a sort of slide effect that orbits perpendicularly to the angle between the pyramid’s apex and the core of the button which makes the group travel from the core through this angel outwards.opacity
is shifted from 0 → 1, than from this certain distance and outwards the opacity
again is shifted from 1 → 0 until the group fully vanishes.transform: translateY("desired pixels");
we could better perceive how simple the basic logic is to reproduce.transform: rotate("certain degree");
to a particle set in order to set them in direction of their individual orbit, I found the best way to do so is trial and error and adjusting according to the location I wanted each particle group to arrive with this drawing in mind guiding me.
The directions of each particle group orbit
The particle groups formation changing angle randomly
function getRandomInt(min, max) {return Math.floor(Math.random() * (max — min + 1)) + min;}
Than by using selecting the particle formation HTML element and directly changing its style.transform with string interpolation we are able to give a dynamic random angle twist to the entire particles formation like so in my fiddle:
function addRandomParticlesRotation(particlesName) {const particles = document.getElementById(particlesName);const randomRotationAngle = getRandomInt(1, 72) + 'deg';particles.style.transform = `rotate(${randomRotationAngle})`;}
A simple element with a grayish integer that is sums up the total claps given to a certain article with the current claps the user is giving the article in the session.This element is instantly hidden when the user clicks the button and instantly appears back when the clap counter element finishes its animation cycle and vanishes upwards.
A slight change in the circular button’s size/scale on click
A very small nuance but a very important one is the elegant use of a small scale function to scale the button about 10–20% larger than its size and back to its original size during the particles pop animation as seen above.
A slight shrink & grow effect on the green + counter above button
One more small tweek similar to the button scale is implemented on the click counter above it as well to enhance the interactiveness just a bit more.
A new addition to the micro interaction that I have yet to implement is a tab sliding to the right of the button after a certain time has passed since the user last clicked the button that offers a user a short time window to reset the total claps, assuming the user would like to reduce the amount of claps given or cancel them all. The X button is briefly present and then disappears back behind the button.
A special thanks to awesome people who contributed and helped with reviweing and editing this article: Uri Shaked, Elad Shechter, Yogev Ahuvia.
For your convinice you can have a look at the code in github.
If you enjoyed this article I invite you to enjoy the merits of the infamous clap micro-interaction and clap for this article ;).
More Recommended Posts by me about Product Design, UX & Frontend:
More open-source Vue Components:
I am Jonathan Doron, a Web Developer with great passion for User Centric Frontend, and modular client architecture.
What thrills me these days is exploring the ocean of Interaction Design more specifically of Microinteractions and their impact on our lives. I do it by recreating existing interactions as well as designing my own interactions along my quest to deepen my knowledge in the field.
You are welcome to follow, tweet or message me freely with any questions, feedback or suggestions! — Twitter