Tuts+ Tutorial: Recreating the Animated Circle Effect as Seen on Google Design
Instructor: Jonathan Cutrell
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.
We're going to recreate this effect using a few lines of jQuery, some simple HTML and CSS.
Source files for the Tuts+ tutorial: Recreating the Animated Circle Effect as Seen on Google Design
Available on Tuts+ July, 2014