Hit enter after type your search item

3 Demos of Creating Gooey Effect in HTML5 canvas by jQuery

Create gooey effect in HTML canvas

The light-weight jquery-wobblewindow-plugin can be used for creating the gooey effect on HTML5 canvas in your web pages.

The minified size is only 7K while cool animation happens as the mouse bring in and out of any specified HTML element.

Demo 1 Demo 2 Demo 3
Developer’s page Download plug-in


Install the plug-in by npm:

npm i jquery-wobblewindow-plugin

How to set up jQuery wobblewindow plug-in on your website?

Include the jQuery library and jquery.wobblewindow.min.js in the <head> section:

 <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

<script src=’js/wobblewindow/jquery.wobblewindow.min.js’></script>

Initiate the plug-in


The plug-in has a plenty of options that you may use to create the animations. See the demos below with the description of a few.

The markup

The markup can be any element in a webpage where you want to create gooey animation. The ID is referred in the jQuery code as shown in the demos below.

A demo of creating gooey animation in a div element

In this demo, a div element is created with dummy text. A little CSS is used to style and differentiate different sections. Bring the mouse over inner div element, particularly on edges to see the wobble effect:

jQuery gooey animation

See online demo and code

The markup for this demo:


The jQuery code:

It used all default settings for different options, so just initiated the plug-in:


The CSS for div elements:


Grab the complete code including the dependency files from the demo page.

A demo of using different options in animation

As mentioned earlier, the plug-in has a number of option that you may specify in the jQuery code for creating customized gooey effect as the mouse is in and out of the specified element.

A few of the options used in this demo are:

  • depth – that specified the depth of the z-index
  • offset and offsetY
  • wobbleSpeed // defines the wobble speed like elasticity
  • bodyColor //It defines the color of body of the element where effect is created
  • and many other

jQuery wooble animation

See online demo and code

Get the complete code from the demo page.

A demo with four squares

In this example, four different elements are specified where gooey animation is created with the different set of options and values.

jQuery animation multiple

See online demo and code

The jQuery code:




Similarly, you may create animation in different parts of the same web page – all with different settings.

Learn more about the available options by visiting the plug-in page.

This div height required for enabling the sticky sidebar