{"id":16382339,"url":"https://github.com/devforth/scriptimate","last_synced_at":"2025-03-16T16:30:32.421Z","repository":{"id":45217593,"uuid":"325387392","full_name":"devforth/scriptimate","owner":"devforth","description":"OpenSource SVG animation tool: Animate qualitative SVG files (e.g. exported from Figma or any other vector image editor) with simple scripting language and compile them into WEBM/MP4/GIF","archived":false,"fork":false,"pushed_at":"2022-12-29T14:55:45.000Z","size":6760,"stargazers_count":51,"open_issues_count":5,"forks_count":7,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-22T21:48:04.227Z","etag":null,"topics":["animate","animation","animation-engine","animations","ffmpeg","gif","gifs","mp4-video","scripting","video"],"latest_commit_sha":null,"homepage":"https://tracklify.com/blog/scriptimate-an-open-source-tool-to-create-svg-animations-in-a-coding-way/","language":"HTML","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/devforth.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}},"created_at":"2020-12-29T21:08:27.000Z","updated_at":"2024-09-04T20:45:25.000Z","dependencies_parsed_at":"2023-01-31T09:15:41.305Z","dependency_job_id":null,"html_url":"https://github.com/devforth/scriptimate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devforth%2Fscriptimate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devforth%2Fscriptimate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devforth%2Fscriptimate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devforth%2Fscriptimate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devforth","download_url":"https://codeload.github.com/devforth/scriptimate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221665769,"owners_count":16860310,"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":["animate","animation","animation-engine","animations","ffmpeg","gif","gifs","mp4-video","scripting","video"],"created_at":"2024-10-11T04:05:01.576Z","updated_at":"2024-10-27T10:53:46.340Z","avatar_url":"https://github.com/devforth.png","language":"HTML","readme":"\n\u003e 🙏🙏🙏 Scream for help to Ukraine 🇺🇦\n\u003e \n\u003e This alert created by company based in Ukraine from shelter.\n\u003e \n\u003e 24 February 2022, Russia started bombing cities with peacefully civilized population in whole Ukraine. Breaking the laws of war. Their bombs has been killing children and adults. This deserves Hague court.\n\u003e - 🏠 If you are from Russia, please stop your government by any means including protests, don't trust local media, they are bribed by the government. They always was. I am sure you already feel lie by unexplainable crazy things in your country caused by world sanctions.\n\u003e - 💣 Please spread the information about bombing of Ukraine in all social way you could. Russia treacherously broke into the territory of a sovereign state. Do not trust to anything from Russian media, most likely it will be bullshit\n\u003e - 💼 If you have any kind of business cooperation with Russia, please block it now and keep most of money on your side, this is the only possible ethical decision\n\u003e - ☢️ Ask your government to stop Russia from spreading invasion in any way. Russia is nuclear threat to the whole world. You think it is not possible? We thought that bombing of independent country with population of 44.13 million is also not possible.\n\n\n# Scriptimate – OpenSource svg animation tool\n\nCreate webm/mp4/gif videos by animating qualitative SVG files (e.g. exported from Figma or any other vector image editor).\n\n\u003e ⚠️ for now Supported Node version is 16+ (Probably 14, but 12 is not working)\n\nWorks on on 🪟Windows WSL 2 🐧Ubuntu 🍏Mac\n\n\n## Typical example\n\nCreate text file `demo.smte`:\n\n```\nset_frame_size 600 300\nplace boomerang 0 100\nanimate_1000 move boomerang 400 - \u0026\u0026 rotate boomerang 720 \u0026\u0026 scale boomerang 2\n```\n\nPlace `boomerang.svg` into `src/` folder. E.g. this one: [boomerang.svg](./examples/src/boomerang.svg)\n\nExecute scriptimate to compile video:\n\n```\nnpx scriptimate@latest -i demo.smte -f gif\n```\n\nYou will get:\n\n![](./examples/3_parallel_animations.gif)\n\n[Read guide here](https://tracklify.com/blog/scriptimate-an-open-source-tool-to-create-svg-animations-in-a-coding-way/)\n\n## Prerequirements \n\nYou need to have next packages on your system (works for Ubuntu and [Windows WSL2](https://hinty.io/devforth/how-to-install-wsl-2-best-way-to-run-real-linux-on-windows/)):\n\n```\nsudo apt install libnss3-dev libatk-bridge2.0-0 libcups2 libgtk-3-0 libgbm-dev ffmpeg\n```\n\n( All apart `ffmpeg` required to run pupeeter which is used to generate high-qaulity frames, some taken from here https://gist.github.com/winuxue/cfef08e2f5fe9dfc16a1d67a4ad38a01 )\n\nRequired version of `ffmpeg \u003e=4.x` (Will be installed automatically in Ubuntu 20.04+, when in 18.04 it will be 3.x, which is not compatible)\n\nIf you are using custom changable texts, please make sure you have all fonts that you use in styles installed into OS, e.g. on Ubuntu:\n\n```\nsudo apt install fonts-roboto fonts-open-sans\n```\n\n## Getting started\n\nIf you want to start using scriptimate, please read carefully these 2 posts:\n\n* [Getting started with Scriptimate on Tracklify Blog](https://tracklify.com/blog/scriptimate-an-open-source-tool-to-create-svg-animations-in-a-coding-way/)\n* [Figma exort hints on hinty.io](https://hinty.io/ivictbor/prepare-figma-exports-for-scriptimate/)\n\n\n## How to run examples from this repo\n\n1. Pull the repo\n2. `cd example`\n3. Execute `npx scriptimate -i 1_helloworld.smte`\n\n\n\n# .smte syntax\n\nPlease start with reading [scriptimate getting started blog post](https://tracklify.com/blog/scriptimate-an-open-source-tool-to-create-svg-animations-in-a-coding-way/).\nThis reference could be used for advanced use-cases.\n\nSupported commands:\n\n## place: Place part\n\nPart is svg file which is basic part of animation.\nFilename should slug-compatible (latin, no spaces, etc).\nAlso this filename is used as id of part anywhere\n\n```\nplace \u003csvg file name without .svg\u003e \u003cleft cord\u003e \u003ctop cord\u003e \u003c[optional] opcaity: 0-1\u003e \u003c[optional] scale\u003e \u003c[optional] whichBoxHoleToAdd\u003e \u003c[optional] dashOffset\u003e\n```\n\nExample:\nPlace cursor.svg at 400 120:\n```\nplace cursor 400 120\n```\n\n\n\n## place_div: place a div\n\nUsecases:\n* dynamically change content of div via schedule_eval\n* appear some content on page\n\n```\nplace_div \u003cid of div (any slug)\u003e \u003cleft cord\u003e \u003ctop cord\u003e \u003cwidth\u003e \u003cheight\u003e \u003c[optional] opcaity 0-1\u003e \u003c[optional] content of div\u003e \u003c[optional] whichBoxHoleToAdd\u003e\n```\n\n## place_boxhole: place boxhole\n\nBoxhole is a rectangle zone on page which relatively places parts in it with hidden overflow (with ability to hide out of the box and then slide to zone) \n\n```\nplace_boxhole \u003cleft cord\u003e \u003ctop cord\u003e \u003cwidth\u003e \u003cheight\u003e\n```\n\n## addstyle: add style to part or div\n\n``` \naddstyle \u003csvg name or id of div\u003e \u003ccss styles without spaces, e.g.: \"color:white;font-family:'OpenSans'\"\u003e\n```\n\n## moveToTop: move some part to top over all elements\n\n```\nmoveToTop \u003csvg name\u003e\n```\n\nExample:\n\n```\nmoveToTop cursor\n```\n\n## schedule_eval: schedule running of JavaScript\n\n```\nschedule_eval \u003cid of interval\u003e \u003cinterval in ms\u003e \u003cjavascript code\u003e\n```\n\nExample:\n\n```\n# schedule_eval task_time 10 incr('task_time_secs', 2); if (+get('task_time_secs') \u003e= 60) { incr('task_time_mins'); set('task_time_secs', 0)}\n```\n\n## animate_xxx: apply animators during xxx milliseconds\n\nYou can pass one or multiple animators(via '\u0026\u0026'). \nIf multiple animators are specified they will be executed in parallel\n\n\n```\nanimate_\u003cduration in ms\u003e \u003canimator 1\u003e \u003c[optional] mode\u003e [args of animator 1]  \u0026\u0026 \u003canimator 2\u003e \u003c[optional] mode\u003e [args of animator 2] and so on\n```\n\n`mode`: could be one of:\n* linear (default)\n* easein\n* easeout\n* easeinout\n\nAvailable animators:\n\n### pause : do nothing, just wait (sleep)\n\n```\npause\n```\n\nExample: sleep for 3.5 seconds:\n\n```\nanimate_3500 pause\n```\n\n### move: move part\n\n```\nmove \u003csvg name\u003e \u003c[optional] mode\u003e \u003ctarget left\u003e \u003ctarget top\u003e\n```\n\n### scale: scale part\n\n```\nscale \u003csvg name\u003e \u003c[optional] mode\u003e \u003ctarget scale factor\u003e \u003cscale origin\u003e\n```\n\n`\u003cscale origin\u003e` is css transform-origin, could be e.g.\n\n* center (default)\n* top left\n* bottom right\n* etc\n\n### rotate: rotate part\n\n```\nrotate \u003csvg name\u003e \u003c[optional] mode\u003e \u003ctarget rotate deg\u003e \u003cscale origin\u003e\n```\n\n### opacity: change part opacity\n\n```\nopacity \u003csvg name\u003e \u003c[optional] mode\u003e \u003ctarget opacity 0 - 1\u003e\n```\n\n### dashoffset: change dash offset\n\nUsed to draw strokes. Added by [@maxm123](https://github.com/maxm123)\n\n\n```\ndashoffset \u003csvg name\u003e \u003c[optional] mode\u003e \u003ctarget dashoffset\u003e\n```\n\n### resize_div\n\nCould be used to create animated bars.\nThis animator only changes width and height css attributes, so div should have display:flex or something added via `addstyle`.\n```\nresize_div \u003cdiv_name\u003e \u003cdestination width\u003e \u003cdestination height\u003e\n```\n\n\n\n# define_group: define group of commands\n\nCould be used to define several parallel complex scenarious.\n\n```\ndefine_group \u003cgroup name, slug compatable\u003e:\n  \u003ccommand 1\u003e command args\n  \u003ccommand 2\u003e command args\n  etc\n\n```\n\nThen `run_groups_together` should be used to start them\n\n```\nrun_groups_together \u003cgroup name 1\u003e \u003cgroup name 2\u003e etc.\n```\n\nExample: \n\n```\ndefine_group scenario1:\n  animate_1000 move easein boomerang1 270 -\n  animate_2000 move easeout boomerang1 $frameW-$boomerang1__WIDTH $frameH-$boomerang1__HEIGHT\n\n\ndefine_group scenario2:\n  animate_1000 move boomerang2 250 -\n  animate_1000 pause\n  animate_1000 move boomerang2 $frameW-$boomerang1__WIDTH 0\n\ndefine_group rotator:\n  animate_3000 rotate boomerang1 360*4 \u0026\u0026 rotate boomerang2 360*5\n\nrun_groups_together scenario1 scenario2 rotator\n```\n\n\n# Constants\n\nAnywhere in smte you can define a constant with using:\n\n```\nconst \u003cslug compatible constant name\u003e=\u003cconstant value\u003e\n```\n\nExample:\n\n```\nconst $PositionX=600 $underLocation=300\n```\n\n## Built-in constants\n\nWhen part is added there are internal constants\n\n```\n$\u003cpart name\u003e__WIDTH    # width of SVG part in px\n$\u003cpart name\u003e__HEIGHT   # height of SVG part in px\n$\u003cpart name\u003e__LEFT     # current left coordinate of SVG part in px\n$\u003cpart name\u003e__TOP      # current top coordinate of SVG part in px\n```\nThey return dimensions of SVG image.\n\nExample. Place cake.svg and plate.svg directly under it:\n\n```\nplace cake 0 0 \nplace plate 0 $cake__HEIGHT\n```\n\n\n## Advanced ussage\n\nUnder the hood next commands are used:\n\n```\nffmpeg -framerate 25/1 -i frames/%07d.jpg -c:v libx264 -r 25 out.mp4 -y\n```\n\nOr for webm:\n\n```\nffmpeg -framerate 25/1 -i frames/%07d.jpg -c:v libvpx-vp9 -b:v 2M -r 25 out.webm -y\n```\n\nAfter generation phace we frames folder will be persisted so feel free to change ffmpeg command in any way you want to produce some exotic format.\n\n\n\n\n## CLI reference\n\n\nAfter installing just use:\n\n```\nscriptimate -h\n```\n\nTo show all available options.\n\n```\nusage: scriptimate.js [-h] [-v] [-f FORMAT] [-i INPUT] [-fn FILENAME] [-t THREADS] [-fs FROMSECOND] [-d DEBUGHTML] [-bd BASEDIR]\n                      [-fps FPS] [-if INTERMEDIATEFORMAT] [-ijq INTERMEDIATEJPEGQUALITY] [-nc NOCACHE]\n\nScriptimate v1.2.18\n\noptional arguments:\n  -h, --help            show this help message and exit\n  -v, --version         show program's version number and exit\n  -f FORMAT, --format FORMAT\n                        output file format, or multiple via comma: \"webm,mp4\". Available formats: mov, mp4, gif, webm, default\n                        is mp4\n  -i INPUT, --input INPUT\n                        Input .smte script file\n  -fn FILENAME, --filename FILENAME\n                        output filename\n  -t THREADS, --threads THREADS\n                        Threads count used during compiling, defaults to 4\n  -fs FROMSECOND, --fromsecond FROMSECOND\n                        Start from defined second (could be used to debug animation faster, also you can use \"exis\" keyword in\n                        smte script)\n  -d DEBUGHTML, --debughtml DEBUGHTML\n                        Create HTML files near image to debug\n  -bd BASEDIR, --basedir BASEDIR\n                        Input directory (folder where src subfolder and .smte file is located)\n  -fps FPS, --fps FPS   FPS\n  -if INTERMEDIATEFORMAT, --intermediateFormat INTERMEDIATEFORMAT\n                        Screenshots format used to compile video png|jpeg, defaults to png\n  -ijq INTERMEDIATEJPEGQUALITY, --intermediateJpegQuality INTERMEDIATEJPEGQUALITY\n                        JPEG quality 0.0 - 1.0, defaults to 1\n  -nc NOCACHE, --nocache NOCACHE\n                        Don't use screenshots cache (but still generate it), for scriptimate develeopmnt\n```\n\n# Build performance\n\n🪧 Scriptimate uses `/tmp` to store build cache, so to improve build speed even more, make sure `/tmp` is mounted on RAM in `/etc/fstab`\n\n```\ntmpfs /tmp tmpfs nosuid,nodev,noatime 0 0\n```\n\n\n\u003e ⚠️ If you made changes out of project sources (e.g. updated sytem font and re-built video), and see there are no updates in results, please use no cache parameter (`-nc 1`)\n\n# Development\n\nJust do:\n\n```\nnpm ci\ncd examples\nnode ../bin/scriptimate.js -i 7_dashoffset.smte -f gif\n```\n\n## Known bugs and improvements\n\n* HTML Pages gen xx% shows more then 100% if run_groups_together is used. Only visual status bug, compiled video is correct\n* HTML pages generation process is not cached and not parallelized.\n* boxhole should be removed, instead we should specify div id and count relational coordinates from div\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevforth%2Fscriptimate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevforth%2Fscriptimate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevforth%2Fscriptimate/lists"}