Vue.js Touch ripple animation

Best Vue.js Touch Ripple Animation Components 2021

Best Vue.js Touch Ripple Animation Components

In this article we want to explore ripple animation components in vue.js.

(a). Vue-Touch-Ripple

Touch ripple component for Vue.


Install via NPM:

npm install vue-touch-ripple --save

Install via CDN

<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-touch-ripple.js"></script>
<link rel="stylesheet" href="path/to/dist/vue-touch-ripple.css"/>
<script type="text/javascript">
  Vue.use(window.VueTouchRipple, /* { default global options } */)


mount with global

import Vue from 'vue'
import VueTouchRipple from 'vue-touch-ripple'

// import styles
import 'vue-touch-ripple/dist/vue-touch-ripple.css'

// mount with global
Vue.use(VueTouchRipple, /* {
  // default global options
  color: '#fff',
  opacity: 0.3,
  speed: 1,
  transition: 'ease'
} */)

mount with component

import { touchRipple } from 'vue-touch-ripple'

// import styles
import 'vue-touch-ripple/dist/vue-touch-ripple.css'

export default {
  components: {


Here is the component:

  <touch-ripple :speed="1" :opacity="0.3" color="#fff" transition="ease">
     <!-- your element... -->
     <h1>it's a h1 title</h1>
     <div>it's a div block</div>


Here are the customization options:

prop type default
speed Number 1
color String #fff
opacity Number 0.3
transition String ease-out


Demo Page

CDN Example


Read more here.

Related Posts