Reply To: Effect similar to new desktop Chrome clicks

[Beverleyh]

I think I know the effect, although I’m on mobile so can’t check.

For the visuals, I imagine you could create the “expanding bubble” with an animated pseudo element (started out as a small circle using border-radius) on the links in question. The keyframe animation would most likely transition the pseudo element’s opacity (to create the fade) and also use transform:scale3d (for the increase in size).

The click action… You could use JavaScript to apply a class (the class that triggers the animation) and remove it again after a 1 or 2 second timeout/delay (although this class removal part probably isn’t needed because you’ll have navigated to another page). Alternatively, you might be able to animate the :active state of the links, which would cut out the need for JavaScript entirely.

If you create a reduced demo in CodePen, using the steps from above to build in the key features of what you’re trying to do, we can offer suggestions based on your code.