Particle Space

particlespace

A walkthrough of how I recreated the infamous Medium Clap intricate micro-interaction from scratch The Original Medium Clap Micro Interaction My Implementation If you just want to see the code you can click here . The First Appearance of the Medium Clap 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. A good Micro-Interaction — A Culinary Comparison 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. The Journey Begins 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. Breaking the clap interaction apart, finger by finger: 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. The Basic Parts Medium Clap — Idle Mode The medium clap button seems to be composed of three parts: A grayish counter of the total amount of claps given to this article. A transparent circle with grayish border An Icon of two hands clapping Hover Effect 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 , 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. opacity: 0; Click The Main Event — that Sets The Majority of Animations in Motion 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: SVG Icon 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 & 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 , and 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. fill stroke fill stroke-width color Clap Counter Element 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 when the element appears, then a short pause of the green circle in its set location, and finally another use of and a of 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. transform: translateY("desired pixels"); transform: translateY("desired pixles"); transition opacity Particles Pop Effect 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 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. opacity: 1; , 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. Setting up The Particle Groups & Formation I would like to focus on one group of particles — this closer look reveals that the particles group seems to begin its course in the inner part of the button, a layer behind it seemingly with a proper use of . 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. z-index We can also seem that the group’s opacity is changed a few times during the orbit, from the beginning of the course up until a certain distances travelled the is shifted from 0 → 1, than from this certain distance and outwards the again is shifted from 1 → 0 until the group fully vanishes. opacity opacity A simple example of how this particles system basic logic works could be accomplished very quickly, we create a with 5 px height and width, about 10 pixels to its right a transparent with 3 transparent border and just 1 visible border that will serve as the triangle as clearly explained , if we then shift a holding this group only on the y axis vertically with we could better perceive how simple the basic logic is to reproduce. div div here div transform: translateY("desired pixels"); Spicing it up — Randomizing the Particle Groups’ Formation Angle After accomplishing this phase in our understanding, we could than take another look at any group of particles and see that unlike my example each group travels in a different angle — but pausing for a minute or two to try gather a certain set of logic pattern between the particle groups we can see that all 5 particle groups share the same fixed vertex size of angles. A simple calculation of dividing a circle to 5 parts could give us this golden number → 360/5 = . Than each group would receive its angle according: 0, 72, 144, 216, 288, 360, We know need to give 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. 72 degrees transform: rotate("certain degree"); The directions of each particle group orbit Now in order to make them move in each direction we need to use a simple duplication of this group to a total of 5 with the calculated angles of each groups orbit and proper use of opacity shifting would give us the desired popping particles animation seen below. Those with sharp eyes could now see that the popping particles are not always been “shot” in the same angles, each click has a different set of angles to the entire particle formation “burst” effect As seen: The particle groups formation changing angle randomly This randomness could be easily achieved with and this random function by generating a random angle each times the particles animation is activated with a certain range of min and max values, this: Javascript function getRandomInt(min, max) {return Math.floor(Math.random() * (max — min + 1)) + min;} Than by using selecting the particle formation 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: HTML function addRandomParticlesRotation(particlesName) {const particles = document.getElementById(particlesName);const randomRotationAngle = getRandomInt(1, 72) + 'deg';particles.style.transform = `rotate(${randomRotationAngle})`;} Total Claps Counter 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. Button Pulse Effect after Click 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. Click Counter Pulse Effect after Click 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. Bonus — X Reset button 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. Contributeors & Reviewers A special thanks to awesome people who contributed and helped with reviweing and editing this article: , , . Uri Shaked Elad Shechter Yogev Ahuvia Now What? 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 How I recreated Facebook’s microinteraction for feature discovery — A full Walkthrough Guide Medium Clap Recreated in Vanilla JS — A step-by-step code tutorial Star Rating — Make SVG Great Again Art of Code — Why You Should Write more Pseudo Code More open-source : Vue Components — A Customizable, easy-to-use elegant dropdown Vue Dynamic Dropdown — A dynamic vue star rating component(similar to google play) Vue Dynamic Star Rating 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 more specifically of 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. Interaction Design Microinteractions You are welcome to follow, tweet or message me freely with any questions, feedback or suggestions! — Twitter

Stories, News & Mentions about PARTICLESPACE

Particlespace’s Stories on HackerNoon