2.1.0 • Public • Published

    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: [
                name: '',        // a unique name to use in combination with .jca-goto
                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
        canvasClick: true, // if true: animation starts by clicking on 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
        gotoButton: '.jca-goto', // class of goto button / add data-step="step-name"
        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 must have 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>' +



    npm i jquery-canvas-animation

    DownloadsWeekly Downloads






    Unpacked Size

    3.61 MB

    Total Files


    Last publish


    • insanitymeetshh