Recreating the Touch Ripple Effect as Seen on Google Design

Google's new design efforts are vast and justify a significant amount of conversation. But instead of talking about the theory of Material Design and the implications of Google's newest efforts, we're going to focus on an interesting technique Google has employed on their Design landing page.

When the user clicks on one of the blocks, an SVG circle expands from the point of the user's click to fill most of the box. Google refer to this as the touch ripple. We're going to recreate this effect using a few lines of jQuery, some simple HTML and CSS.

Let's get started!

The Basic Grid

Before we start, we need to set up a basic grid. We are going to build the grid elements without using a framework, but this technique would work with a framework perfectly fine.

The column classes map to fractions, so that "col-1-3" means 1/3 the width of the containing element.

Basic CSS

Next, we will set up our column classes. We're using LESS, which allows us to nest rules and utilize the &operator. We won't get into the specifics of LESS, but for the sake of this tutorial, we'll explain how the & operator works. But first, here is the LESS for the columns.

How the SVG Will Work

Next, let's plan how the click will work, and how the SVG will be placed inside each of the boxes.

When the user clicks on any of the boxes, we will calculate the offset of the mouse position from the corner of that box. We'll then use those coordinates to place the circle. We will also absolutely position the SVG element inside the boxes, and the boxes themselves will be positioned relative. We'll utilize SVG's native <circle> element, along with a custom jQuery animation function.

Next, we will convert the clickX and clickY variables to integers, as they show up as floats in some browsers. This makes sure that we avoid any rendering issues resulting from subpixel aliasing. Note, however, that this wouldn't necessarily be required for the effect to work.

var setX = parseInt(clickX);
var setY = parseInt(clickY);

Remove Existing SVG Elements

Next, we will remove any existing SVG elements from our clicked box. If you plan to add an SVG to the content of the box, be certain that you use something like jQuery's.not() in combination with a class to avoid removing your content.

$(this).find("svg").remove();

Append New SVG

Next, we append our SVG, which we are creating by passing text into the jQuery function.

The setX and setY position the center of the circle at the point of the click that we derived earlier.

Animate Circle Radius

Next, we animate the r property (which sets the radius) using jQuery's animate function. The animate function doesn't support animating properties, so we use the step option, which is called after every step of the animation itself.

Conclusion

This simple effect can be used in a number of ways beyond our example. Imagine, for instance, identifying where in an image a person clicked, and creating a popover to comment on that portion of the image, and subsequently saving the coordinates. What uses can you find for this effect?

I am the director of technology at Whiteboard, a company based in Chattanooga, TN. I hold a masters degree in Digital Media from Georgia Tech. I'm passionate about building incredibly useful and beautiful things, and inspiring others to do the same through teaching.