For those who just wish to head to the code example, it’s right here.

If you wish to head straight to the challenge then click here

*A Microinteraction is a single use, subtle visual queue that draws your attention to a change in status. A power light on a coffee pot, or a color change on button hover are two examples.

Why? Who?! What!? and some Orientation

A common UX problem designers and frontend developers occasionally encounter is the need to introduce a new feature or expose a “well hidden” one that for some reason maybe due to functionality clutter, poor design or some other reason the user rarely interacts with that area or feature of your application.

Whether it’s a new exciting feature your company would like to start getting usage data reactions and feedback from users or if it’s an already existing feature that is rarely used for some reason — this problem exists and we encounter it every now and then in our industry.

I came across this exceptional possible solution on the Facebook Mobile App. Interaction Designers and Frontend Developers at Facebook decided to remove a certain action from my in-app navigation bar and put a new one — the quick link to my profile. Whether it be that they studied my behavior specifically or if it’s a more robust phenomena, it is definitly a worthy cause in my opinion.

A First Hand UX problem — Solved

Often I find myself looking for the quickest way to navigate to my profile via the Facebook app. In most cases I shift my sight to a few areas in the app visually searching as well as clicking a few areas full of anticipation to reach my final destination until I eventually reach my profile (It varies of course in which app state or screen you are in during your session) — to conclude, a not so pleasant experience to say the least.

Facebook, and more specifically Interaction Designers as well as the frontend developers who together concocted this unique solution, solved this issue perfectly in my opinion.

The message they tried to convey as I perceive it is that there’s something New, Shiny and Fun that was gifted to us users. It’s similar to a present that signals us that the unraveling and unboxing of this new action would lead us to a pleasant and a much desired experience. Further, when glancing at the static screen of the Facebook mobile app, the only moving part is this wonderful shiny and sparking microinteraction — a clear signal for a call-to-action.

Let’s go for a deep dive on how such a powerful, carefully designed Microinteraction and a Microinteraction Fanatic (like me) triggered a quest for exploration!

Original — Facebook telling me a new option is now available in my taskbar that I often use

My version — or wait is this the original? I am a bit confused…

Simple yet Powerful and Alluring

A seemingly simple UI element — these 3 simple blueish sparkles appearing briefly over the avatar icon — are hinting that this element is a “shiny new” gift for the user to unravel, Ohh the excitement — I can’t wait!

An allegedly simple touchup along with a minimalistic avatar icon — fused together into an elegant, clever and simple-looking microinteraction residing in a very static or idle screen of Facebook Mobile App. This immediately prompts the observing user to interact with this UI element and discover its hidden virtues — a tailor-fit, properly designed and implemented call-to-action.

Approaching the Challenge

A simple analysis of the microinteraction makes it pretty clear — finding a similar or exact icon would be a relatively simple task while engineering a single “spark” effect would be the rather more complex part.

I invite you to jump on board my thought process “train” and share my experience in forming ideas, experimenting, and discovering insights along my path in accomplishing the desired end result.

I also hope you learn something new like I did by utilizing the CSS clip-path property to addresss this challenge learn its ins-and-outs.

Without further ado, let’s start :) I stepped forward to break the effect down into smaller, more manageable and intuitive mini challenges.

Clip?! path!? Elaborate…

clip-path is a CSS property that cuts away (clips) a region that sets which part of an element will be shown while the parts outside are hidden.

A developer using clip-path to make an intricate shape on his HTML Element

clip-path allows us to create complex shapes with CSS by clipping an element into a certain shape (like circle, triangle, ellipse, polygon and more). We can further animate between shapes freely and receive eased-in transitions and morphing effects out of the box as long as both transitioned shapes have the same number of points (coordinates x,y).

Me experimenting with clip-path to create some basic shapes

Animations Breakdown

A single “Spark” effect in the microinteraction

Focusing my attention on a single element made it much easier to dissect each animation being activated. And so, I determined the following:

