Try Liquifys filter by visiting the GitHub Pages.

Install with npm.

npm install liquify-js

Include JavaScript file as bundle.

<script src="./node_modules/liquify-js/dist/liquify.js"></script>

Add data-liquify custom attribute to an HTMLElement. Without value the attribute apply the filter "infinite" with default settings.

<div data-liquify>Liquified</div>

• The default filter infinite provide a wrap effect without interaction.

<div data-liquify="infinite">Default filter</div>

• The filter click trigger the effect when a click is emit

<div data-liquify="click">Click filter</div>

• The filter move trigger the effect when a mouse move is emit

<div data-liquify="move">Move filter</div>

The document can be upgraded programmatically.

window.Liquify.upgrade()

The upgrade method provide a Promise.

window.Liquify
     .upgrade()
     .then((() => console.log('DOM Liquified')))

Options frequency, degree and amplitude can be configured using attributes.

<div data-liquify
     data-frequency="0.5"
     data-degree="55"
     data-amplitude="0.5">Common option</div>

• Frequency default range is 0 to 1.
• Amplitude default range is 0 to 1.
• Degree range is 0 to 360.

Options duration and distance can be configured using attributes.

<div data-liquify="click"
     data-duration="5"
     data-distance="75">Gesture options</div>

• Duration is in seconds.
• Distance range is 0 to 100.

Options can be configured dynamically using the Liquify property of the HTMLElement.

const element = window.document.querySelector("[data-liquify]");
element.Liquify.frequency = 0.5;
element.Liquify.degree = 55;
element.Liquify.amplitude = 0.5;

This project is licensed under the MIT License.