TW Elements - Ripple effect. Free UI/UX design course

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).

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;HTML:

<button
  type="button"
  data-twe-ripple-init
  class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
  Button
</button>

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

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });

After saving the file the Ripple Effect will start working:

Colors

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.

HTML:

<!-- Primary ripple color -->
<button
  type="button"
  data-twe-ripple-init
  data-twe-ripple-color="primary"
  class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
  Primary
</button>

<!-- Success ripple color -->
<button
  type="button"
  data-twe-ripple-init
  data-twe-ripple-color="success"
  class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
  Success
</button>

<!-- Danger ripple color -->
<button
  type="button"
  data-twe-ripple-init
  data-twe-ripple-color="danger"
  class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
  Danger
</button>

<!-- Info ripple color -->
<button
  type="button"
  data-twe-ripple-init
  data-twe-ripple-color="info"
  class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
  Info
</button>

<!-- Light ripple color -->
<button
  type="button"
  data-twe-ripple-init
  data-twe-ripple-color="light"
  class="inline-block rounded bg-neutral-800 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-neutral-900 hover:shadow-lg focus:bg-neutral-900 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-900 active:shadow-lg">
  Light
</button>

<!-- Dark ripple color -->
<button
  type="button"
  data-twe-ripple-init
  data-twe-ripple-color="dark"
  class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
  Dark
</button>

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"

HTML:

<!-- Red ripple color button -->
<button
  type="button"
  data-twe-ripple-init
  data-twe-ripple-color="red"
  class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
  Red
</button>
<!-- Purple ripple color button -->
<button
  type="button"
  data-twe-ripple-init
  data-twe-ripple-color="purple"
  class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
  Purple
</button>

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

HTML:

<!-- Ripple color: #c953d6 -->
<button
  type="button"
  data-twe-ripple-init
  data-twe-ripple-color="#c953d6"
  class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
  #c953d6
</button>
<!-- Ripple color: rgb(43, 84, 151) -->
<button
  type="button"
  data-twe-ripple-init
  data-twe-ripple-color="rgb(43, 84, 151)"
  class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
  rgb(43, 84, 151)
</button>
<!-- Ripple color: hsl(107, 55.7%, 38%) -->
<button
  type="button"
  data-twe-ripple-init
  data-twe-ripple-color="hsl(107, 55.7%, 38%)"
  class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
  hsl(107, 55.7%, 38%)
</button>

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; HTML:

<!-- Call to action -->
<div class="text-center text-white">
  [...]

  <!-- Button -->
  <a
    href="#"
    role="button"
    data-twe-ripple-init
    data-twe-ripple-color="primary"
    class="inline-block rounded-full bg-primary-100 px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
    Learn with me [...]
  </a>
</div>

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:

// Initialization for ES Users
import { Collapse, Dropdown, Ripple, initTWE } from 'tw-elements';

initTWE({ Collapse, Dropdown, Ripple  });

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

Step 3 - Enjoy the fruits of your labour!

DEMO AND SOURCE CODE FOR THIS LESSON