transform: scale(...) — Is easing from 0 to 1 and back to 0 along the animation life cycle. transform: rotate(180deg) — it took a bit more time for me to realize that the rotation of this ninja-star to a square and back is a total of 180 degrees (from its appearance phase to its end position, in which the Spark also vanishes). clip-path: polygon(...) — This part would pretty much be one of the more complex and interesting challenges within this single Spark Effect Challenge — therefore, I will discuss it further with much more detail below.

Scaling — A Building Block of the Spark Effect

Timing the scaling of the element has a crucial part in contributing to the “sparkliness” of the effect, as the swift appearance and vanishing of the element is pretty much what a spark is composed of — abrief shiny visit that provides a temporary pleasure to our eyes.

Roatation — Blurring the lines, a “Glue” for the Spark Effect

Along with the scaling transition, when the element first appears and immediately starts to rotate from left to right, the rotation makes it more lively and holistic. This forces the human eye to focus on the icon decorated by this shiny or sparkly feeling.

The Pure CSS way of Morphing Shapes — Clip Path: Polygon(…)

With certain limitations, this is the “Native” way of achieving a morphing effect for CSS shapes.

Known Issue — the first, most important limitation that has to be clear for us developers before we approach this technology is that the number of coordinates in the beginning shape and end shape has to be equal —turning a square to a rectangle is a perfect, simple use that works seamlessly with the technology.

Experimenting

To be perfectly honest, this is the pretty much the first time I’ve utilized clip-path:Polygon() in a real work-related use-case. So I decided to venture on with some experimenting to better understand its in-and-outs before approaching the specific challenge at hand.

Experiment 1 — A Naive Approach — Square → 4-Point Star

Square → 4-Point-Star Morphing on hover

Wow, it’s only my first experiment and I am already thrilled about clip-path :) although something quite peculiar had happened here… The morphing direction seems to be behaving weirdly. The reason is simple: the origin shape had a total of 8 coordinate points, 4 of them stacked on each corner coordinate, thus leading to this weird morph behavior.

2 points(coordinates) stacked on each corner → 8 equally spread points along the square sides

A few steps further into experimenting I discovered this wonderful tool and utilized it to start working with percentages rather then pixles. I also was able to edit my shapes online with it. Overall I highly recommend giving it a try — this is Clippy!

Experiment 2 — Adjusted Morph Directions — Square → 4-Point Star

According to my plans, the following gif shows a simplified approach I took to try solving this issue with a 200px by 200px square:

Planning the morphs step by step frames

A simple coordinate tweak — spreading 4 of the stashed points equally across the square (between the corners) — would hopefully lead to a smoother morph effect and to the right direction (vertically & horizontally respectively) aiming towards the center of both shapes rather then the diagonal direction as before:

Aha Success! — The Morphing effect looks decent now

Experiment 3— Octagon → Square

Single Spark Element — slowed down to see the Octagon and Square Phases

If we look carefully and repeatedly at the single spark effect above, we briefly notice that somewhere about 50% through the animation it turns to an octagon. Furthermore, in the phases before and after the Octagon, the spark morphs to a square.

Seems like quite a simple task doesn’t it? I thought I’d just use clip-path to morph my previous square to an octagon like the gif above. Reality was a bit different, and I had to change the initial shape and draw its polygon(...) a bit differently to have the square within the octagon when transitioning.

The way clip-path operates is it creates the desired clipping region within the element using the property and as my original square took up the entire region of its element. I could not morph outside this region with the current coordinates allocation.

A few adjustments had to be made — and I also shifted to work with percentages now to support dynamic width/height of the shapes from the parent element.

And voilà — we made some progress and now we have an Octagon that transitions to a square and back. But wait…we are not done yet!

Breathing Octagons are real?!

Experiment 4— Octagon → 4-Point Star → Back (Full Cycle)

Now that we know that the Octagon is the biggest appearance of the morphing shape, we can make our morphing shape much more accurate and transition between its actual phases of 4-point-star → Octagon → Back, as seen below:

That’s more like it

Experiment 5— Scaling & Infinite Loop Animation

So I began this experiment with first moving from the hover event to an instantly triggered infinite animation that first uses the scale(...) transformation to make the star appear and disappear respectively as seen below:

