The Ripple Effect

Since I started learning about implementing animations for the Web, I've been keeping an eye out for interesting interactions that I come across.

A few weeks ago, I serendipitously found that my mouse clicks on some web app produced a sort of "gently reverberating" visual ripple.

It was a pleasant feeling. it gave me the impression that my click action had registered, and that I should expect something to occur next.

But from a practical perspective, it made me question just how much of a difference does it make for the user whether they get this effect after a click or just don't 🤔.

And then, the figurative rock sank into my lake of understanding, that there is a gap between how an "ideal" user interacts with our app in a product demo video, and how actual users interact with it. The reality is that users missclick. A lot. Do you ever try to click something but end up just missing the mark by a tiny bit? no? well maybe you're a special snowflake, but in any case, I've had that happen to me as a user plenty of times when I was tired, or had my mind somewhere else or just wasn't being precise enough.

Rationale

When a missclick happens, at best the user will promptly retry with another click, and not feel too bothered by it, but at worst, they'll feel frustrated and helpless 🙁. I've seen an awful lot of elderly people getting frustrated thinking that a program is stuck, when in fact, their click just barely grazed the perimeters of a button on their screen, without them realizing it. If you feel that this doesn't concern you and the app you're developing, then just know that this will hurt conversion rate, and will decrease user satisfaction.

Other nice properties of the effect worth mentioning:

• ✨ Subtle enough to not draw attention to itself
• 📱 Provides a sense of responsiveness on touchscreen devices on the Web where native haptics API is not available (because the effect traverses in circular shape, seemingly triggered by the circular surface of our finger touching it)
• 🌊 communicates which surface was interacted with, by spreading throughout it, and not overflowing onto a surrounding surface
• 🙋‍♀️🙋‍♂️ is already familiar to most users, thanks to Google's Material Design including it into the design system which guides the UI Toolkit powering billions of Android devices around the world. (in fact, it's built into Android's SDK)

Alright, that's fine and all, but if you're like me, and want to use it on the Web, then knowing that it comes out of the box in Android's SDK is no help. You want a re-creation of it to include in your Web app. So I dived in to figure out the necessary implementation details that make this possible on the Web.

Implementation

Turns out, it's fairly straightforward to implement with some fundamental CSS unders (with the usual caveats of anything that involves CSS)

1. Make sure that the button sets a relative position for its child (relative, absolute, fixed and sticky are all fine, but it can't be static)
2. Give the button a overflow: hidden;
3. Add a child, can be a psuedo-element or a DOM element, with position:absolute
4. Set the top and left of the child to the position obtained from the onclick event
5. Make the child circular with border-radius: 50%
6. Give the child some non-zero opacity and choose a background-color
7. Animate the child's transform with scale() after calculating the encompassing circle's diameter, simultaneously animating the child's opacity down to zero

The Ripple is suitable for anything that can be clicked, for example gallery cards:

Of course, Radio buttons and Checkboxes go well with it as well:

The steps are basically frameworkless, so if you're using something like Vue or Angular it should work the same.

Finally, it's worth mentioning that Material-UI, a popular React Web library implementing Material Design, offers the Ripple effect in its button components out of the box. So you can use Button, FAB, Radio or CheckBox components to get it as well.

This has been my first post on Web Animations. If you're like me, and always looking to level up your frontend skills, then stay tuned for my upcoming content where I will introduce some more concepts and techniques that will help you develop some great UI's!
Hope you liked it!
Thank you for reading 🙂