{"id":13746893,"url":"https://github.com/Inventsable/Readable-Lottie","last_synced_at":"2025-05-09T08:30:36.048Z","repository":{"id":42179925,"uuid":"223865609","full_name":"Inventsable/Readable-Lottie","owner":"Inventsable","description":"Convert any Lottie/Bodymovin file to a dev-friendly, human-readable, near 1:1 parallel of AE structure","archived":false,"fork":false,"pushed_at":"2019-11-27T04:30:36.000Z","size":43,"stargazers_count":10,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-22T20:31:03.123Z","etag":null,"topics":["adobe","adobe-after-effects","after-effects","bodymovin","lottie"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Inventsable.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-25T05:07:27.000Z","updated_at":"2024-01-16T02:49:55.000Z","dependencies_parsed_at":"2022-09-19T22:30:23.587Z","dependency_job_id":null,"html_url":"https://github.com/Inventsable/Readable-Lottie","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/Inventsable%2FReadable-Lottie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inventsable%2FReadable-Lottie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inventsable%2FReadable-Lottie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inventsable%2FReadable-Lottie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Inventsable","download_url":"https://codeload.github.com/Inventsable/Readable-Lottie/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224842537,"owners_count":17378987,"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":["adobe","adobe-after-effects","after-effects","bodymovin","lottie"],"created_at":"2024-08-03T06:01:03.836Z","updated_at":"2024-11-15T20:30:44.478Z","avatar_url":"https://github.com/Inventsable.png","language":"JavaScript","readme":"# readable-lottie\n\nConvert a Lottie file to a dev-friendly, near 1:1 parallel of an After Effects file.\n\n## Usage\n\n```bash\n# coming soon\n```\n\n## Goals\n\n- Convert any Lottie file to a more verbose, easier to debug, and human-readable version\n- Allow conversion from Lottie =\u003e Readable-Lottie and Readable-Lottie =\u003e Lottie\n- Create a library of methods for crawling through or modifying a Readable-Lottie file, similar to the After Effects Scripting API.\n- Generate `lottiePath` string for every readable prop/attribute, so devs can know the direct route to access any readable prop within the original Lottie file\n- Use Readable-Lottie as the foundation of browser Lottie file editors\n- Use Readable-Lottie as the foundation for a Reverse-Lottie panel, allowing you to drag and drop a Lottie file and construct it from scratch at the click of a button in After Effects\n\n## Example\n\nA basic Lottie file with a single group, 3 shapes, and 3 keyframes is very esoteric and hard to understand:\n\n```json\n{\n  \"v\": \"5.5.9\",\n  \"fr\": 30,\n  \"ip\": 0,\n  \"op\": 41,\n  \"w\": 960,\n  \"h\": 560,\n  \"nm\": \"Comp 2\",\n  \"ddd\": 0,\n  \"assets\": [],\n  \"layers\": [\n    {\n      \"ddd\": 0,\n      \"ind\": 1,\n      \"ty\": 4,\n      \"nm\": \"groupTest\",\n      \"sr\": 1,\n      \"ks\": {\n        \"o\": {\n          \"a\": 0,\n          \"k\": 100,\n          \"ix\": 11\n        },\n        \"r\": {\n          \"a\": 0,\n          \"k\": 0,\n          \"ix\": 10\n        },\n        \"p\": {\n          \"a\": 1,\n          \"k\": [\n            {\n              \"i\": {\n                \"x\": 0.833,\n                \"y\": 0.833\n              },\n              \"o\": {\n                \"x\": 0.167,\n                \"y\": 0.167\n              },\n              \"t\": 0,\n              \"s\": [300, 219, 0],\n              \"to\": null,\n              \"ti\": null\n            },\n            {\n              \"i\": {\n                \"x\": 0.833,\n                \"y\": 0.833\n              },\n              \"o\": {\n                \"x\": 0.167,\n                \"y\": 0.167\n              },\n              \"t\": 20,\n              \"s\": [300, 115, 0],\n              \"to\": null,\n              \"ti\": null\n            },\n            {\n              \"t\": 40,\n              \"s\": [300, 219, 0]\n            }\n          ],\n          \"ix\": 2\n        },\n        \"a\": {\n          \"a\": 0,\n          \"k\": [86, -182, 0],\n          \"ix\": 1\n        },\n        \"s\": {\n          \"a\": 0,\n          \"k\": [100, 100, 100],\n          \"ix\": 6\n        }\n      },\n      \"ao\": 0,\n      \"shapes\": [\n        {\n          \"ty\": \"gr\",\n          \"it\": [\n            {\n              \"ty\": \"rc\",\n              \"d\": 1,\n              \"s\": {\n                \"a\": 0,\n                \"k\": [23.531, 23.531],\n                \"ix\": 2\n              },\n              \"p\": {\n                \"a\": 0,\n                \"k\": [86, -182],\n                \"ix\": 3\n              },\n              \"r\": {\n                \"a\": 0,\n                \"k\": 0,\n                \"ix\": 4\n              },\n              \"nm\": \"Rectangle Path 1\",\n              \"mn\": \"ADBE Vector Shape - Rect\",\n              \"hd\": false,\n              \"_render\": true\n            },\n            {\n              \"ty\": \"fl\",\n              \"c\": {\n                \"a\": 0,\n                \"k\": [0.698039233685, 0.698039233685, 0.278431385756, 1],\n                \"ix\": 4\n              },\n              \"o\": {\n                \"a\": 0,\n                \"k\": 100,\n                \"ix\": 5\n              },\n              \"r\": 1,\n              \"bm\": 0,\n              \"nm\": \"Fill 1\",\n              \"mn\": \"ADBE Vector Graphic - Fill\",\n              \"hd\": false,\n              \"_render\": true\n            }\n          ],\n          \"nm\": \"Group 1\",\n          \"np\": 2,\n          \"cix\": 2,\n          \"bm\": 0,\n          \"ix\": 1,\n          \"mn\": \"ADBE Vector Group\",\n          \"hd\": false,\n          \"_render\": true\n        },\n        {\n          \"ty\": \"gr\",\n          \"it\": [\n            {\n              \"ty\": \"rc\",\n              \"d\": 1,\n              \"s\": {\n                \"a\": 0,\n                \"k\": [51.564, 51.564],\n                \"ix\": 2\n              },\n              \"p\": {\n                \"a\": 0,\n                \"k\": [86, -182],\n                \"ix\": 3\n              },\n              \"r\": {\n                \"a\": 0,\n                \"k\": 0,\n                \"ix\": 4\n              },\n              \"nm\": \"Rectangle Path 1\",\n              \"mn\": \"ADBE Vector Shape - Rect\",\n              \"hd\": false,\n              \"_render\": true\n            },\n            {\n              \"ty\": \"fl\",\n              \"c\": {\n                \"a\": 0,\n                \"k\": [0.525490224361, 0.262745112181, 0.262745112181, 1],\n                \"ix\": 4\n              },\n              \"o\": {\n                \"a\": 0,\n                \"k\": 100,\n                \"ix\": 5\n              },\n              \"r\": 1,\n              \"bm\": 0,\n              \"nm\": \"Fill 1\",\n              \"mn\": \"ADBE Vector Graphic - Fill\",\n              \"hd\": false,\n              \"_render\": true\n            }\n          ],\n          \"nm\": \"Group 2\",\n          \"np\": 2,\n          \"cix\": 2,\n          \"bm\": 0,\n          \"ix\": 2,\n          \"mn\": \"ADBE Vector Group\",\n          \"hd\": false,\n          \"_render\": true\n        },\n        {\n          \"ty\": \"gr\",\n          \"it\": [\n            {\n              \"ty\": \"rc\",\n              \"d\": 1,\n              \"s\": {\n                \"a\": 0,\n                \"k\": [94, 94],\n                \"ix\": 2\n              },\n              \"p\": {\n                \"a\": 0,\n                \"k\": [86, -182],\n                \"ix\": 3\n              },\n              \"r\": {\n                \"a\": 0,\n                \"k\": 0,\n                \"ix\": 4\n              },\n              \"nm\": \"Rectangle Path 1\",\n              \"mn\": \"ADBE Vector Shape - Rect\",\n              \"hd\": false,\n              \"_render\": true\n            },\n            {\n              \"ty\": \"fl\",\n              \"c\": {\n                \"a\": 0,\n                \"k\": [0.698039233685, 0.698039233685, 0.278431385756, 1],\n                \"ix\": 4\n              },\n              \"o\": {\n                \"a\": 0,\n                \"k\": 100,\n                \"ix\": 5\n              },\n              \"r\": 1,\n              \"bm\": 0,\n              \"nm\": \"Fill 1\",\n              \"mn\": \"ADBE Vector Graphic - Fill\",\n              \"hd\": false,\n              \"_render\": true\n            }\n          ],\n          \"nm\": \"Group 3\",\n          \"np\": 2,\n          \"cix\": 2,\n          \"bm\": 0,\n          \"ix\": 3,\n          \"mn\": \"ADBE Vector Group\",\n          \"hd\": false,\n          \"_render\": true\n        }\n      ],\n      \"ip\": 0,\n      \"op\": 41,\n      \"st\": 0,\n      \"bm\": 0,\n      \"completed\": true\n    }\n  ],\n  \"markers\": [],\n  \"__complete\": true\n}\n```\n\nThe Readable-Lottie version of this same file, though far more verbose and consequently larger, is meant to be much more easily understood by whoever needs to look at this code:\n\n```json\n{\n  \"name\": \"Comp 2\",\n  \"lottieVersion\": \"5.5.9\",\n  \"width\": 960,\n  \"height\": 560,\n  \"frameRate\": 30,\n  \"firstFrame\": 0,\n  \"lastFrame\": 41,\n  \"assets\": [],\n  \"duration\": \"1:10\",\n  \"layers\": [\n    {\n      \"name\": \"groupTest\",\n      \"Contents\": {\n        \"Group 1\": {\n          \"type\": \"Group\",\n          \"children\": {\n            \"Rectangle Path 1\": {\n              \"type\": \"Rectangle\",\n              \"name\": \"Rectangle Path 1\",\n              \"matchName\": \"ADBE Vector Shape - Rect\",\n              \"hidden\": false\n            },\n            \"Fill 1\": {\n              \"type\": \"Fill\",\n              \"color\": {\n                \"animated\": 0,\n                \"propertyIndex\": 4,\n                \"value\": \"#b2b247\"\n              },\n              \"opacity\": {\n                \"animated\": 0,\n                \"propertyIndex\": 5,\n                \"value\": 100\n              },\n              \"blendMode\": 0,\n              \"name\": \"Fill 1\",\n              \"matchName\": \"ADBE Vector Graphic - Fill\",\n              \"hidden\": false\n            }\n          },\n          \"name\": \"Group 1\",\n          \"numProps\": 2,\n          \"propertyIndexAlt\": 2,\n          \"blendMode\": 0,\n          \"propertyIndex\": 1,\n          \"matchName\": \"ADBE Vector Group\",\n          \"hidden\": false,\n          \"Transform\": {\n            \"position\": {\n              \"value\": [0, 0]\n            },\n            \"anchorPoint\": {\n              \"value\": [0, 0]\n            },\n            \"scale\": {\n              \"value\": [100, 100]\n            },\n            \"rotation\": {\n              \"value\": 0\n            },\n            \"opacity\": {\n              \"value\": 100\n            }\n          }\n        },\n        \"Group 2\": {\n          \"type\": \"Group\",\n          \"children\": {\n            \"Rectangle Path 1\": {\n              \"type\": \"Rectangle\",\n              \"name\": \"Rectangle Path 1\",\n              \"matchName\": \"ADBE Vector Shape - Rect\",\n              \"hidden\": false\n            },\n            \"Fill 1\": {\n              \"type\": \"Fill\",\n              \"color\": {\n                \"animated\": 0,\n                \"propertyIndex\": 4,\n                \"value\": \"#864343\"\n              },\n              \"opacity\": {\n                \"animated\": 0,\n                \"propertyIndex\": 5,\n                \"value\": 100\n              },\n              \"blendMode\": 0,\n              \"name\": \"Fill 1\",\n              \"matchName\": \"ADBE Vector Graphic - Fill\",\n              \"hidden\": false\n            }\n          },\n          \"name\": \"Group 2\",\n          \"numProps\": 2,\n          \"propertyIndexAlt\": 2,\n          \"blendMode\": 0,\n          \"propertyIndex\": 2,\n          \"matchName\": \"ADBE Vector Group\",\n          \"hidden\": false,\n          \"Transform\": {\n            \"position\": {\n              \"value\": [0, 0]\n            },\n            \"anchorPoint\": {\n              \"value\": [0, 0]\n            },\n            \"scale\": {\n              \"value\": [100, 100]\n            },\n            \"rotation\": {\n              \"value\": 0\n            },\n            \"opacity\": {\n              \"value\": 100\n            }\n          }\n        },\n        \"Group 3\": {\n          \"type\": \"Group\",\n          \"children\": {\n            \"Rectangle Path 1\": {\n              \"type\": \"Rectangle\",\n              \"name\": \"Rectangle Path 1\",\n              \"matchName\": \"ADBE Vector Shape - Rect\",\n              \"hidden\": false\n            },\n            \"Fill 1\": {\n              \"type\": \"Fill\",\n              \"color\": {\n                \"animated\": 0,\n                \"propertyIndex\": 4,\n                \"value\": \"#b2b247\"\n              },\n              \"opacity\": {\n                \"animated\": 0,\n                \"propertyIndex\": 5,\n                \"value\": 100\n              },\n              \"blendMode\": 0,\n              \"name\": \"Fill 1\",\n              \"matchName\": \"ADBE Vector Graphic - Fill\",\n              \"hidden\": false\n            }\n          },\n          \"name\": \"Group 3\",\n          \"numProps\": 2,\n          \"propertyIndexAlt\": 2,\n          \"blendMode\": 0,\n          \"propertyIndex\": 3,\n          \"matchName\": \"ADBE Vector Group\",\n          \"hidden\": false,\n          \"Transform\": {\n            \"position\": {\n              \"value\": [0, 0]\n            },\n            \"anchorPoint\": {\n              \"value\": [0, 0]\n            },\n            \"scale\": {\n              \"value\": [100, 100]\n            },\n            \"rotation\": {\n              \"value\": 0\n            },\n            \"opacity\": {\n              \"value\": 100\n            }\n          }\n        }\n      },\n      \"Transform\": {\n        \"opacity\": {\n          \"value\": 100\n        },\n        \"rotation\": {\n          \"value\": 0\n        },\n        \"position\": {\n          \"value\": {\n            \"bezierIn\": {\n              \"x\": 0.833,\n              \"y\": 0.833\n            },\n            \"bezierOut\": {\n              \"x\": 0.167,\n              \"y\": 0.167\n            },\n            \"startTime\": 40,\n            \"startValue\": [300, 219, 0],\n            \"inTangent\": null,\n            \"outTangent\": null\n          }\n        },\n        \"anchorPoint\": {\n          \"value\": [86, -182, 0]\n        },\n        \"scale\": {\n          \"value\": [100, 100, 100]\n        }\n      }\n    }\n  ]\n}\n```\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInventsable%2FReadable-Lottie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FInventsable%2FReadable-Lottie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInventsable%2FReadable-Lottie/lists"}