DEV Community

Takane Ichinose
Takane Ichinose

Posted on


Ripple button with VueJS

Just a simple retro'ish ripple button with few Javascript (VueJS) codes for events and some sort of controls.

I tried to re-design the animation, and the movement of the pen that I did before. I tried to improve it, but I think, it still needs an improvement. I still have to study more, and redo it.

How it works

Placing of a ripple

With the source code below, we can put the location of a ripple.

// Get the exact location of the button from the screen.
let pos = el.getBoundingClientRect();

// 'this.ripples' is a looped variable for the ripples element.
    x: e.clientX - pos.left,
    y: e.clientY -
Enter fullscreen mode Exit fullscreen mode

Expansion of a ripple

The expansion of a ripple is made in CSS animation.

.ripple {
    background-color: #ff1ead;
    width: 1rem;
    height: 1rem;
    position: absolute;
    border-radius: 50%;
    /* After we placed the ripple, this code below will put the ripple element at the center of the clicked area */
    transform: translateX(-100%) translateY(-100%);
    mix-blend-mode: screen;
    animation: ripple 1000ms ease-out forwards;

/* From original position, we are going to scale the element to 1rem * 50. It is somehow enormous, and it will occupy the whole space of the button, and then, set the opacity to 0. */
@keyframes ripple {
    0%   { transform: translate(-100%, -100%); }
    80%  { transform: translate(-100%, -100%) scale(50); }
    100% { transform: translate(-100%, -100%) scale(50); opacity: 0; }
Enter fullscreen mode Exit fullscreen mode

After animation

After the animation, we have to destroy the element, so that our element will not be flooded by a ripple element.

// You will notice the code below at the template of the component.
// v-on:animationend="rippleEnd(i)"
// It is an 'onanimationend' event that will be triggered after the CSS animation was ended.

// Yes, I simply spliced the element from the ripples array.
rippleEnd: function(i) {
    this.ripples.splice(i, 1);
Enter fullscreen mode Exit fullscreen mode


This behaviour is not yet perfect. Especially, when the animation was ended, you can't put any ripples after a second (The exact animation time). I don't know if this is a bug, or there is something I did not do well. So if some of you got a suggestion, please comment down below. Very much appreciated.

Thank you!

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.