Create Wiggly DIV Using JavaScript And Canvas – wiv.js

Preview:

Description:

wiv.js is a fancy JavaScript library for creating configurable wiggly DIV frames using JavaScript and HTML5 canvas.

The smooth animation is based on the window.requestAnimationFrame API.

How to use it:

Download and import the wiv.js library into the document.

<script src="wiv.js"></script>

Add the class wiv to the DIV element and config the wiggle effect with the following HTML data attributes:

• data-wiv-speed: animation speed
• data-wiv-height: height
• data-wiv-tightness: tightness
• data-wiv-thickness: thickness
• data-wiv-color: color

<div class="wiv" 
     data-wiv-speed=".15" 
     data-wiv-height="5" 
     data-wiv-tightness="6" 
     data-wiv-thickness="2" 
     data-wiv-color="#FFFF00"
>

Initialize the wiv.js library. Done.

let instance = wiv.wiv();
instance.initWivs();

Changelog:

07/02/2019

• Track wiv frame value on a setInterval outside of the main animation loop.

01/08/2019

• Added CSS selector data attribute and test for it before running animations

01/06/2019

• Added configurable direction setting for wivs

12/26/2018

• Replaced all instances of var with let