{"id":18780570,"url":"https://github.com/codelinered/jquery-canvas-animation","last_synced_at":"2026-05-04T21:33:14.273Z","repository":{"id":137953286,"uuid":"129416688","full_name":"CodelineRed/jquery-canvas-animation","owner":"CodelineRed","description":"A jQuery Plugin to create animations / transitions in combination with timings.","archived":false,"fork":false,"pushed_at":"2021-11-13T16:20:18.000Z","size":2112,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-21T06:38:48.493Z","etag":null,"topics":["animation","canvas-animation","css","html","javascript","jquery","jquery-plugin","plugin"],"latest_commit_sha":null,"homepage":"https://ca.insanitymeetshh.net","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodelineRed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-13T14:54:59.000Z","updated_at":"2021-11-13T16:20:08.000Z","dependencies_parsed_at":"2023-05-27T11:30:26.924Z","dependency_job_id":null,"html_url":"https://github.com/CodelineRed/jquery-canvas-animation","commit_stats":null,"previous_names":["insanitymeetshh/jquery-canvas-animation"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/CodelineRed/jquery-canvas-animation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelineRed%2Fjquery-canvas-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelineRed%2Fjquery-canvas-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelineRed%2Fjquery-canvas-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelineRed%2Fjquery-canvas-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodelineRed","download_url":"https://codeload.github.com/CodelineRed/jquery-canvas-animation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodelineRed%2Fjquery-canvas-animation/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261080562,"owners_count":23106597,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","canvas-animation","css","html","javascript","jquery","jquery-plugin","plugin"],"created_at":"2024-11-07T20:27:11.836Z","updated_at":"2026-05-04T21:33:14.222Z","avatar_url":"https://github.com/CodelineRed.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery Plugin - Canvas Animation\r\n\r\n[**Demo page**](http://ca.insanitymeetshh.net)\r\n\r\n## Available at [NPM](https://www.npmjs.com/package/jquery-canvas-animation)\r\n\r\n```bash\r\n$ npm i jquery-canvas-animation\r\n```\r\n\r\n## What's new in version 2\r\n\r\n### Editor\r\nWith JCA 2 comes a new written editor to your application.\r\nTo 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.\r\n\r\n### Draggable Items (Editor)\r\nDraggable items is by default enabled. It works only with Editor and [jQuery UI Draggable](https://jqueryui.com/draggable/).\r\n\r\n### Icon Framework\r\nIt is now possible to use every icon framework like [Fontawesome 5](https://fontawesome.com) for example.\r\n\r\n### CSS Namespace\r\nAll html classes and ids starts with `jca-`.\r\n\r\n### Bundle JS\r\nThe new file called `jquery.canvas-animation.bundle.js` includes `jquery.canvas-animation.min.js` and `jquery.canvas-animation-editor.min.js`\r\n\r\n### SCSS and LESS variables\r\nNow you can configure your css output in [SCSS](https://github.com/InsanityMeetsHH/jquery-canvas-animation/blob/master/src/scss/_variables.scss) and [LESS](https://github.com/InsanityMeetsHH/jquery-canvas-animation/blob/master/src/less/_variables.less).\r\n\r\n## Documentation\r\n\r\nHTML/CSS Ratios\r\nThe Canvas have to be an id attribute.\r\n```html\r\n\u003cdiv id=\"canvas\" class=\"jca-ratio-21by9\"\u003e\r\n    \u003c!-- ... --\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv id=\"canvas\" class=\"jca-ratio-16by9\"\u003e\r\n    \u003c!-- ... --\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv id=\"canvas\" class=\"jca-ratio-4by3\"\u003e\r\n    \u003c!-- ... --\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv id=\"canvas\" class=\"jca-ratio-2by1\"\u003e\r\n    \u003c!-- ... --\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv id=\"canvas\" class=\"jca-ratio-1by1\"\u003e\r\n    \u003c!-- ... --\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\nJavaScript ([jquery.canvas-animation.js](https://github.com/InsanityMeetsHH/jquery-canvas-animation/blob/master/src/js/jquery.canvas-animation.js))\r\n```js\r\n$('#canvas').canvasAnimation({\r\n    steps: [\r\n        {\r\n            name: '',        // a unique name to use in combination with .jca-goto\r\n            addClass: '',    // adds one or more classes to #canvas ('foo bar' adds 2 classes)\r\n            removeClass: '', // remove one or more classes from #canvas ('foo bar' removes 2 classes)\r\n            duration: 500,   // duration of this step (milliseconds, default: 500)\r\n            pause: false     // pause animation at this point (boolean, default: false)\r\n        }\r\n    ],\r\n    timeout: 0, // 0 = starts immediately the first step (milliseconds)\r\n    resetDuration: 500, // time it takes to reset all animations (milliseconds)\r\n    infinite: true, // if true: plays animation infinite\r\n    autoplay: true, // if true: plays animation instantly\r\n    controls: true, // if true: adds controls to canvas\r\n    canvasClick: true, // if true: animation starts by clicking on canvas\r\n    editor: {\r\n        enable: false, // if true: show editor on page\r\n        wrapper: '.jca-editor-container' // editor wrapper class\r\n    },\r\n    useIcons: false, // use icons from an icon framework instead of css icons\r\n    icons: {\r\n        backward: '\u003ci class=\"fas fa-step-backward\"\u003e\u003c/i\u003e',\r\n        play: '\u003ci class=\"fas fa-play\"\u003e\u003c/i\u003e',\r\n        pause: '\u003ci class=\"fas fa-pause\"\u003e\u003c/i\u003e',\r\n        stop: '\u003ci class=\"fas fa-stop\"\u003e\u003c/i\u003e',\r\n        forward: '\u003ci class=\"fas fa-step-forward\"\u003e\u003c/i\u003e',\r\n        expand: '\u003ci class=\"fas fa-expand\"\u003e\u003c/i\u003e',\r\n        editor: '\u003ci class=\"fas fa-edit\"\u003e\u003c/i\u003e'\r\n    },\r\n    controlsWrapper: '.jca-controls', // class of the controls wrapper\r\n    backwardButton: '.jca-backward', // class of step backward button\r\n    playButton: '.jca-play', // class of play button\r\n    pauseButton: '.jca-pause', // class of pause button\r\n    stopButton: '.jca-stop', // class of reset button\r\n    forwardButton: '.jca-forward', // class of step forward button\r\n    expandButton: '.jca-expand', // class of expand button\r\n    editorButton: '.jca-editor', // class of edit button\r\n    gotoButton: '.jca-goto', // class of goto button / add data-step=\"step-name\"\r\n    classDone: 'jca-done', // is set if the animation is done\r\n    classWait: 'jca-wait', // is set if autoplay : false and animation is never played or user clicked on reset button\r\n    classForward: 'jca-forward', // is set if user clicked forward\r\n    classBackward: 'jca-backward', // is set if user clicked backward\r\n    classWrap: 'jca-wrap',\r\n    controlsTemplate:\r\n        '\u003cdiv class=\"jca-controls\"\u003e' +\r\n            '\u003cdiv class=\"jca-backward\"\u003e\u003c/div\u003e' +\r\n            '\u003cdiv class=\"jca-play\"\u003e\u003c/div\u003e' +\r\n            '\u003cdiv class=\"jca-pause\"\u003e\u003c/div\u003e' +\r\n            '\u003cdiv class=\"jca-stop\"\u003e\u003c/div\u003e' +\r\n            '\u003cdiv class=\"jca-forward\"\u003e\u003c/div\u003e' +\r\n            '\u003cdiv class=\"jca-expand\"\u003e\u003c/div\u003e' +\r\n            '\u003cdiv class=\"jca-editor\"\u003e\u003c/div\u003e' +\r\n        '\u003c/div\u003e',\r\n    onPlay: null, // called before first animation step\r\n    onDone: null, // called after last animation step\r\n    onWait: null  // called if classWait was added\r\n});\r\n```\r\n\r\nJavaScript ([jquery.canvas-animation-editor.js](https://github.com/InsanityMeetsHH/jquery-canvas-animation/blob/master/src/js/jquery.canvas-animation-editor.js))\r\n```js\r\n$('#canvas').canvasAnimationEditor({\r\n    enable: false, // if true: show editor on page\r\n    decimal: 2, // accuracy of numbers\r\n    draggableItems: true, // jQuery UI Draggable is required for this feature\r\n    wrapper: '.jca-editor-container', // editor wrapper class\r\n    labels: {\r\n        top: 'top',\r\n        left: 'left',\r\n        width: 'width',\r\n        height: 'height',\r\n        newItem: 'New: ',\r\n        newItemBlank: 'Blank',\r\n        newItemExt: 'Extended',\r\n        select: 'Select: ',\r\n        selectCss: 'CSS',\r\n        selectHtml: 'HTML',\r\n        remove: 'Remove: ',\r\n        removeItem: 'Item',\r\n        removeStyle: 'Style',\r\n        className: 'CSS class name',\r\n        parentWidth: 'Parent width in px',\r\n        parentHeight: 'Parent height in px',\r\n        itemWidth: 'Item width in px',\r\n        itemHeight: 'Item height in px',\r\n        itemTop: 'Item offset top in px',\r\n        itemLeft: 'Item offset left in px',\r\n        confirmAppendPrepend: 'OK = append item / Cancel = prepend item',\r\n        confirmRemoveItem: 'Are you sure to remove item?',\r\n        confirmRemoveStyle: 'Are you sure to remove style?',\r\n        alertCanvasId: 'Canvas must have attribute \"id\".'\r\n    },\r\n    template: '\u003cdiv class=\"jca-editor-container\"\u003e' +\r\n        '\u003cdiv class=\"jca-container\"\u003e' +\r\n            '\u003cdiv class=\"jca-col jca-cord-dimension\"\u003e' +\r\n                '\u003cdiv class=\"jca-box\"\u003e' +\r\n                    '\u003cdiv class=\"jca-label jca-top\"\u003e\u003c/div\u003e' +\r\n                    '\u003cdiv class=\"jca-label jca-left\"\u003e\u003c/div\u003e' +\r\n                    '\u003cdiv class=\"jca-label jca-width\"\u003e\u003c/div\u003e' +\r\n                    '\u003cdiv class=\"jca-label jca-height\"\u003e\u003c/div\u003e' +\r\n                    '\u003cinput type=\"number\" step=\"0.01\" name=\"jca_top\" /\u003e' +\r\n                    '\u003cinput type=\"number\" step=\"0.01\" name=\"jca_left\" /\u003e' +\r\n                    '\u003cinput type=\"number\" step=\"0.01\" name=\"jca_width\" /\u003e' +\r\n                    '\u003cinput type=\"number\" step=\"0.01\" name=\"jca_height\" /\u003e' +\r\n                '\u003c/div\u003e' +\r\n            '\u003c/div\u003e' +\r\n            '\u003cdiv class=\"jca-col jca-selector-breadcrumb\"\u003e\u003c/div\u003e' +\r\n            '\u003cdiv class=\"jca-col jca-code-col\"\u003e' +\r\n                '\u003cdiv id=\"jca-html\"\u003e\u003c/div\u003e' +\r\n                '\u003cdiv id=\"jca-css\"\u003e\u003c/div\u003e' +\r\n            '\u003c/div\u003e' +\r\n            '\u003cdiv class=\"jca-col jca-button-col\"\u003e' +\r\n                '\u003cspan class=\"jca-new\"\u003e\u003c/span\u003e\u003cinput type=\"button\" name=\"jca_new_item\" value=\"\"/\u003e \u003cinput type=\"button\" name=\"jca_new_item_ext\" value=\"\"/\u003e\u003cbr/\u003e' +\r\n                '\u003cspan class=\"jca-select\"\u003e\u003c/span\u003e\u003cinput type=\"button\" name=\"jca_html\" value=\"\"/\u003e \u003cinput type=\"button\" name=\"jca_css\" value=\"\"/\u003e\u003cbr/\u003e' +\r\n                '\u003cspan class=\"jca-remove\"\u003e\u003c/span\u003e\u003cinput type=\"button\" name=\"jca_remove_item\" value=\"\"/\u003e \u003cinput type=\"button\" name=\"jca_remove_style\" value=\"\"/\u003e\u003cbr/\u003e\u003cbr/\u003e' +\r\n                '\u003cspan class=\"jca-width\"\u003e\u003c/span\u003e \u003cspan class=\"jca-width-val\"\u003e\u003c/span\u003e \u003cspan class=\"jca-height\"\u003e\u003c/span\u003e \u003cspan class=\"jca-height-val\"\u003e\u003c/span\u003e\u003cbr/\u003e' +\r\n                '\u003cspan class=\"jca-top\"\u003e\u003c/span\u003e \u003cspan class=\"jca-top-val\"\u003e\u003c/span\u003e \u003cspan class=\"jca-left\"\u003e\u003c/span\u003e \u003cspan class=\"jca-left-val\"\u003e\u003c/span\u003e' +\r\n            '\u003c/div\u003e' +\r\n        '\u003c/div\u003e' +\r\n    '\u003c/div\u003e'\r\n});\r\n```\r\n\r\n## Examples\r\n* [HTML](https://github.com/InsanityMeetsHH/jquery-canvas-animation/blob/master/example/index.html)\r\n* [CSS Canvas](https://github.com/InsanityMeetsHH/jquery-canvas-animation/blob/master/example/css/canvas.css)\r\n* [CSS Animation](https://github.com/InsanityMeetsHH/jquery-canvas-animation/blob/master/example/css/animation.css)\r\n* [JavaScript](https://github.com/InsanityMeetsHH/jquery-canvas-animation/blob/master/example/js/scripts.js)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelinered%2Fjquery-canvas-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodelinered%2Fjquery-canvas-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelinered%2Fjquery-canvas-animation/lists"}