{"id":21078705,"url":"https://github.com/bchoubert/jsonimate","last_synced_at":"2025-10-12T09:16:54.871Z","repository":{"id":90191595,"uuid":"78846414","full_name":"bchoubert/jsonimate","owner":"bchoubert","description":"A minimalist jQuery 2D Engine !","archived":false,"fork":false,"pushed_at":"2017-01-13T12:35:40.000Z","size":2206,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-12T09:16:53.577Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://bchoubert.github.io/jsonimate/","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/bchoubert.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2017-01-13T12:13:07.000Z","updated_at":"2018-05-07T10:53:13.000Z","dependencies_parsed_at":"2024-04-21T11:00:30.952Z","dependency_job_id":null,"html_url":"https://github.com/bchoubert/jsonimate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bchoubert/jsonimate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bchoubert%2Fjsonimate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bchoubert%2Fjsonimate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bchoubert%2Fjsonimate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bchoubert%2Fjsonimate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bchoubert","download_url":"https://codeload.github.com/bchoubert/jsonimate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bchoubert%2Fjsonimate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279010967,"owners_count":26084837,"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","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-19T19:41:31.700Z","updated_at":"2025-10-12T09:16:54.855Z","avatar_url":"https://github.com/bchoubert.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jsonimate\n![logo](https://github.com/BioK03/jsonimate/blob/master/images/logo.png)\n\nJSONimate is a minimalist \u003cimg src=\"http://logonoid.com/images/jquery-logo.png\" height=\"20\"/\u003e jQuery 2D engine that works with CSS3.\n\nYou just have to pass a formatted \u003cimg src=\"http://logonoid.com/images/json-logo.png\" height=\"20\"/\u003e JSON to a function and the animations begins !\n\n# Presentation\nJSONimate is a \u003cimg src=\"http://logonoid.com/images/jquery-logo.png\" height=\"20\"/\u003e jQuery library. You have to include jQuery first to be able to use JSONimate.\nThis 2D engine generates on the fly CSS properties and jQuery animations.\n\nYou can see some examples in the :file_folder:/examples folder or here : https://biok03.github.io/jsonimate/ \n\n# Architecture\nFolder / File | Description\n-------- | --------------\n⊢  :file_folder:/examples | Some examples files you have also access with de :pencil:/index.html file\n\u0026nbsp;\u0026nbsp;\u0026nbsp;⊢ :pencil:1 | Example 1 : A flying phone...\n\u0026nbsp;\u0026nbsp;\u0026nbsp;⊢ :pencil:2 | Example 2 : Carousel...\n\u0026nbsp;\u0026nbsp;\u0026nbsp;⊢ :pencil:3 | Example 3 : A running man...\n⊢  :file_folder:/images | The images folder\n\u0026nbsp;\u0026nbsp;\u0026nbsp;⊢ :pencil:logo.png | The JSONimate logo\n⊢  :file_folder:/jsonimate | The JSONimate folder\n\u0026nbsp;\u0026nbsp;\u0026nbsp;⊢ :pencil:jsonimate.css | The \u003cimg src=\"http://logonoid.com/images/css3-logo.png\" height=\"20\"/\u003e CSS sheet of JSONimate\n\u0026nbsp;\u0026nbsp;\u0026nbsp;⊢ :pencil:jsonimate.engine.js | The developer version of JSONimate\n\u0026nbsp;\u0026nbsp;\u0026nbsp;⊢ :pencil:jsonimate.engine.min.js | The production version of JSONimate\n⊢  :file_folder:/lib | The lib folder\n\u0026nbsp;\u0026nbsp;\u0026nbsp;⊢ :pencil:jquery.easing.js | The Easings library that permits to add effects (optional)\n\u0026nbsp;\u0026nbsp;\u0026nbsp;⊢ :pencil:jquery.min.js | The \u003cimg src=\"http://logonoid.com/images/jquery-logo.png\" height=\"20\"/\u003e jQuery production file ( :warning: required)\n⊢  :file_folder:/styles | The styles folder\n\u0026nbsp;\u0026nbsp;\u0026nbsp;⊢ :pencil:style.css | The \u003cimg src=\"http://logonoid.com/images/css3-logo.png\" height=\"20\"/\u003e CSS file of the project (purely optional)\n⊢  :pencil:Easing.url | Some documentation about the Easings library\n⊢  :pencil:gulpfile.js | The \u003cimg src=\"https://raw.githubusercontent.com/gulpjs/artwork/master/gulp-2x.png\" height=\"20\"/\u003e gulpfile worflow to automatically compress the JSONimate.engine.js file\n⊢  :pencil:index.html | The \u003cimg src=\"http://logonoid.com/images/html5-logo.png\" height=\"20\"/\u003e index file of the project\n⊢  :pencil:package.json | The \u003cimg src=\"https://docs.npmjs.com/images/npm.svg\" height=\"20\"/\u003e NPM file of the project\n\nThe \u003cimg src=\"https://raw.githubusercontent.com/gulpjs/artwork/master/gulp-2x.png\" height=\"20\"/\u003e Gulp workflow is purely optional, you can use online minifiers or use the developer version.\nIf so, don't use \u003cimg src=\"https://docs.npmjs.com/images/npm.svg\" height=\"20\"/\u003e NPM as it was included in the project only for \u003cimg src=\"https://raw.githubusercontent.com/gulpjs/artwork/master/gulp-2x.png\" height=\"20\"/\u003e Gulp !\n\n\n# Configuration\nAs long as JSONimate is a simple jQuery file, you juste need to start with a simple \u003cimg src=\"http://logonoid.com/images/html5-logo.png\" height=\"20\"/\u003e HTML file :\n``` html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003c!-- JSONimate CSS file (it just put a CSS reset and put CSS rules over .jsonimate and put #renderer in full screen), but required (at least the .jsonimate{...} rule !) --\u003e\n        \u003clink rel=\"stylesheet\" href=\"jsonimate/jsonimate.css\"/\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003c!-- The #renderer div is where the animation will be displayed --\u003e\n        \u003cdiv id=\"renderer\"\u003e\n\n        \u003c/div\u003e\n\n        \u003c!-- The required link to jQuery. You can also use CDN : \n         https://code.jquery.com/jquery-3.1.1.min.js --\u003e\n        \u003cscript type=\"text/javascript\" src=\"lib/jquery.min.js\"\u003e\u003c/script\u003e\n\n        \u003c!-- Easings is purely optional. Docs here : http://easings.net/fr --\u003e\n        \u003cscript type=\"text/javascript\" src=\"lib/jquery.easing.js\"\u003e\u003c/script\u003e\n\n        \u003c!-- JSONimate engine file --\u003e\n        \u003cscript type=\"text/javascript\" src=\"jsonimate/jsonimate.engine.min.js\"\u003e\u003c/script\u003e\n\n        \u003c!-- Your JS file --\u003e\n        \u003cscript type=\"text/javascript\" src=\"call.js\"\u003e\u003c/script\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\nDirects links :\n\n[jQuery CDN](https://code.jquery.com/jquery-3.1.1.min.js)\n\n[Easings Docs](http://easings.net/fr)\n\n\n# Writing your first JSONimate project\n\nFollow the simple steps :\n * Create an index.html file and paste the code in the previous section\n    * Download the jQuery file or use the CDN\n    * Choose to include Easings or not\n * Create a file called 'call.js' and paste the following code :\n\n``` javascript\n\n$json = {\n    \"ID\": {\n        \n        /* INITIAL STATE HERE */\n        \"states\": [\n            /* FOLLOWING STATES HERE */\n        ]\n    }\n};\n\njsonimate($json);\n```\n\nThe \"ID\" string corresponds to the id of the element that will be created and animated. It must be unique and must not be present in the initial \u003cimg src=\"http://logonoid.com/images/html5-logo.png\" height=\"20\"/\u003e HTML page.\n\n:warning: All options detailled below are mandatory !\n\n## Initial state\nThe initial state muse be defined at the beginning of the call.js file.\n\n```json\n\"image\": \"image.png\",\n\"repetition\": 2000,\n\"startPadding\": 0,\n\n\"startPosition\": {\n    \"x\": 10,\n    \"y\": 10\n},\n\"startAngle\": 0,\n\"startSize\": {\n    \"width\": 3,\n    \"height\": 3\n},\n```\n\n\n### Options\nName  | Description\n---- | ----\nimage | The picture to print at the start point\nrepetition | Delay between the animation end point and the restart of the animation, in ms. (-1 = no repetition)\nstartPadding | Delay before the animation start at the first time\nstartPosition | The position the image is printed at the start point (in %)\nstartAngle | Angle where the image is printed ( :warning: BETA)\nstartSize | The size of the picture befire the animation starts (in %)\n\n## Following states\nA following state is an object that must be paste inside the state[] array inside the call.js file.\n\n:heavy_exclamation_mark: The order inside the states[] array is the order of the animation !\n\nA following state is like this bunch of code :\n\n```json\n{\n    \"startImage\": \"\",\n    \"endPos\": {\n        \"x\": 20,\n        \"y\": 10\n    },\n    \"endAngle\": 179,\n    \"endSize\": {\n        \"width\": 3,\n        \"height\": 3\n    },\n    \n    \"animationType\": \"linear\",\n    \"animationTime\": 2000,\n    \"endPaddingTime\": 0\n},\n```\n\n### Options\n\nName | Description\n--- | ---\nstartImage | The image set at the beginning of the state (if you d'ont want to change image, put \"\")\nendPos | The end position at the end of the state (in %)\nendAngle | The angle at the end of the state ( :warning: BETA)\nendSize | The size of the picture at the end of the state (in %)\nanimationType | The type of animation to play. With jQuery, you have swing or linear. With Easings, you can have different types of animations ! (Docs : http://easings.net/fr)\nanimationTime | The time of the animation (in ms)\nendPaddingTime | The time before the next animation starts (for the last state : time before the animation restarts if repetition \u003e 0)\n\n\n\n# Credits\n\nLogos here are from [Logonoid](http://logonoid.com/) or official docs !\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbchoubert%2Fjsonimate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbchoubert%2Fjsonimate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbchoubert%2Fjsonimate/lists"}