{"_id":"wavify","_rev":"1-95cf052cb22d8bd7556d2cdd15acdc8c","name":"wavify","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"wavify","description":"Wavify is a simple library to draw animated wave on a webpage.","version":"1.0.0","main":"wavify.js","keywords":["js","jquery","wave","wavify","greensock"],"repository":{"type":"git","url":"git+https://github.com/peacepostman/wavify.git"},"homepage":"https://github.com/peacepostman/wavify","authors":[{"name":"Benjamin Grauwin","email":"benjamin@potion.social"}],"support":{"issues":"https://github.com/peacepostman/wavify/issues"},"license":"MIT","gitHead":"fadaf0033397759a0b12412db9712f4ab3c84ef1","bugs":{"url":"https://github.com/peacepostman/wavify/issues"},"_id":"wavify@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.14.2","_npmUser":{"name":"peacepostman","email":"kenabeach@gmail.com"},"dist":{"integrity":"sha512-fTF3xWaCjKsQjRptpm0xo3DU7UK3dQu1+N5LPqwhrtXe1ZhVOBoc9krCByYoH5UBH35NLGZQsyBcHQamMPAc3Q==","shasum":"08fef2ce1ae8236fd6b0a93df56c2b7fbae77602","tarball":"https://registry.npmjs.org/wavify/-/wavify-1.0.0.tgz","fileCount":5,"unpackedSize":12145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaRFbCRA9TVsSAnZWagAAERMP/j9s1HNg+aP5UY2gMbu6\nXhSdrc39+aBu5wWUoX38mGsPkNudQkarktzoZG5mV/rH+dNrhN/YKvvIoeGa\n65bTueecg15zrEV06XStUZkKnvcwDlIrBrKwBKQxxY1BrF4F127evLiPfPGm\nizFnrt+OqXOqn9PSh6u6Na67U0dLlQFIYdomJEedQTErmPh/jCIofaz9gFWl\nxrdE1mlnLMAlZFUIuu4Bmw125UJXFuUDY75jktbSxBm7K6wAGF7fLM+R56V9\nx5thBggb/9lKksXToEJz1hAxkF9GurKTwk9FxP6nDszh1w00w4Sbb06h0CTw\ngq/UjOSvUjIyQvRibuOQtF67ghLj5L+jHYPGTFFvNo9dt1WDrdOswdr97gFh\nsw4xfC9TEAhuabbS7lvJ/f322kCwRUigQv+SeZOzxuknpws/SQpFVvBJeXp5\nMsJZv6UsLfDF279e5qiLQkAQqSgiShCeET6q6bBD9sRFNpF7s+i+/Johdz45\neOFYoOg+76VDmfNqNeydRskBVmb5K9yMl16rmOxJQigZTDdag/KHG1wjPlLa\nRrEI1xrYhnK4n0btwiz03dYgyrtkLleLge9GjM+/Wrs79QZxlBnI2Y85OUyt\nlmS8cFu8Sz5wcdQZMwxSipDtEmG9eTiNmC3COb4CngxQscFJyTQuj6Igr1s6\nyLgX\r\n=FRHp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICSEA8HbXtPgh/bMlTj85SvdmL5+SxmqDcZwQAB0snBJAiEA7DyqG2pWcndrJRA7eio43C0E/tL41vt3i0PIAUvYvIg="}]},"maintainers":[{"name":"peacepostman","email":"kenabeach@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/wavify_1.0.0_1567166811194_0.8221268387546736"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-30T12:06:51.194Z","1.0.0":"2019-08-30T12:06:51.407Z","modified":"2022-05-24T02:32:30.044Z"},"maintainers":[{"name":"peacepostman","email":"kenabeach@gmail.com"}],"description":"Wavify is a simple library to draw animated wave on a webpage.","homepage":"https://github.com/peacepostman/wavify","keywords":["js","jquery","wave","wavify","greensock"],"repository":{"type":"git","url":"git+https://github.com/peacepostman/wavify.git"},"bugs":{"url":"https://github.com/peacepostman/wavify/issues"},"license":"MIT","readme":"# Wavify\n\nWavify is a simple library to draw animated wave on a website.\n\nThe library is heavily adapted from a codepen board (https://codepen.io/grimor/pen/qbXLdN).\n\nWavify can be used as a jQuery plugin or with vanilla JavaScript.\n\nA playground for jQuery can be accessed here: http://codepen.io/peacepostman/pen/jBavvN/\n\nYou can also see it in production here: https://potion.social/fr/plans-entreprise\n\n_Warning_: It has been notified that the use of this plugin introduce performance issues in limited setups or on some mobile devices.\n\n## Usage\n\nUsage is very simple. First, be sure to include TweenMax (https://greensock.com/tweenmax). If you are using Wavify as a jQuery (https://jquery.com/) plugin be sure to include jQuery too.\n\nHere is a HTML header example:\n\n```\n<!-- Vanilla JavaScript -->\n<script src=\"/js/TweenMax.min.js\"></script>\n<script src=\"/js/wavify/wavify.js\"></script>\n```\n\nor\n\n```\n<!-- As jQuery Plugin -->\n<script src=\"/js/TweenMax.min.js\"></script>\n<script src=\"/js/jquery.min.js\"></script>\n<script src=\"/js/wavify/wavify.js\"></script>\n<script src=\"/js/wavify/jquery.wavify.js\"></script>\n```\n\nIn the html add the following code:\n\n```\n<svg width=\"100%\" height=\"100%\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><defs></defs><path id=\"myID\" d=\"\"/></svg>\n```\n\nThen in your JavaScript file add this:\n\n```\n// For Vanilla JavaScript\nvar myWave = wavify( document.querySelector('#myId'), {\n  height: 60,\n  bones: 3,\n  amplitude: 40,\n  color: 'rgba(150, 97, 255, .8)',\n  speed: .25\n})\n\n// For jQuery\nvar myWave = $('#myID').wavify({\n  height: 60,\n  bones: 3,\n  amplitude: 40,\n  color: 'rgba(150, 97, 255, .8)',\n  speed: .25\n});\n```\n\n## Option Parameters\n\n| **Property** | **Description**                                                             | **Default Value**       |\n| ------------ | :-------------------------------------------------------------------------- | :---------------------- |\n| container    | Element query selector for parent container; used for calculating wave size | 'body'                  |\n| color        | CSS color for the wave, can be Hex, rgb, rgba                               | rgba(255,255,255, 0.20) |\n| bones        | Number of articulations in the wave                                         | 3                       |\n| speed        | Animation speed                                                             | 0.15                    |\n| height       | Height of the wave from crest to trough                                     | 200                     |\n| amplitude    | Vertical distance wave travels                                              | 100                     |\n\n## Available Functions\n\n**updateColor**\n\nWill animate wave color to a new value.\n\nAvailable parameters are :\n\n| **Property** | **Description**                                  | **Default Value** |\n| ------------ | :----------------------------------------------- | :---------------- |\n| timing       | Duration for transition in seconds               | 1                 |\n| color        | CSS color for the wave, can be Hex, rgb, rgba    | original color    |\n| onComplete   | A function to be executed on transition complete | null              |\n\n```\nmyWave.updateColor({\n  color: 'rgba(150, 97, 255, .8)'\n});\n\nor\n\nmyWave.updateColor({\n  color: '#FFF',\n  timing: 10\n});\n\nor\n\nmyWave.updateColor({\n  color: '#FFF',\n  timing: 10,\n  onComplete: function(){\n    console.log('Transition Complete !')\n  }\n});\n```\n\n**pause**\n\nWill pause current running animation\n\n```\nmyWave.pause();\n```\n\n**play**\n\nWill play current running animation if paused before\n\n```\nmyWave.play();\n```\n\n**kill**\n\nWill kill current animation.\n\n```\nmyWave.kill();\n```\n\n**reboot**\n\nWill reboot animation. New parameters can be provided. Please avoid changing selector, there is no logic reason to do that :D\n\nRefer to configuration options to see available parameters\n\n```\nmyWave.reboot();\n\nOR\n\nmyWave.reboot({\n  height: 80,\n  bones: 10,\n  amplitude: 60,\n  color: 'rgba(150, 97, 255, .2)',\n  speed: .45\n});\n```\n\n## Copyright and license\n\nCode released under the [MIT License](https://github.com/peacepostman/wavify/blob/master/LICENSE).\n\n## Credits\n\nThanks [joeyparis](https://github.com/joeyparis) for his PRs.\n","readmeFilename":"readme.md"}