Ripple effect

Perhaps you know (or maybe you are finding it out now πŸ˜‰) TW Elements is based on a design system called Material Minimal.

Material Minimal is an improved version of the famous Material Design, a system created by Google.

One of the most distinctive things about Material Design and Material Minimal is the so-called Ripple Effect (or Waves Effect).

Click the button or image below to see the Ripple Effect in action.

I don't know about you, but I just love this effect 😍 Even though it was introduced years ago, I never get bored and sometimes I can click on a given element for a long time just to watch the waves spreading πŸ˜…

Ripple effect in TW Elements

Thanks to TW Elements, you can easily add a Ripple Effect to a given element.

The ripple method In TW Elements provides a radial action in the form of a visual ripple expanding outward from the user’s touch. Ripple is a visual form of feedback for touch events providing users a clear signal that an element is being touched.

Basic example

You can easily add a ripple effect for example to the buttons component.

You just need to add data-twe-ripple-init attribute to the button element:

And then you need to import and initialize it in your JavaScript (the same way as we did with Navbar in the previous lesson):

After saving the file the Ripple Effect will start working. Click the button below to see it.


By default the color of the ripple is dark gray but you can easily manipulate the it by using data-twe-ripple-color attribute you can change its color.

For example data-twe-ripple-color="primary" will set the color of the ripple to the primary color.

You can also use direct color names like red or purple.

Try for example data-twe-ripple-color="red" or data-twe-ripple-color="purple"

You can even use HEX, RGB or HSL color codes directly:

The Ripple effect method has many more options available and if you want to take a look at them take a look at the Ripple Effect documentation page.

Now let's get back to our project.

Step 1 - add Ripple Effect attributes to the button

To the button in our Call to action, add the Ripple Effect initialization attribute and the second one, which will set its color as primary:

Step 2 - initialize Ripple Effect

Then go to your src/js/index.js file and add Ripple to import and then to initialization.

Your index.js file should look like this in the end, taking into account the Ripple initialization and the initializations we did in previous lessons:

After saving the file, Ripple Effect should start working in our button:

And as always - if anything isn't clear or doesn't work as it should do not hesitate to write me on twitter πŸ˜‰

John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes β€ž30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.