Now you see me, now you don’t — demo here

Experiment 6— Rotate, Begin & End Positions

A few more tweaks to make the star scale up to full size in the beginning position and determine its final position with transform:rotate(180deg)

It’s-A Rotating, Mario! — demo here

The Border Challenge

After some time spent experimenting, I realized that what I had accomplished so far would not be satisfactory. In the original example, it seems that when the sparks appear above the icon in the original microinteraction, they have some sort of white border along the shape that is morphing along with the shape through each step of its keyframes :

A bit enlarged — but it is clear that borders are present along the morphing

Experiment 6 — Building a Border that Morphs along with the Spark

After searching for solutions across the internet, stack overflow and other suggestions in articles to approach the issue, I understood that this challenge was quite unique. I could not find any specific solutions to my problem. The fact that my border had to “stick” to the shape while it morphs complicated matters even more. So I ventured on to make a few test until I found the solution.

A “spark-clone” that is rendered just before my main sparkle element as a sibling element was the perfect solution. Both had to be display: flex and vertically as well as horizontally positioned to the center of their wrapper with justify-content: center and align-items: center to achieve the following:

But Johnny wait! How are you going to make sure the clone follows its brother during the morphing keyframes animation? After trying to animate the parent and child simultaneously and experiencing some weird browser issues or bugs, I found that the siblings approach with flex provided the best solution as seen below:

Siblings animating simultaneously created a perfectly adjusting border — demo here

Connecting the Dots

At this point in time, I already felt that the difficult challenges in this project had come to an end. All I had to do now was find a similar avatar icon, position 3 sparks, adjust their positions manually until I was satisfied, and adjust their width/height as well until I reached the end result.

An enlarged version to better see how things work

The final Microinteraction — demo here

Summary

To wrap things up, I enjoyed challenging myself with re-creating this microinteraction. I learned a whole lot about how a seemingly simple element in our daily lives (like a invitation to click a new icon from the developers of a software we consume) is actually much more then just a set of elements and animations perfectly timed and properly oriented.

Such a tailor-fit microinteraction is a work of art. It is a unique UI element that is carefully designed to solve a hard problem. In our case, the developers at Facebook altered my mobile app’s navigation bar, removed an icon I did not use often, and replaced it with an icon that allowed me to perform an action I had been struggling to find and desired to take many times — going back to my profile.

It is a clever decision, a masterly crafted microinteraction that resides inside a static screen. It is the only moving part of the screen, and although very minimal and relatively small in the screen, the shiny sparkling stars across the icon’s margins lured my eyes and my finger to automatically click it. Now I appreciate the work and thought behind it even a bit more — so thank you Interaction Designers and Frontend Developers in Facebook for building such awesome microinteractions!

Conclusion

I encourage you all to dare and try solve hard UI and UX problems through ideation and experimentation. Although it is nice and might be a bit ego-enhancing to reach the end result and succeed, I think it is the less significant part of the experience.

In my eyes, the journey you venture on through, equipped with your skillset of experimenting, thinking, and consulting with others is the best part. The learning and insight gathering processes you experience are much more important, to put it simply, and mean way more then the destination.

Reviewers

Thanks a whole lot for the help of these great people who helped review and give feedback for my article drafts, you’re amazing! ;) — Jared M. Spool Yoni Weisbrod Ofir Ovadia Dima Vishnevetsky

*Demo Orientation — Examples are in a Vue.js configuration hosted at Codesandbox.io, in order to reach the pure HTML/SCSS logic after navigating away click the components folder → then click spark.vue file → the HTML is wrapped around <template> tags → the SCSS is just a scroll away wrapped around <style> tags and that’s it → Enjoy! :)

Now What?

I would appreciate feedback, claps, shares. You can of course find all the code, demo & a live sandbox to play around with as well as organized API docs for convenience of use right here.

More Recommended Posts by me about Product Design, UX & Frontend:

More open-source Vue Components:

Vue Dynamic Dropdown — A Customizable, easy-to-use elegant dropdown

Vue Dynamic Star Rating — A dynamic vue star rating component(similar to google play)

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