svelte-ripple

Ripple effect from Svelte Materialify as a standalone npm package.

• zero dependencies
• works on any element (not just buttons)
• implemented as a svelte action

Install

npm install svelte-ripple

Import

import Ripple from 'svelte-ripple'

Use | simplest

<div use:Ripple>
    // div content
</div> 

Use | with options

<div use:Ripple={{ centered: false, color: 'red' }}>
    // div content
</div> 

These are the defaults, all can be passed in as options:

const defaults = {
    color: 'currentColor',
    class: '',
    opacity: 0.1,
    centered: false,
    spreadingDuration: '.4s',
    spreadingDelay: '0s',
    spreadingTimingFunction: 'linear',
    clearingDuration: '1s',
    clearingDelay: '0s',
    clearingTimingFunction: 'ease-in-out',
}