Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including jquery-canvas-animation with all npm packages installed. Try it out:

jquery-canvas-animation lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("jquery-canvas-animation/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

jquery-canvas-animation v2.0.0

jQuery Plugin - Canvas Animation

jQuery Plugin - Canvas Animation

Demo page

Available at NPM

$ npm i jquery-canvas-animation

What's new in version 2


With JCA 2 comes a new written editor to your application. To enable this feature you have to editor: {enable: true} in your canvas configuration and add jquery.canvas-animation-editor.js or replace jquery.canvas-animation.js with jquery.canvas-animation.bundle.js in your application.

Draggable Items (Editor)

Draggable items is by default enabled. It works only with Editor and jQuery UI Draggable.

Icon Framework

It is now possible to use every icon framework like Fontawesome 5 for example.

CSS Namespace

All html classes and ids starts with jca-.

Bundle JS

The new file called jquery.canvas-animation.bundle.js includes jquery.canvas-animation.min.js and jquery.canvas-animation-editor.min.js

SCSS and LESS variables

Now you can configure your css output in SCSS and LESS.


HTML/CSS Ratios The Canvas have to be an id attribute.

<div id="canvas" class="jca-ratio-21by9">
    <!-- ... -->

<div id="canvas" class="jca-ratio-16by9">
    <!-- ... -->

<div id="canvas" class="jca-ratio-4by3">
    <!-- ... -->

<div id="canvas" class="jca-ratio-2by1">
    <!-- ... -->

<div id="canvas" class="jca-ratio-1by1">
    <!-- ... -->

JavaScript (jquery.canvas-animation.js)

    steps: [
            addClass: '',    // adds one or more classes to #canvas ('foo bar' adds 2 classes)
            removeClass: '', // remove one or more classes from #canvas ('foo bar' removes 2 classes)
            duration: 500,   // duration of this step (milliseconds, default: 500)
            pause: false     // pause animation at this point (boolean, default: false)
    timeout: 0, // 0 = starts immediately the first step (milliseconds)
    resetDuration: 500, // time it takes to reset all animations (milliseconds)
    infinite: true, // if true: plays animation infinite
    autoplay: true, // if true: plays animation instantly
    controls: true, // if true: adds controls to canvas
    editor: {
        enable: false, // if true: show editor on page
        wrapper: '.jca-editor-container' // editor wrapper class
    useIcons: false, // use icons from an icon framework instead of css icons
    icons: {
        backward: '<i class="fas fa-step-backward"></i>',
        play: '<i class="fas fa-play"></i>',
        pause: '<i class="fas fa-pause"></i>',
        stop: '<i class="fas fa-stop"></i>',
        forward: '<i class="fas fa-step-forward"></i>',
        expand: '<i class="fas fa-expand"></i>',
        editor: '<i class="fas fa-edit"></i>'
    controlsWrapper: '.jca-controls', // class of the controls wrapper
    backwardButton: '.jca-backward', // class of step backward button
    playButton: '.jca-play', // class of play button
    pauseButton: '.jca-pause', // class of pause button
    stopButton: '.jca-stop', // class of reset button
    forwardButton: '.jca-forward', // class of step forward button
    expandButton: '.jca-expand', // class of expand button
    editorButton: '.jca-editor', // class of edit button
    classDone: 'jca-done', // is set if the animation is done
    classWait: 'jca-wait', // is set if autoplay : false and animation is never played or user clicked on reset button
    classForward: 'jca-forward', // is set if user clicked forward
    classBackward: 'jca-backward', // is set if user clicked backward
    classWrap: 'jca-wrap',
        '<div class="jca-controls">' +
            '<div class="jca-backward"></div>' +
            '<div class="jca-play"></div>' +
            '<div class="jca-pause"></div>' +
            '<div class="jca-stop"></div>' +
            '<div class="jca-forward"></div>' +
            '<div class="jca-expand"></div>' +
            '<div class="jca-editor"></div>' +
    onPlay: null, // called before first animation step
    onDone: null, // called after last animation step
    onWait: null  // called if classWait was added

JavaScript (jquery.canvas-animation-editor.js)

    enable: false, // if true: show editor on page
    decimal: 2, // accuracy of numbers
    draggableItems: true, // jQuery UI Draggable is required for this feature
    wrapper: '.jca-editor-container', // editor wrapper class
    labels: {
        top: 'top',
        left: 'left',
        width: 'width',
        height: 'height',
        newItem: 'New: ',
        newItemBlank: 'Blank',
        newItemExt: 'Extended',
        select: 'Select: ',
        selectCss: 'CSS',
        selectHtml: 'HTML',
        remove: 'Remove: ',
        removeItem: 'Item',
        removeStyle: 'Style',
        className: 'CSS class name',
        parentWidth: 'Parent width in px',
        parentHeight: 'Parent height in px',
        itemWidth: 'Item width in px',
        itemHeight: 'Item height in px',
        itemTop: 'Item offset top in px',
        itemLeft: 'Item offset left in px',
        confirmAppendPrepend: 'OK = append item / Cancel = prepend item',
        confirmRemoveItem: 'Are you sure to remove item?',
        confirmRemoveStyle: 'Are you sure to remove style?',
        alertCanvasId: 'Canvas needs attribute "id".'
    template: '<div class="jca-editor-container">' +
        '<div class="jca-container">' +
            '<div class="jca-col jca-cord-dimension">' +
                '<div class="jca-box">' +
                    '<div class="jca-label jca-top"></div>' +
                    '<div class="jca-label jca-left"></div>' +
                    '<div class="jca-label jca-width"></div>' +
                    '<div class="jca-label jca-height"></div>' +
                    '<input type="number" step="0.01" name="jca_top" />' +
                    '<input type="number" step="0.01" name="jca_left" />' +
                    '<input type="number" step="0.01" name="jca_width" />' +
                    '<input type="number" step="0.01" name="jca_height" />' +
                '</div>' +
            '</div>' +
            '<div class="jca-col jca-selector-breadcrumb"></div>' +
            '<div class="jca-col jca-code-col">' +
                '<div id="jca-html"></div>' +
                '<div id="jca-css"></div>' +
            '</div>' +
            '<div class="jca-col jca-button-col">' +
                '<span class="jca-new"></span><input type="button" name="jca_new_item" value=""/> <input type="button" name="jca_new_item_ext" value=""/><br/>' +
                '<span class="jca-select"></span><input type="button" name="jca_html" value=""/> <input type="button" name="jca_css" value=""/><br/>' +
                '<span class="jca-remove"></span><input type="button" name="jca_remove_item" value=""/> <input type="button" name="jca_remove_style" value=""/><br/><br/>' +
                '<span class="jca-width"></span> <span class="jca-width-val"></span> <span class="jca-height"></span> <span class="jca-height-val"></span><br/>' +
                '<span class="jca-top"></span> <span class="jca-top-val"></span> <span class="jca-left"></span> <span class="jca-left-val"></span>' +
            '</div>' +
        '</div>' +


This software is in development. Could have bugs.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free