@digital-swing/ripple v0.8.1
Ripple
š A ripple effect, similar to the Google Material ripple effect or the Vuetify ripple effect, but with a lot of options. š
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,
//...
});
š” 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 lucas@digital-swing.com instead of using the issue tracker.
š„ Credits
š Roadmap
- Add compatibility with other animation libraries : anime.js, shifty, popmotion...
- Support touch events
- Allow a multi-color ripple