Material Ripple Effect Directive For Vue.js – v-wave

A full-featured Material Design ripple click animation implementation that is easy to use as a Vue.js directive.

How to use it:

1. Import the v-wave.

import Vue from 'vue'
import VWave from 'v-wave'

2. Register the v-wave

// register
Vue.use(VWave)

// for nuxt.js
export default {
  modules: ['v-wave/nuxt']
}

3. Attach the material ripple effect to an element.

<button v-wave>Click me!</button>

4. All possible options.

Vue.use(VWave,{
  directive: 'wave',
  color: 'currentColor',
  initialOpacity: 0.2,
  finalOpacity: 0.1,
  duration: 0.4,
  easing: 'ease-out',
  cancellationPeriod: 75
})

Preview:

Changelog:

v1.5.0 (05/21/2022)

• Bug Fixes
• Support local directives

v1.4.0 (03/20/2022)

• Bug Fixes

Download Details:

Author: justintaddei

Live Demo: https://justintaddei.github.io/v-wave/

Download Link: https://github.com/justintaddei/v-wave/archive/master.zip

Official Website: https://github.com/justintaddei/v-wave

Install & Download: