Jelly.js NPM | npm.io

Jelly.js

A library to draw and animate "jelly" shapes in a canvas element. It's inspired in this pen by Thom Chiovoloni, inspired as well in the game The Floor is Jelly.

DEMO 1 - Simple example

DEMO 2 - Jelly slider

TUTORIAL 1 - Simple example

TUTORIAL 2 - Jelly slider

Install

You can install it using npm or just downloading it manually.

NPM

npm install jelly.js

Basic usage

1. Include `jelly.js` or `jelly.min.js` somewhere in HTML.

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

2. Add the SVG `path`s you'd like to draw, and a `canvas` to draw them.

<!-- Circle path -->
<svg class="jelly-circle-svg" width="1000" height="600" style="display: none">
    <path d="m500 250c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50z"/>
    <!-- You can have multiple paths -->
</svg>

<!-- Canvas to draw the shape -->
<!-- Note that the `svg` and `canvas` elements have the same dimensions -->
<canvas class="jelly-circle-canvas" width="1000" height="600"></canvas>

3. Initialize it in JavaScript.

// The `Jelly` constructor receive a `canvas` element (or `string` selector) and an array of objects as `options` (see details below).
// You need to pass as many options as shapes you want to draw in the `canvas`
// This time we are providing an array with a single element, as we want to draw a single shape
var myJellyCircle = new Jelly('.jelly-circle-canvas', [{paths: '.jelly-circle-svg path'}]);

Options

Here is the complete list of options you can provide to customize the jelly shapes as needed:

Name	Type	Default	Description
`paths`	Element or String	`undefined`	Path elements (or selector) to draw the shapes. This options is required.
`svg`	String	`undefined`	URL to an `.svg` file containing the paths. You can also insert the SVG code directly in the HTML.
`pointsNumber`	Integer	`10`	Number of points to use to draw the shapes.
`maxDistance`	Float	`70`	Max distance (in pixels) among points to start pulling.
`mouseIncidence`	Float	`40`	Incidence of the mouse. More incidence means more reaction, and it increases proportionately to mouse speed.
`maxIncidence`	Float	`40`	Max incidence of the mouse. No matter the speed, incidence will never be greater than this value.
`color`	String	`'#666'`	Solid color to fill the shape.
`border`	String	`undefined`	Solid color to draw a border around the shape.
`borderWidth`	Int	`4`	Width for border around the shape.
`image`	String	`undefined`	Image URL to fill the shape.
`imageCentroid`	Boolean	`true`	If `true`, the image will be moved accordingly to the centroid point.
`centroid`	Element or String	`undefined`	Element (or selector) to move accordingly to the centroid point.
`debug`	Boolean	`false`	Set it `true` to see the points.
`intensity`	Float	`0.95`	Jelly effect intensity. Should be a value `< 1`.
`fastness`	Float	`1 / 40`	Jelly effect fastness. Should be a value near zero.

Available functions to animate the jelly shapes

Name	Default options	Description
`hide`	`{i: 0, maxDelay: 0, animate: true}`	Hide the shape selected by the index (`i`). If `animate` is `true`, all the points of the shape will be animated, with a random delay `<= maxDelay`.
`show`	`{i: 0, maxDelay: 0, animate: true}`	Show the shape selected by the index (`i`). If `animate` is `true`, all the points of the shape will be animated, with a random delay `<= maxDelay`. To show a shape, it should have been hidden previously.
`morph`	`{i: 0, maxDelay: 0, animate: true}`	Morph the shape selected by the index (`i`) to another shape. You need to pass a new `paths` option (at least) with the same `pointsNumber`. If `animate` is `true`, all the points of the shape will be animated, with a random delay `<= maxDelay`.
`shake`	`{i: 0, x: 0, y: 0}`	Shake the shape selected by the index (`i`), moving the points (alternately) the distance defined by `x` and `y`.