The Ripple Effect
Tags: css, javascript, webdev, ux
Published: 2020-01-04 20:52:49

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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/v6x0tjwmgp6smfta6hr3.png)

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](https://material.io/design/platform-guidance/android-haptics.html#usage) 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:

{% codesandbox silly-moore-hiyv6 %}

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

{% codesandbox hidden-http-4xr4y %}

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](https://material-ui.com/components/buttons), 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 🙂**