Ripple

🎇 A ripple effect, similar to the Google Material ripple effect or the Vuetify ripple effect, but with a lot of options. 🎇

See the demo.

This package depends on Greensock GSAP. Other options coming soon...

📥 Installation

@digital-swing/ripple is available as a npm package, or as a bundle to load from CDN.

npm

npm install gsap @digital-swing/ripple

yarn

yarn add gsap @digital-swing/ripple

Then import it as a esm package in your app :

import ripple from '@digital-swing/ripple';

Browser

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://unpkg.com/@digital-swing/ripple"></script>

🛠️ Usage

Simple

ripple();

This will create an on-click ripple animation on all html element with the default .ripple class.

With custom parameters

ripple({
  color: 'red',
  size: '100px',
  target: '.alt-ripple',
  delay: 0,
  ease: 'power2',
  gradient: true,
  duration: 0.8,
  //...
});

See the full API in the docs.

💡 Tips

If you want to use a global css variable to color your ripple, for example a color from your css framework, you can do:

ripple(
    color: getComputedStyle(document.documentElement).getPropertyValue(
      '--bs-secondary'
    ),
    //...
    );

🎨 Initial Ripple styles

In some cases you will want to style the ripple with css before javascript sets its styles (especially with on: 'always'). You can do it this way :

.ripple { /* or any class you're using */
  --ripple-x: 100%;
  --ripple-y: 0%;
  --ripple-color: 'red';
  --ripple-size: 300px;
}

This can prevent a Flash Of Unstyled Content that happens in rare cases.

Limitations

• You can't have a css background on element with textClip: true option. If you need a background on these element, it should be setup on a wrapping element instead.

Known Issues

• The background text clip doesn't work in chrome if the element has a transform translate set.
• Doesn't work with element where the backgroundchangers on interaction. For example a button that changes its background-color when being hovered.

See this post on StackOverflow.

💬 Changelog

Please see the CHANGELOG for more information about what has changed recently.

🐛 Testing

yarn
yarn test

🌍 Contributing

Please see CONTRIBUTING for details.

🔒 Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

👥 Credits

Lucas Demea

🗒 Roadmap

• Add compatibility with other animation libraries : anime.js, shifty, popmotion...
• Support touch events
• Allow a multi-color ripple