diff --git a/dev/index.html b/dev/index.html index fc80f21..aca3005 100644 --- a/dev/index.html +++ b/dev/index.html @@ -446,5 +446,5 @@ diff --git a/dev/lottie.schema.json b/dev/lottie.schema.json index 9aa55e7..5253b46 100644 --- a/dev/lottie.schema.json +++ b/dev/lottie.schema.json @@ -1,8 +1,8 @@ { "$schema": "https://json-schema.org/draft/2020-12/schema", - "$id": "https://lottie.github.io/lottie-spec/specs/schema/0.1.0", + "$id": "https://lottie.github.io/lottie-spec/1.0/specs/schema/", "$ref": "#/$defs/composition/animation", - "$version": 100, + "$version": 10000, "$defs": { "assets": { "precomposition": { @@ -143,7 +143,7 @@ "title": "Specification Version", "description": "Specification version this Lottie is targeting. This is a 6 digit number with version components encoded as `MMmmpp`, with `MM` being major version, `mm` being minor and `pp` being patch.", "type": "integer", - "minimum": 100 + "minimum": 10000 }, "fr": { "title": "Framerate", diff --git a/dev/search/search_index.json b/dev/search/search_index.json index 932bb55..5352324 100644 --- a/dev/search/search_index.json +++ b/dev/search/search_index.json @@ -1 +1 @@ -{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Lottie Animation Format Welcome to the official documentation for Lottie, a JSON-based format for animated vector graphics. This manual contains formal specification and documentation for the Lottie file format, offering insights into its structure and features. The main target audience for this manual are developers that want to create tools within the Lottie ecosystem as it provides details about the JSON internals. Status of this manual The Lottie specification is still a work in progress, this document contains a subset of features that have been approved by the Lottie Animation Community. The documentation and specs will be expanded as more of the Lottie format becomes standardized. Once the draft is complete, there will be an announcement by the Lottie Animation Community. Conventions The key words \" MUST \", \" MUST NOT \", \" REQUIRED \", \" SHALL \", \" SHALL NOT \", \" SHOULD \", \" SHOULD NOT \", \" RECOMMENDED \", \" NOT RECOMMENDED \", \" MAY \", and \" OPTIONAL \" in this document are to be interpreted as described in BCP 14 [ RFC2119 ] [ RFC8174 ] when, and only when, they appear in all capitals, as shown here. Document Structure Lottie documents MUST use JSON [ RFC8259 ] to structure their data. The top-level object in a Lottie document MUST be an Animation object. Implementation MAY store additional data in the JSON objects. A machine-readable specification of the JSON structure is available as JSON Schema . Where to start Since Lottie uses JSON, basic JSON knowledge is required to understand the specification. To understand Lottie data, it's useful to start learning about basic values and animated properties . The root object of any Lottie animation is the Animation object. A printable single-page version of the specification is available here . var lottie_player_0 = new LottiePlayer( 'lottie_target_0', 'static/logo.json', true, {\"loop\": \"false\"} );","title":"Home"},{"location":"#lottie-animation-format","text":"Welcome to the official documentation for Lottie, a JSON-based format for animated vector graphics. This manual contains formal specification and documentation for the Lottie file format, offering insights into its structure and features. The main target audience for this manual are developers that want to create tools within the Lottie ecosystem as it provides details about the JSON internals.","title":"Lottie Animation Format"},{"location":"#status-of-this-manual","text":"The Lottie specification is still a work in progress, this document contains a subset of features that have been approved by the Lottie Animation Community. The documentation and specs will be expanded as more of the Lottie format becomes standardized. Once the draft is complete, there will be an announcement by the Lottie Animation Community.","title":"Status of this manual"},{"location":"#conventions","text":"The key words \" MUST \", \" MUST NOT \", \" REQUIRED \", \" SHALL \", \" SHALL NOT \", \" SHOULD \", \" SHOULD NOT \", \" RECOMMENDED \", \" NOT RECOMMENDED \", \" MAY \", and \" OPTIONAL \" in this document are to be interpreted as described in BCP 14 [ RFC2119 ] [ RFC8174 ] when, and only when, they appear in all capitals, as shown here.","title":"Conventions"},{"location":"#document-structure","text":"Lottie documents MUST use JSON [ RFC8259 ] to structure their data. The top-level object in a Lottie document MUST be an Animation object. Implementation MAY store additional data in the JSON objects. A machine-readable specification of the JSON structure is available as JSON Schema .","title":"Document Structure"},{"location":"#where-to-start","text":"Since Lottie uses JSON, basic JSON knowledge is required to understand the specification. To understand Lottie data, it's useful to start learning about basic values and animated properties . The root object of any Lottie animation is the Animation object. A printable single-page version of the specification is available here . var lottie_player_0 = new LottiePlayer( 'lottie_target_0', 'static/logo.json', true, {\"loop\": \"false\"} );","title":"Where to start"},{"location":"editing/extensions/","text":"Markdown Extensions This documentation comes with several markdown extensions that allow interactive elements and data pulled from the schema. Schema Integration schema_string Using a reference to a value in the JSON schema (without $defs ) will embed that string into the markdown text. Example: {schema_string:shapes/graphic-element/description} Output: Element used to display vector data in a shape layer link Links to the relevant section in the specs. Example: {link:shapes/ellipse} Output: View Schema schema_link Link to the relevant section in the formatted schema. Example: {schema_link:shapes/ellipse} Output: View Schema schema_subtype_table Used to list all the ty values for Layer / Shape etc. Example: {schema_subtype_table:layers/all-layers:ty} Output: ty Type 0 Precomposition Layer 2 Image Layer 3 Null Layer 1 Solid Layer 4 Shape Layer None Unknown layer types schema_object Embeds a property table from the schema. Example: {schema_object:shapes/ellipse} Output: Composition Diagram for Ellipse Ellipse Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'el' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Position s Vector Size Size schema_enum Same as schema_object but for enumerations. Example: {schema_enum:fill-rule} Output: Value Name Description 1 Non Zero Everything is colored (You can think of this as an OR) 2 Even Odd Colored based on intersections and path direction, can be used to create \"holes\" schema_inheritance Shows the inheritance diagram for an object type. Example: {schema_inheritance:shapes/ellipse} Output: Ellipse Shape Graphic Element Visual Object json_file Embed a JSON file into markdown, including syntax highlighting and reference links for JSON schema. Example: {json_file:lottie.schema.json} Lottie Player Embeds a lottie into the document Example: Output: var lottie_player_1 = new LottiePlayer( 'lottie_target_1', '../../static/logo.json', true, {} ); lottie-playground Embeds a player side by side to a JSON snipped and controls to tweak the animation Example: Example
lottie.layers[0].shapes[0].it[0] Output: Example Position x 256 Position y 256 Width 256 Height 256 Roundness 0 var lottie_player_2 = new PlaygroundPlayer( 2, 'playground_2_6', 'lottie_target_2', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Group\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [256, 256]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[0].shapes[0].it[0].p.k = [ data[\"Position x\"], data[\"Position y\"] ]; lottie.layers[0].shapes[0].it[0].s.k = [ data[\"Width\"], data[\"Height\"] ]; lottie.layers[0].shapes[0].it[0].r.k = data[\"Roundness\"]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); Miscellaneous [RFC] Links to a IETF RFC. Example: [RFC9402] Output: [ RFC9402 ] BCP14 Automatically highlights keywords from BCP 14 ( [ RFC2119 ] [ RFC8174 ] ). Example: MUST Output: MUST Math Input You can embed L A T E X math mode code. Example: Normal text with inline $\\LaTeX$: $\\frac{1}{x}$. $$\\sum\\limits_{i=1}^n{n\\choose i}t^i(1-t)^{n-1}P_i$$ Output: Normal text with inline L A T E X : 1 x . \u2211 i = 1 n ( n i ) t i ( 1 \u2212 t ) n \u2212 1 P i lottie_color Shows an inline preview of a lottie color array. Example: {lottie_color:1, 0.5, 0} Output: [1, 0.5, 0] lottie_hexcolor Shows an inline preview of a color from hex code. Example: {lottie_hexcolor:#FF8000} Output: #FF8000 lottie_gradient Shows an inline preview of a lottie gradient (without alpha). Example: {lottie_gradient:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96} Output: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96] lottie_gradient_alpha Shows an inline preview of a lottie gradient (with alpha). Alpha stop offsets need to match the color stop offsets. Example: {lottie_gradient_alpha:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1} Output: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1] Glossary Terms Glossary terms can be linked to using Mediawiki-style syntax: Example: [[local coordinates]] or [[local coordinates|coordinate system]] Output: local coordinates or coordinate system","title":"Markdown Extensions"},{"location":"editing/extensions/#markdown-extensions","text":"This documentation comes with several markdown extensions that allow interactive elements and data pulled from the schema.","title":"Markdown Extensions"},{"location":"editing/extensions/#schema-integration","text":"","title":"Schema Integration"},{"location":"editing/extensions/#schema_string","text":"Using a reference to a value in the JSON schema (without $defs ) will embed that string into the markdown text. Example: {schema_string:shapes/graphic-element/description} Output: Element used to display vector data in a shape layer","title":"schema_string"},{"location":"editing/extensions/#link","text":"Links to the relevant section in the specs. Example: {link:shapes/ellipse} Output: View Schema","title":"link"},{"location":"editing/extensions/#schema_link","text":"Link to the relevant section in the formatted schema. Example: {schema_link:shapes/ellipse} Output: View Schema","title":"schema_link"},{"location":"editing/extensions/#schema_subtype_table","text":"Used to list all the ty values for Layer / Shape etc. Example: {schema_subtype_table:layers/all-layers:ty} Output: ty Type 0 Precomposition Layer 2 Image Layer 3 Null Layer 1 Solid Layer 4 Shape Layer None Unknown layer types","title":"schema_subtype_table"},{"location":"editing/extensions/#schema_object","text":"Embeds a property table from the schema. Example: {schema_object:shapes/ellipse} Output: Composition Diagram for Ellipse Ellipse Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'el' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Position s Vector Size Size","title":"schema_object"},{"location":"editing/extensions/#schema_enum","text":"Same as schema_object but for enumerations. Example: {schema_enum:fill-rule} Output: Value Name Description 1 Non Zero Everything is colored (You can think of this as an OR) 2 Even Odd Colored based on intersections and path direction, can be used to create \"holes\"","title":"schema_enum"},{"location":"editing/extensions/#schema_inheritance","text":"Shows the inheritance diagram for an object type. Example: {schema_inheritance:shapes/ellipse} Output: Ellipse Shape Graphic Element Visual Object","title":"schema_inheritance"},{"location":"editing/extensions/#json_file","text":"Embed a JSON file into markdown, including syntax highlighting and reference links for JSON schema. Example: {json_file:lottie.schema.json}","title":"json_file"},{"location":"editing/extensions/#lottie-player","text":"","title":"Lottie Player"},{"location":"editing/extensions/#lottie","text":"Embeds a lottie into the document Example: Output: var lottie_player_1 = new LottiePlayer( 'lottie_target_1', '../../static/logo.json', true, {} );","title":"<lottie>"},{"location":"editing/extensions/#lottie-playground","text":"Embeds a player side by side to a JSON snipped and controls to tweak the animation Example: Example
lottie.layers[0].shapes[0].it[0] Output: Example Position x 256 Position y 256 Width 256 Height 256 Roundness 0 var lottie_player_2 = new PlaygroundPlayer( 2, 'playground_2_6', 'lottie_target_2', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Group\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [256, 256]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[0].shapes[0].it[0].p.k = [ data[\"Position x\"], data[\"Position y\"] ]; lottie.layers[0].shapes[0].it[0].s.k = [ data[\"Width\"], data[\"Height\"] ]; lottie.layers[0].shapes[0].it[0].r.k = data[\"Roundness\"]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} );","title":"lottie-playground"},{"location":"editing/extensions/#miscellaneous","text":"","title":"Miscellaneous"},{"location":"editing/extensions/#rfc","text":"Links to a IETF RFC. Example: [RFC9402] Output: [ RFC9402 ]","title":"[RFC]"},{"location":"editing/extensions/#bcp14","text":"Automatically highlights keywords from BCP 14 ( [ RFC2119 ] [ RFC8174 ] ). Example: MUST Output: MUST","title":"BCP14"},{"location":"editing/extensions/#math-input","text":"You can embed L A T E X math mode code. Example: Normal text with inline $\\LaTeX$: $\\frac{1}{x}$. $$\\sum\\limits_{i=1}^n{n\\choose i}t^i(1-t)^{n-1}P_i$$ Output: Normal text with inline L A T E X : 1 x . \u2211 i = 1 n ( n i ) t i ( 1 \u2212 t ) n \u2212 1 P i","title":"Math Input"},{"location":"editing/extensions/#lottie_color","text":"Shows an inline preview of a lottie color array. Example: {lottie_color:1, 0.5, 0} Output: [1, 0.5, 0]","title":"lottie_color"},{"location":"editing/extensions/#lottie_hexcolor","text":"Shows an inline preview of a color from hex code. Example: {lottie_hexcolor:#FF8000} Output: #FF8000","title":"lottie_hexcolor"},{"location":"editing/extensions/#lottie_gradient","text":"Shows an inline preview of a lottie gradient (without alpha). Example: {lottie_gradient:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96} Output: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96]","title":"lottie_gradient"},{"location":"editing/extensions/#lottie_gradient_alpha","text":"Shows an inline preview of a lottie gradient (with alpha). Alpha stop offsets need to match the color stop offsets. Example: {lottie_gradient_alpha:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1} Output: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1]","title":"lottie_gradient_alpha"},{"location":"editing/extensions/#glossary-terms","text":"Glossary terms can be linked to using Mediawiki-style syntax: Example: [[local coordinates]] or [[local coordinates|coordinate system]] Output: local coordinates or coordinate system","title":"Glossary Terms"},{"location":"editing/schema/","text":"Adding to the Schema The Lottie specification has a machine-readable definitions which uses JSON Schema . There are many different ways of formatting the schema so here are some guidelines to ensure consistency. Guidelines Object Model Approach Objects in the schema are organized in a way that simulates an object model. This allows for implementation to have a (non-binding) foundation for their internal structure and provides easy organization of the human-readable documentation. This means there can be some \"abstract\" type definitions, which will contain the common properties and descriptions of concrete sub-types. Object inheritance is simulated using allOf , with $ref items referring to \"base\" definitions. Split Files Each object or significant data type is split in its own file under /schema . These files are grouped together within a shallow list of directories. The files will be joined together into a single schema using /tools/schema-merge.py . Required Properties Each type defined by the schema must have a type , as well as title and description . title should consist of a couple words that can be used to name the described object. description should contain a concise description that gives an idea of the purpose of that object. Enumerations Enumerations are defined in a file under /schema/constants have oneOf defining, title , description , and const for every possible value of the enumeration. all Files Some types have several sub-types in the schema, and properties might want to accept a value to any of the concrete sub-types. To ensure references to these types are consistent, you can create an additional schema file with the list of acceptable values. For example if you have an abstract type in item.json , the file will be all-items.json , and contain oneOf with $ref s to the acceptable types. Writing Documentation Every type defined in the documentation must be documented. Schema documentation files go under /docs/specs , and there must be a file for each directory under /schema , with anchors for every type defined in that schema directory. Pulling Data from the Schema There are several Markdown extensions available, every object and enumeration must have the relevant table to show its structure and an example playground should be provided for every visual element. Building the Documentation There are several Python scripts that are used in the build process, ensure the requirements listed under /tools/requirements.txt are installed in your Python environment. The graphviz system package needs to be installed as well. The first step is to build the combined schema: tools/schema-merge.py It's important to call this after every schema change as the markdown extensions pull the data from this, and internal links are updated based on the combined file. To run the documentation locally you can use: tools/mkdocs serve This will create a local server that renders the documentation and it will reload if anything under /docs changes. To build a static HTML site run the following: ./tools/mkdocs build -d site The output will be in /site . Makefile To simplify the build process, there is a makefile that allows you to run all the commands above with a single make invocation`. Follows a list of useful make targets: # Installs Python packages make install_dependencies # Builds the schema and docs into HTML make # Equivalent to mkdocs serve make docs_serve # Builds only the combined schema make lottie.schema.json # Runs basic schema validation (without rebuilding the HTML) make validate # Runs the full validation, including building the HTML pages make validate_full Schema Validation You can validate schema syntax and internal references using ./tools/schema-validate.py To validate that each section is documented, you can pass the path to the built site: ./tools/schema-validate.py --html site/specs/","title":"Adding to the Schema"},{"location":"editing/schema/#adding-to-the-schema","text":"The Lottie specification has a machine-readable definitions which uses JSON Schema . There are many different ways of formatting the schema so here are some guidelines to ensure consistency.","title":"Adding to the Schema"},{"location":"editing/schema/#guidelines","text":"","title":"Guidelines"},{"location":"editing/schema/#object-model-approach","text":"Objects in the schema are organized in a way that simulates an object model. This allows for implementation to have a (non-binding) foundation for their internal structure and provides easy organization of the human-readable documentation. This means there can be some \"abstract\" type definitions, which will contain the common properties and descriptions of concrete sub-types. Object inheritance is simulated using allOf , with $ref items referring to \"base\" definitions.","title":"Object Model Approach"},{"location":"editing/schema/#split-files","text":"Each object or significant data type is split in its own file under /schema . These files are grouped together within a shallow list of directories. The files will be joined together into a single schema using /tools/schema-merge.py .","title":"Split Files"},{"location":"editing/schema/#required-properties","text":"Each type defined by the schema must have a type , as well as title and description . title should consist of a couple words that can be used to name the described object. description should contain a concise description that gives an idea of the purpose of that object.","title":"Required Properties"},{"location":"editing/schema/#enumerations","text":"Enumerations are defined in a file under /schema/constants have oneOf defining, title , description , and const for every possible value of the enumeration.","title":"Enumerations"},{"location":"editing/schema/#all-files","text":"Some types have several sub-types in the schema, and properties might want to accept a value to any of the concrete sub-types. To ensure references to these types are consistent, you can create an additional schema file with the list of acceptable values. For example if you have an abstract type in item.json , the file will be all-items.json , and contain oneOf with $ref s to the acceptable types.","title":"all Files"},{"location":"editing/schema/#writing-documentation","text":"Every type defined in the documentation must be documented. Schema documentation files go under /docs/specs , and there must be a file for each directory under /schema , with anchors for every type defined in that schema directory.","title":"Writing Documentation"},{"location":"editing/schema/#pulling-data-from-the-schema","text":"There are several Markdown extensions available, every object and enumeration must have the relevant table to show its structure and an example playground should be provided for every visual element.","title":"Pulling Data from the Schema"},{"location":"editing/schema/#building-the-documentation","text":"There are several Python scripts that are used in the build process, ensure the requirements listed under /tools/requirements.txt are installed in your Python environment. The graphviz system package needs to be installed as well. The first step is to build the combined schema: tools/schema-merge.py It's important to call this after every schema change as the markdown extensions pull the data from this, and internal links are updated based on the combined file. To run the documentation locally you can use: tools/mkdocs serve This will create a local server that renders the documentation and it will reload if anything under /docs changes. To build a static HTML site run the following: ./tools/mkdocs build -d site The output will be in /site .","title":"Building the Documentation"},{"location":"editing/schema/#makefile","text":"To simplify the build process, there is a makefile that allows you to run all the commands above with a single make invocation`. Follows a list of useful make targets: # Installs Python packages make install_dependencies # Builds the schema and docs into HTML make # Equivalent to mkdocs serve make docs_serve # Builds only the combined schema make lottie.schema.json # Runs basic schema validation (without rebuilding the HTML) make validate # Runs the full validation, including building the HTML pages make validate_full","title":"Makefile"},{"location":"editing/schema/#schema-validation","text":"You can validate schema syntax and internal references using ./tools/schema-validate.py To validate that each section is documented, you can pass the path to the built site: ./tools/schema-validate.py --html site/specs/","title":"Schema Validation"},{"location":"governance/","text":"Lottie Animation Format Documentation This repository is for the development of the Lottie Animation Format. All work here is guided by the Community Specification License . Scope The scope of this Working Group is to specify the format of the Lottie Animation Format, both the allowed JSON structure, the semantics of that structure, and how such Lottie files are to be rendered. The definition of the correct rendering will be specified by a combination of verbiage in the written specification and by exemplar Lottie files and their desired renderings. CLA Participation in this group requires signing the Contributor License Agreement , which you can do by creating a pull request that adds your name, email address, and Community Specification License version that you agree to be bound by. Here is an example of what that pull request should look like .","title":"Lottie Animation Format Documentation"},{"location":"governance/#lottie-animation-format-documentation","text":"This repository is for the development of the Lottie Animation Format. All work here is guided by the Community Specification License .","title":"Lottie Animation Format Documentation"},{"location":"governance/#scope","text":"The scope of this Working Group is to specify the format of the Lottie Animation Format, both the allowed JSON structure, the semantics of that structure, and how such Lottie files are to be rendered. The definition of the correct rendering will be specified by a combination of verbiage in the written specification and by exemplar Lottie files and their desired renderings.","title":"Scope"},{"location":"governance/#cla","text":"Participation in this group requires signing the Contributor License Agreement , which you can do by creating a pull request that adds your name, email address, and Community Specification License version that you agree to be bound by. Here is an example of what that pull request should look like .","title":"CLA"},{"location":"governance/CONTRIBUTING/","text":"Lottie Format Specification Contribution Guide This repository contains the specification text as well as Pull Requests with suggested improvements and contributions. When proposing or weighing-in on any issue or pull request, consider the Code of Conduct to better understand expected and unacceptable behavior. Workflow The primary workflow is centered around the main repository , utilizing the following features: Pull Requests Issues Discussions Regular, documented meetings of the LAC working group, to review and progress proposals through the various stages as outlined below. Members of the community, who are interested in participating in discussions and other work around the Lottie format, be it the format itself, documentation, libraries, tools or other services built around the format can do so around the repository. In doing so, members can put forth proposals for the format, which are well reasoned formal recommendations or suggestions put toward consideration by the community and working group, aimed at fixing or enhancing the Lottie format. Proposals can be initiated either via issues or pull requests (as detailed below). Any issue raised is considered an RFC, subject to review, comments and deliberation by both community and working group. An RFC may begin as an issue or PR, and may not initially be reasoned out enough to be considered a formal proposal (see below). However, it will eventually have to be detailed enough to be considered a proposal. Definitions Lottie Animation Community Lottie Animation Community (or LAC) is a non-profit open source project hosted by The Linux Foundation, dedicated to establishing the Lottie File Format as an efficient, scalable and cross-platform animated vector graphics technology and open file format. Lottie Animation Working Group A working group, put together by the LAC, is responsible for guiding the process, moderating discussions, and so forth. The working group will conduct regular meetings to review proposals, and either advance them through the process or put forward recommendations/suggestions for the same. Relevant details of the working group, its members and tenure shall be published on the main repository. Sponsors Individuals or organizations who are recognised by LAC are responsible for taking on proposals and guiding them through the process. Every proposal must have a sponsor attached to it, in order to progress through the process. A proposal may have multiple sponsors. Sponsor organizations shall be transparently documented on the main repository. Editors Either working group members or selected contributors responsible to repository maintenance. to the main repository. Consensus Consensus is defined as approval of two thirds of the Working Group. Proposals that require the introduction or changes of core features, will require unanimous approval of the entire working group. Proposals Proposals can come in the form of issues or pull requests. Discussions may be used for general discussion and brainstorming before it is put forth as a proposal and subsequently into the RFC process. Submissions fall into one of two categories: Contributions that do not change the specifications, or their interpretation These are issues and PRs largely aimed at improving legibility, fixing editorial errors, clearing up ambiguities, adding examples to existing specifications, or updating the tooling that generates the documentation. These may be progressed and merged without much process and typically only require one approval from a member of the LAC working group. Contributions that do meaningfully change the specifications These must progress through the stages of RFC, guided by a sponsor until they are ultimately accepted or rejected. Once a proposal is raised either via issues or pull request, it is considered to be an RFC. RFCs are guided by a sponsor through a series of stages: explainer, proposal, draft, and accepted (or rejected) , each of which has suggested entrance criteria and next steps detailed below. RFCs typically advance one stage at a time but may advance multiple stages at a time. Stage advancements typically occur during Working Group meetings, but may also occur on GitHub. In general, it's preferable to start with a pull request so that we can best evaluate the RFC in detail. However, starting with an issue is also permitted if the full details are not worked out. All RFCs start as either an explainer or a proposal. They will be tagged with the appropriate tag on GitHub as it progresses. Explainer An RFC in the Explainer stage captures a described problem or partially-considered solutions. An explainer does not need to meet any entrance criteria. An Explainer may be an issue or a pull request (though an illustrative pull request is preferable). Entrance criteria A well defined problem or use case. Identification of potential concerns, challenges, and drawbacks. As implied by the name, the goal at the Explainer stage is to capture the issue, and from there, reject it by considering other possible solutions or that it is not aligned with the guiding principles, or to move forwards with the next stage. Once determined that the explainer is compelling, it should seek the entrance criteria for proposal. Proposal An RFC in the Proposal stage is a solution to a problem with enough detail to be discussed further. It must be backed by a willing Sponsor. A Proposal's goal is to make a compelling case for acceptance by describing the problem and formalizing the solution. A proposal should be a pull request. Entrance criteria Identified sponsor Identified target profile for the proposal A proposal may not add features to the core profile immediately, but rather pick an extension or module (or be a module of its own). Core specifications may only change when an extension or module is migrated into core via a separate proposal. Clear explanation of the problem and solution Illustrative examples .json Files for testing Initial draft of the specification changes A Proposal is subject to the same discussion as an Explainer: ensuring that it is well aligned with the guiding principles,a problem worth solving, and the preferred solution to that problem. A Sponsor is not expected to have confidence in every detail at this stage and should instead focus on identifying and resolving issues and edge-cases. To better understand the technical ramifications of the proposal, a sponsor is encouraged to implement it in a Lottie library. Most Proposals are expected to evolve or change and may be rejected. Therefore, it is unwise to rely on a Proposal in a production Lottie Library. Lottie libraries may implement proposals, though are encouraged to not enable the proposed feature without explicit opt-in. Draft An RFC in the Draft stage is a fully formed solution. There is Consensus that the RFC is a good candidate for inclusion in the official specifications. A Draft's goal is to formally describe the solution and resolve any potential concerns. A Draft must be submitted as a pull request. Entrance criteria Consensus within the Working Group Resolution of identified concerns and challenges Relevant changes to the specifications, including the JSON schema when applicable Relevant tests and test .json files Compliant implementation in an established library or tool of their choosing A Proposal becomes a Draft when the set of problems or drawbacks have been fully considered and accepted or resolved, and the solution is deemed desirable. A Draft's goal is to complete final specification edits that are ready to be merged and implement the draft in Lottie libraries along with tests to gain confidence that the description is sufficient. Drafts may continue to evolve and change, occasionally dramatically, and are not guaranteed to be accepted. Therefore, it is unwise to rely on a draft in a production Lottie Service. Lottie libraries should implement drafts to provide valuable feedback, though are encouraged not to enable the draft feature without explicit opt-in when possible. Accepted An RFC at the accepted stage is a completed solution. According to an Editor it is ready to be merged into the main repository. The RFC is ready to be implemented by Lottie libraries. Entrance criteria Consensus that the solution is complete 3 Approvals given by members of the LAC on the merge request Complete specification edits, including schema, examples, and/or prose Compliant implementation in a lottie library (fully tested and merged or ready to merge) A Draft is accepted when the working group or editor (in the case of non-invasive edits as outlined before) has been convinced via implementations and tests that it appropriately handles all edge cases; that the specification changes not only precisely describe the new syntax and semantics but include sufficient documentation and examples; and that the RFC includes edits to any other affected areas of the specifications. An accepted RFC is merged into the Lottie specification's main repository by an Editor and will be included in the next released revision. Blocked At any stage of the process, any member of the Working Group may raise an objection, sending the RFC to the Blocked stage. The submitter can amend the RFC to resolve the issue raised in the objection. If the objecting Working Group member is satisfied with the amendment, the RFC can go back to its previous stage. If the proposal can be progressed after amendments, this avenue should be explored first. Should the submitter be unwilling or unable to make amendments, the proposal may be Rejected. Rejected An RFC may be rejected at any point. The reason for rejection should be clearly specified. Most rejections occur when an Explainer is proven to be unnecessary or fails to meet the entrance criteria to become a Proposal. A Proposal may become rejected for similar reasons, if it fails to reach Consensus, or loses the confidence of its Sponsor. Likewise, a Draft may encounter unforeseen issues during the process which cause it to lose Consensus or the confidence of its Sponsor. RFCs which have lost a Sponsor will not be rejected immediately, but may become rejected if they fail to attract a new Sponsor. Contributing to Lottie Libraries Should a new addition be made to the Lottie specifications or a Lottie library first? Libraries seek to be compliant, which means they might discourage changes that cause them to behave differently from the specifications. However, they also encourage pull requests for changes that accompany an RFC Proposal or Draft . Proposals won't be Accepted until it has experience being implemented in a Lottie library. To allow a library to remain compliant to the specifications while also implementing Proposals and Drafts , the library's maintainers may request that these new features are disabled by default with opt-in options, or they may simply wait to merge a well-tested pull request until the Proposal is Accepted . Specification Release Process The file format specifications are published using a semantic versioning system. Each published version of the specifications is identified by a unique sequence of major, minor, and patch numbers, following these guidelines: Increasing the major version number signals the possibility of breaking changes and significant incompatibilities. Increasing the minor version number happens when new features are introduced, but existing features should not be changed in an incompatible way. The patch version is used to publish minor changes that improve the clarity of the specifications without introducing new functionality. Each version through a release process consisting of multiple stages to ensure all stakeholders have a say before a new version of the specification is published. Different versions of the specification might be in different release stages at any given time. Active Development This is the initial stage, new features and proposals are welcome. Whether or not backwards-incompatible changes are accepted depends on the target version as described above. Requesting Comments Once the LAC working group has reached a consensus that the specification is ready to start the publishing process, it will request comments on the draft specification from stakeholders. New features and changed can be introduced based on the feedback but most new contributions should target a following version. When the target version is an increase in the major version, LAC guarantees that this stage will last a minimum of 3 weeks before moving forward to the next stage. Feature freeze After all the comments have been addressed and accepted into the specifications, the draft version goes into feature freeze where no new features should be introduced. The LAC working group will still accept fixes that clarify ambiguities, correct mistakes, or otherwise don't change compliance requirements. When the target version is an increase in the major version, LAC guarantees that this stage will last a minimum of one week before publishing the specifications. Published When the LAC working group is confident no more work is needed to release a version of the specifications, a final vote is performed to approve the specifications for publishing. If consensus is reached, then the version is published and can no longer be changed in any way. Any further work should target a higher version number. Errata should be published as a new version of the specifications with increased patch number. If consensus is not reached, the version goes back to the Active Development stage.","title":"Lottie Format Specification Contribution Guide"},{"location":"governance/CONTRIBUTING/#lottie-format-specification-contribution-guide","text":"This repository contains the specification text as well as Pull Requests with suggested improvements and contributions. When proposing or weighing-in on any issue or pull request, consider the Code of Conduct to better understand expected and unacceptable behavior.","title":"Lottie Format Specification Contribution Guide"},{"location":"governance/CONTRIBUTING/#workflow","text":"The primary workflow is centered around the main repository , utilizing the following features: Pull Requests Issues Discussions Regular, documented meetings of the LAC working group, to review and progress proposals through the various stages as outlined below. Members of the community, who are interested in participating in discussions and other work around the Lottie format, be it the format itself, documentation, libraries, tools or other services built around the format can do so around the repository. In doing so, members can put forth proposals for the format, which are well reasoned formal recommendations or suggestions put toward consideration by the community and working group, aimed at fixing or enhancing the Lottie format. Proposals can be initiated either via issues or pull requests (as detailed below). Any issue raised is considered an RFC, subject to review, comments and deliberation by both community and working group. An RFC may begin as an issue or PR, and may not initially be reasoned out enough to be considered a formal proposal (see below). However, it will eventually have to be detailed enough to be considered a proposal.","title":"Workflow"},{"location":"governance/CONTRIBUTING/#definitions","text":"","title":"Definitions"},{"location":"governance/CONTRIBUTING/#lottie-animation-community","text":"Lottie Animation Community (or LAC) is a non-profit open source project hosted by The Linux Foundation, dedicated to establishing the Lottie File Format as an efficient, scalable and cross-platform animated vector graphics technology and open file format.","title":"Lottie Animation Community"},{"location":"governance/CONTRIBUTING/#lottie-animation-working-group","text":"A working group, put together by the LAC, is responsible for guiding the process, moderating discussions, and so forth. The working group will conduct regular meetings to review proposals, and either advance them through the process or put forward recommendations/suggestions for the same. Relevant details of the working group, its members and tenure shall be published on the main repository.","title":"Lottie Animation Working Group"},{"location":"governance/CONTRIBUTING/#sponsors","text":"Individuals or organizations who are recognised by LAC are responsible for taking on proposals and guiding them through the process. Every proposal must have a sponsor attached to it, in order to progress through the process. A proposal may have multiple sponsors. Sponsor organizations shall be transparently documented on the main repository.","title":"Sponsors"},{"location":"governance/CONTRIBUTING/#editors","text":"Either working group members or selected contributors responsible to repository maintenance. to the main repository.","title":"Editors"},{"location":"governance/CONTRIBUTING/#consensus","text":"Consensus is defined as approval of two thirds of the Working Group. Proposals that require the introduction or changes of core features, will require unanimous approval of the entire working group.","title":"Consensus"},{"location":"governance/CONTRIBUTING/#proposals","text":"Proposals can come in the form of issues or pull requests. Discussions may be used for general discussion and brainstorming before it is put forth as a proposal and subsequently into the RFC process. Submissions fall into one of two categories: Contributions that do not change the specifications, or their interpretation These are issues and PRs largely aimed at improving legibility, fixing editorial errors, clearing up ambiguities, adding examples to existing specifications, or updating the tooling that generates the documentation. These may be progressed and merged without much process and typically only require one approval from a member of the LAC working group. Contributions that do meaningfully change the specifications These must progress through the stages of RFC, guided by a sponsor until they are ultimately accepted or rejected. Once a proposal is raised either via issues or pull request, it is considered to be an RFC. RFCs are guided by a sponsor through a series of stages: explainer, proposal, draft, and accepted (or rejected) , each of which has suggested entrance criteria and next steps detailed below. RFCs typically advance one stage at a time but may advance multiple stages at a time. Stage advancements typically occur during Working Group meetings, but may also occur on GitHub. In general, it's preferable to start with a pull request so that we can best evaluate the RFC in detail. However, starting with an issue is also permitted if the full details are not worked out. All RFCs start as either an explainer or a proposal. They will be tagged with the appropriate tag on GitHub as it progresses.","title":"Proposals"},{"location":"governance/CONTRIBUTING/#explainer","text":"An RFC in the Explainer stage captures a described problem or partially-considered solutions. An explainer does not need to meet any entrance criteria. An Explainer may be an issue or a pull request (though an illustrative pull request is preferable).","title":"Explainer"},{"location":"governance/CONTRIBUTING/#entrance-criteria","text":"A well defined problem or use case. Identification of potential concerns, challenges, and drawbacks. As implied by the name, the goal at the Explainer stage is to capture the issue, and from there, reject it by considering other possible solutions or that it is not aligned with the guiding principles, or to move forwards with the next stage. Once determined that the explainer is compelling, it should seek the entrance criteria for proposal.","title":"Entrance criteria"},{"location":"governance/CONTRIBUTING/#proposal","text":"An RFC in the Proposal stage is a solution to a problem with enough detail to be discussed further. It must be backed by a willing Sponsor. A Proposal's goal is to make a compelling case for acceptance by describing the problem and formalizing the solution. A proposal should be a pull request.","title":"Proposal"},{"location":"governance/CONTRIBUTING/#entrance-criteria_1","text":"Identified sponsor Identified target profile for the proposal A proposal may not add features to the core profile immediately, but rather pick an extension or module (or be a module of its own). Core specifications may only change when an extension or module is migrated into core via a separate proposal. Clear explanation of the problem and solution Illustrative examples .json Files for testing Initial draft of the specification changes A Proposal is subject to the same discussion as an Explainer: ensuring that it is well aligned with the guiding principles,a problem worth solving, and the preferred solution to that problem. A Sponsor is not expected to have confidence in every detail at this stage and should instead focus on identifying and resolving issues and edge-cases. To better understand the technical ramifications of the proposal, a sponsor is encouraged to implement it in a Lottie library. Most Proposals are expected to evolve or change and may be rejected. Therefore, it is unwise to rely on a Proposal in a production Lottie Library. Lottie libraries may implement proposals, though are encouraged to not enable the proposed feature without explicit opt-in.","title":"Entrance criteria"},{"location":"governance/CONTRIBUTING/#draft","text":"An RFC in the Draft stage is a fully formed solution. There is Consensus that the RFC is a good candidate for inclusion in the official specifications. A Draft's goal is to formally describe the solution and resolve any potential concerns. A Draft must be submitted as a pull request.","title":"Draft"},{"location":"governance/CONTRIBUTING/#entrance-criteria_2","text":"Consensus within the Working Group Resolution of identified concerns and challenges Relevant changes to the specifications, including the JSON schema when applicable Relevant tests and test .json files Compliant implementation in an established library or tool of their choosing A Proposal becomes a Draft when the set of problems or drawbacks have been fully considered and accepted or resolved, and the solution is deemed desirable. A Draft's goal is to complete final specification edits that are ready to be merged and implement the draft in Lottie libraries along with tests to gain confidence that the description is sufficient. Drafts may continue to evolve and change, occasionally dramatically, and are not guaranteed to be accepted. Therefore, it is unwise to rely on a draft in a production Lottie Service. Lottie libraries should implement drafts to provide valuable feedback, though are encouraged not to enable the draft feature without explicit opt-in when possible.","title":"Entrance criteria"},{"location":"governance/CONTRIBUTING/#accepted","text":"An RFC at the accepted stage is a completed solution. According to an Editor it is ready to be merged into the main repository. The RFC is ready to be implemented by Lottie libraries.","title":"Accepted"},{"location":"governance/CONTRIBUTING/#entrance-criteria_3","text":"Consensus that the solution is complete 3 Approvals given by members of the LAC on the merge request Complete specification edits, including schema, examples, and/or prose Compliant implementation in a lottie library (fully tested and merged or ready to merge) A Draft is accepted when the working group or editor (in the case of non-invasive edits as outlined before) has been convinced via implementations and tests that it appropriately handles all edge cases; that the specification changes not only precisely describe the new syntax and semantics but include sufficient documentation and examples; and that the RFC includes edits to any other affected areas of the specifications. An accepted RFC is merged into the Lottie specification's main repository by an Editor and will be included in the next released revision.","title":"Entrance criteria"},{"location":"governance/CONTRIBUTING/#blocked","text":"At any stage of the process, any member of the Working Group may raise an objection, sending the RFC to the Blocked stage. The submitter can amend the RFC to resolve the issue raised in the objection. If the objecting Working Group member is satisfied with the amendment, the RFC can go back to its previous stage. If the proposal can be progressed after amendments, this avenue should be explored first. Should the submitter be unwilling or unable to make amendments, the proposal may be Rejected.","title":"Blocked"},{"location":"governance/CONTRIBUTING/#rejected","text":"An RFC may be rejected at any point. The reason for rejection should be clearly specified. Most rejections occur when an Explainer is proven to be unnecessary or fails to meet the entrance criteria to become a Proposal. A Proposal may become rejected for similar reasons, if it fails to reach Consensus, or loses the confidence of its Sponsor. Likewise, a Draft may encounter unforeseen issues during the process which cause it to lose Consensus or the confidence of its Sponsor. RFCs which have lost a Sponsor will not be rejected immediately, but may become rejected if they fail to attract a new Sponsor.","title":"Rejected"},{"location":"governance/CONTRIBUTING/#contributing-to-lottie-libraries","text":"Should a new addition be made to the Lottie specifications or a Lottie library first? Libraries seek to be compliant, which means they might discourage changes that cause them to behave differently from the specifications. However, they also encourage pull requests for changes that accompany an RFC Proposal or Draft . Proposals won't be Accepted until it has experience being implemented in a Lottie library. To allow a library to remain compliant to the specifications while also implementing Proposals and Drafts , the library's maintainers may request that these new features are disabled by default with opt-in options, or they may simply wait to merge a well-tested pull request until the Proposal is Accepted .","title":"Contributing to Lottie Libraries"},{"location":"governance/CONTRIBUTING/#specification-release-process","text":"The file format specifications are published using a semantic versioning system. Each published version of the specifications is identified by a unique sequence of major, minor, and patch numbers, following these guidelines: Increasing the major version number signals the possibility of breaking changes and significant incompatibilities. Increasing the minor version number happens when new features are introduced, but existing features should not be changed in an incompatible way. The patch version is used to publish minor changes that improve the clarity of the specifications without introducing new functionality. Each version through a release process consisting of multiple stages to ensure all stakeholders have a say before a new version of the specification is published. Different versions of the specification might be in different release stages at any given time.","title":"Specification Release Process"},{"location":"governance/CONTRIBUTING/#active-development","text":"This is the initial stage, new features and proposals are welcome. Whether or not backwards-incompatible changes are accepted depends on the target version as described above.","title":"Active Development"},{"location":"governance/CONTRIBUTING/#requesting-comments","text":"Once the LAC working group has reached a consensus that the specification is ready to start the publishing process, it will request comments on the draft specification from stakeholders. New features and changed can be introduced based on the feedback but most new contributions should target a following version. When the target version is an increase in the major version, LAC guarantees that this stage will last a minimum of 3 weeks before moving forward to the next stage.","title":"Requesting Comments"},{"location":"governance/CONTRIBUTING/#feature-freeze","text":"After all the comments have been addressed and accepted into the specifications, the draft version goes into feature freeze where no new features should be introduced. The LAC working group will still accept fixes that clarify ambiguities, correct mistakes, or otherwise don't change compliance requirements. When the target version is an increase in the major version, LAC guarantees that this stage will last a minimum of one week before publishing the specifications.","title":"Feature freeze"},{"location":"governance/CONTRIBUTING/#published","text":"When the LAC working group is confident no more work is needed to release a version of the specifications, a final vote is performed to approve the specifications for publishing. If consensus is reached, then the version is published and can no longer be changed in any way. Any further work should target a higher version number. Errata should be published as a new version of the specifications with increased patch number. If consensus is not reached, the version goes back to the Active Development stage.","title":"Published"},{"location":"governance/Code_of_Conduct/","text":"Contributor Covenant Code of Conduct Our Pledge We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. Our Standards Examples of behavior that contributes to a positive environment for our community include: Demonstrating empathy and kindness toward other people Being respectful of differing opinions, viewpoints, and experiences Giving and gracefully accepting constructive feedback Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: The use of sexualized language or imagery, and sexual attention or advances of any kind Trolling, insulting or derogatory comments, and personal or political attacks Public or private harassment Publishing others' private information, such as a physical or email address, without their explicit permission Other conduct which could reasonably be considered inappropriate in a professional setting Enforcement Responsibilities Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. Scope This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement as set forth in the repository's Notice.md file. All complaints will be reviewed and investigated promptly and fairly. All community leaders are obligated to respect the privacy and security of the reporter of any incident. Enforcement Guidelines Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: 1. Correction Community Impact : Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. Consequence : A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. 2. Warning Community Impact : A violation through a single incident or series of actions. Consequence : A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. 3. Temporary Ban Community Impact : A serious violation of community standards, including sustained inappropriate behavior. Consequence : A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. 4. Permanent Ban Community Impact : Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. Consequence : A permanent ban from any sort of public interaction within the project community. Attribution This Code of Conduct is adapted from the Contributor Covenant , version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. Community Impact Guidelines were inspired by Mozilla's code of conduct enforcement ladder . For answers to common questions about this code of conduct, see the FAQ at https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.","title":"Contributor Covenant Code of Conduct"},{"location":"governance/Code_of_Conduct/#contributor-covenant-code-of-conduct","text":"","title":"Contributor Covenant Code of Conduct"},{"location":"governance/Code_of_Conduct/#our-pledge","text":"We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.","title":"Our Pledge"},{"location":"governance/Code_of_Conduct/#our-standards","text":"Examples of behavior that contributes to a positive environment for our community include: Demonstrating empathy and kindness toward other people Being respectful of differing opinions, viewpoints, and experiences Giving and gracefully accepting constructive feedback Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: The use of sexualized language or imagery, and sexual attention or advances of any kind Trolling, insulting or derogatory comments, and personal or political attacks Public or private harassment Publishing others' private information, such as a physical or email address, without their explicit permission Other conduct which could reasonably be considered inappropriate in a professional setting","title":"Our Standards"},{"location":"governance/Code_of_Conduct/#enforcement-responsibilities","text":"Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.","title":"Enforcement Responsibilities"},{"location":"governance/Code_of_Conduct/#scope","text":"This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.","title":"Scope"},{"location":"governance/Code_of_Conduct/#enforcement","text":"Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement as set forth in the repository's Notice.md file. All complaints will be reviewed and investigated promptly and fairly. All community leaders are obligated to respect the privacy and security of the reporter of any incident.","title":"Enforcement"},{"location":"governance/Code_of_Conduct/#enforcement-guidelines","text":"Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:","title":"Enforcement Guidelines"},{"location":"governance/Code_of_Conduct/#1-correction","text":"Community Impact : Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. Consequence : A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.","title":"1. Correction"},{"location":"governance/Code_of_Conduct/#2-warning","text":"Community Impact : A violation through a single incident or series of actions. Consequence : A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.","title":"2. Warning"},{"location":"governance/Code_of_Conduct/#3-temporary-ban","text":"Community Impact : A serious violation of community standards, including sustained inappropriate behavior. Consequence : A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.","title":"3. Temporary Ban"},{"location":"governance/Code_of_Conduct/#4-permanent-ban","text":"Community Impact : Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. Consequence : A permanent ban from any sort of public interaction within the project community.","title":"4. Permanent Ban"},{"location":"governance/Code_of_Conduct/#attribution","text":"This Code of Conduct is adapted from the Contributor Covenant , version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. Community Impact Guidelines were inspired by Mozilla's code of conduct enforcement ladder . For answers to common questions about this code of conduct, see the FAQ at https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.","title":"Attribution"},{"location":"governance/Community_Specification_License-v1/","text":"Community Specification License 1.0 The Purpose of this License. This License sets forth the terms under which 1) Contributor will participate in and contribute to the development of specifications, standards, best practices, guidelines, and other similar materials under this Working Group, and 2) how the materials developed under this License may be used. It is not intended for source code. Capitalized terms are defined in the License\u2019s last section. 1. Copyright. 1.1. Copyright License. Contributor grants everyone a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) copyright license, without any obligation for accounting, to reproduce, prepare derivative works of, publicly display, publicly perform, and distribute any materials it submits to the full extent of its copyright interest in those materials. Contributor also acknowledges that the Working Group may exercise copyright rights in the Specification, including the rights to submit the Specification to another standards organization. 1.2. Copyright Attribution. As a condition, anyone exercising this copyright license must include attribution to the Working Group in any derivative work based on materials developed by the Working Group. That attribution must include, at minimum, the material\u2019s name, version number, and source from where the materials were retrieved. Attribution is not required for implementations of the Specification. 2. Patents. 2.1. Patent License. 2.1.1. As a Result of Contributions. 2.1.1.1. As a Result of Contributions to Draft Specifications. Contributor grants Licensee a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) license to its Necessary Claims in 1) Contributor\u2019s Contributions and 2) to the Draft Specification that is within Scope as of the date of that Contribution, in both cases for Licensee\u2019s Implementation of the Draft Specification, except for those patent claims excluded by Contributor under Section 3. 2.1.1.2. For Approved Specifications. Contributor grants Licensee a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) license to its Necessary Claims included the Approved Specification that are within Scope for Licensee\u2019s Implementation of the Approved Specification, except for those patent claims excluded by Contributor under Section 3. 2.1.2. Patent Grant from Licensee. Licensee grants each other Licensee a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) license to its Necessary Claims for its Implementation, except for those patent claims excluded under Section 3. 2.1.3. Licensee Acceptance. The patent grants set forth in Section 2.1 extend only to Licensees that have indicated their agreement to this License as follows: 2.1.3.1. Source Code Distributions. For distribution in source code, by including this License in the root directory of the source code with the Implementation; 2.1.3.2. Non-Source Code Distributions. For distribution in any form other than source code, by including this License in the documentation, legal notices, via notice in the software, and/or other written materials provided with the Implementation; or 2.1.3.3. Via Notices.md. By issuing pull request or commit to the Specification\u2019s repository\u2019s Notices.md file by the Implementer\u2019s authorized representative, including the Implementer\u2019s name, authorized individual and system identifier, and Specification version. 2.1.4. Defensive Termination. If any Licensee files or maintains a claim in a court asserting that a Necessary Claim is infringed by an Implementation, any licenses granted under this License to the Licensee are immediately terminated unless 1) that claim is directly in response to a claim against Licensee regarding an Implementation, or 2) that claim was brought to enforce the terms of this License, including intervention in a third-party action by a Licensee. 2.1.5. Additional Conditions. This License is not an assurance (i) that any of Contributor\u2019s copyrights or issued patent claims cover an Implementation of the Specification or are enforceable or (ii) that an Implementation of the Specification would not infringe intellectual property rights of any third party. 2.2. Patent Licensing Commitment. In addition to the rights granted in Section 2.1, Contributor agrees to grant everyone a no charge, royalty-free license on reasonable and non-discriminatory terms to Contributor\u2019s Necessary Claims that are within Scope for: Implementations of a Draft Specification, where such license applies only to those Necessary Claims infringed by implementing Contributor's Contribution(s) included in that Draft Specification, and Implementations of the Approved Specification. This patent licensing commitment does not apply to those claims subject to Contributor\u2019s Exclusion Notice under Section 3. 2.3. Effect of Withdrawal. Contributor may withdraw from the Working Group by issuing a pull request or commit providing notice of withdrawal to the Working Group repository\u2019s Notices.md file. All of Contributor\u2019s existing commitments and obligations with respect to the Working Group up to the date of that withdrawal notice will remain in effect, but no new obligations will be incurred. 2.4. Binding Encumbrance. This License is binding on any future owner, assignee, or party who has been given the right to enforce any Necessary Claims against third parties. 3. Patent Exclusion. 3.1. As a Result of Contributions. Contributor may exclude Necessary Claims from its licensing commitments incurred under Section 2.1.1 by issuing an Exclusion Notice within 45 days of the date of that Contribution. Contributor may not issue an Exclusion Notice for any material that has been included in a Draft Deliverable for more than 45 days prior to the date of that Contribution. 3.2. As a Result of a Draft Specification Becoming an Approved Specification. Prior to the adoption of a Draft Specification as an Approved Specification, Contributor may exclude Necessary Claims from its licensing commitments under this Agreement by issuing an Exclusion Notice. Contributor may not issue an Exclusion Notice for patents that were eligible to have been excluded pursuant to Section 3.1. 4. Source Code License. Any source code developed by the Working Group is solely subject the source code license included in the Working Group\u2019s repository for that code. If no source code license is included, the source code will be subject to the MIT License. 5. No Other Rights. Except as specifically set forth in this License, no other express or implied patent, trademark, copyright, or other rights are granted under this License, including by implication, waiver, or estoppel. 6. Antitrust Compliance. Contributor acknowledge that it may compete with other participants in various lines of business and that it is therefore imperative that they and their respective representatives act in a manner that does not violate any applicable antitrust laws and regulations. This License does not restrict any Contributor from engaging in similar specification development projects. Each Contributor may design, develop, manufacture, acquire or market competitive deliverables, products, and services, and conduct its business, in whatever way it chooses. No Contributor is obligated to announce or market any products or services. Without limiting the generality of the foregoing, the Contributors agree not to have any discussion relating to any product pricing, methods or channels of product distribution, division of markets, allocation of customers or any other topic that should not be discussed among competitors under the auspices of the Working Group. 7. Non-Circumvention. Contributor agrees that it will not intentionally take or willfully assist any third party to take any action for the purpose of circumventing any obligations under this License. 8. Representations, Warranties and Disclaimers. 8.1. Representations, Warranties and Disclaimers. Contributor and Licensee represents and warrants that 1) it is legally entitled to grant the rights set forth in this License and 2) it will not intentionally include any third party materials in any Contribution unless those materials are available under terms that do not conflict with this License. IN ALL OTHER RESPECTS ITS CONTRIBUTIONS ARE PROVIDED \"AS IS.\" The entire risk as to implementing or otherwise using the Contribution or the Specification is assumed by the implementer and user. Except as stated herein, CONTRIBUTOR AND LICENSEE EXPRESSLY DISCLAIM ANY WARRANTIES (EXPRESS, IMPLIED, OR OTHERWISE), INCLUDING IMPLIED WARRANTIES OF MERCHANTABILITY, NON-INFRINGEMENT, FITNESS FOR A PARTICULAR PURPOSE, CONDITIONS OF QUALITY, OR TITLE, RELATED TO THE CONTRIBUTION OR THE SPECIFICATION. IN NO EVENT WILL ANY PARTY BE LIABLE TO ANY OTHER PARTY FOR LOST PROFITS OR ANY FORM OF INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER FROM ANY CAUSES OF ACTION OF ANY KIND WITH RESPECT TO THIS AGREEMENT, WHETHER BASED ON BREACH OF CONTRACT, TORT (INCLUDING NEGLIGENCE), OR OTHERWISE, AND WHETHER OR NOT THE OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. Any obligations regarding the transfer, successors in interest, or assignment of Necessary Claims will be satisfied if Contributor or Licensee notifies the transferee or assignee of any patent that it knows contains Necessary Claims or necessary claims under this License. Nothing in this License requires Contributor to undertake a patent search. If Contributor is 1) employed by or acting on behalf of an employer, 2) is making a Contribution under the direction or control of a third party, or 3) is making the Contribution as a consultant, contractor, or under another similar relationship with a third party, Contributor represents that they have been authorized by that party to enter into this License on its behalf. 8.2. Distribution Disclaimer. Any distributions of technical information to third parties must include a notice materially similar to the following: \u201cTHESE MATERIALS ARE PROVIDED \u201cAS IS.\u201d The Contributors and Licensees expressly disclaim any warranties (express, implied, or otherwise), including implied warranties of merchantability, non-infringement, fitness for a particular purpose, or title, related to the materials. The entire risk as to implementing or otherwise using the materials is assumed by the implementer and user. IN NO EVENT WILL THE CONTRIBUTORS OR LICENSEES BE LIABLE TO ANY OTHER PARTY FOR LOST PROFITS OR ANY FORM OF INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER FROM ANY CAUSES OF ACTION OF ANY KIND WITH RESPECT TO THIS DELIVERABLE OR ITS GOVERNING AGREEMENT, WHETHER BASED ON BREACH OF CONTRACT, TORT (INCLUDING NEGLIGENCE), OR OTHERWISE, AND WHETHER OR NOT THE OTHER MEMBER HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\u201d 9. Definitions. 9.1. Affiliate. \u201cAffiliate\u201d means an entity that directly or indirectly Controls, is Controlled by, or is under common Control of that party. 9.2. Approved Specification. \u201cApproved Specification\u201d means the final version and contents of any Draft Specification designated as an Approved Specification as set forth in the accompanying Governance.md file. 9.3. Contribution. \u201cContribution\u201d means any original work of authorship, including any modifications or additions to an existing work, that Contributor submits for inclusion in a Draft Specification, which is included in a Draft Specification or Approved Specification. 9.4. Contributor. \u201cContributor\u201d means any person or entity that has indicated its acceptance of the License 1) by making a Contribution to the Specification, or 2) by entering into the Community Specification Contributor License Agreement for the Specification. Contributor includes its Affiliates, assigns, agents, and successors in interest. 9.5. Control. \u201cControl\u201d means direct or indirect control of more than 50% of the voting power to elect directors of that corporation, or for any other entity, the power to direct management of such entity. 9.6. Draft Specification. \u201cDraft Specification\u201d means all versions of the material (except an Approved Specification) developed by this Working Group for the purpose of creating, commenting on, revising, updating, modifying, or adding to any document that is to be considered for inclusion in the Approved Specification. 9.7. Exclusion Notice. \u201cExclusion Notice\u201d means a written notice made by making a pull request or commit to the repository\u2019s Notices.md file that identifies patents that Contributor is excluding from its patent licensing commitments under this License. The Exclusion Notice for issued patents and published applications must include the Draft Specification\u2019s name, patent number(s) or title and application number(s), as the case may be, for each of the issued patent(s) or pending patent application(s) that the Contributor is excluding from the royalty-free licensing commitment set forth in this License. If an issued patent or pending patent application that may contain Necessary Claims is not set forth in the Exclusion Notice, those Necessary Claims shall continue to be subject to the licensing commitments under this License. The Exclusion Notice for unpublished patent applications must provide either: (i) the text of the filed application; or (ii) identification of the specific part(s) of the Draft Specification whose implementation makes the excluded claim a Necessary Claim. If (ii) is chosen, the effect of the exclusion will be limited to the identified part(s) of the Draft Specification. 9.8. Implementation. \u201cImplementation\u201d means making, using, selling, offering for sale, importing or distributing any implementation of the Specification 1) only to the extent it implements the Specification and 2) so long as all required portions of the Specification are implemented. 9.9. License. \u201cLicense\u201d means this Community Specification License. 9.10. Licensee. \u201cLicensee\u201d means any person or entity that has indicated its acceptance of the License as set forth in Section 2.1.3. Licensee includes its Affiliates, assigns, agents, and successors in interest. 9.11. Necessary Claims. \u201cNecessary Claims\u201d are those patent claims, if any, that a party owns or controls, including those claims later acquired, that are necessary to implement the required portions (including the required elements of optional portions) of the Specification that are described in detail and not merely referenced in the Specification. 9.12. Specification. \u201cSpecification\u201d means a Draft Specification or Approved Specification included in the Working Group\u2019s repository subject to this License, and the version of the Specification implemented by the Licensee. 9.13. Scope. \u201cScope\u201d has the meaning as set forth in the accompanying Scope.md file included in this Specification\u2019s repository. Changes to Scope do not apply retroactively. If no Scope is provided, each Contributor\u2019s Necessary Claims are limited to that Contributor\u2019s Contributions. 9.14. Working Group. \u201cWorking Group\u201d means this project to develop specifications, standards, best practices, guidelines, and other similar materials under this License. The text of this Community Specification License is Copyright 2020 Joint Development Foundation and is licensed under the Creative Commons Attribution 4.0 International License available at https://creativecommons.org/licenses/by/4.0/. SPDX-License-Identifier: CC-BY-4.0","title":"Community Specification License 1.0"},{"location":"governance/Community_Specification_License-v1/#community-specification-license-10","text":"The Purpose of this License. This License sets forth the terms under which 1) Contributor will participate in and contribute to the development of specifications, standards, best practices, guidelines, and other similar materials under this Working Group, and 2) how the materials developed under this License may be used. It is not intended for source code. Capitalized terms are defined in the License\u2019s last section. 1. Copyright. 1.1. Copyright License. Contributor grants everyone a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) copyright license, without any obligation for accounting, to reproduce, prepare derivative works of, publicly display, publicly perform, and distribute any materials it submits to the full extent of its copyright interest in those materials. Contributor also acknowledges that the Working Group may exercise copyright rights in the Specification, including the rights to submit the Specification to another standards organization. 1.2. Copyright Attribution. As a condition, anyone exercising this copyright license must include attribution to the Working Group in any derivative work based on materials developed by the Working Group. That attribution must include, at minimum, the material\u2019s name, version number, and source from where the materials were retrieved. Attribution is not required for implementations of the Specification. 2. Patents. 2.1. Patent License. 2.1.1. As a Result of Contributions. 2.1.1.1. As a Result of Contributions to Draft Specifications. Contributor grants Licensee a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) license to its Necessary Claims in 1) Contributor\u2019s Contributions and 2) to the Draft Specification that is within Scope as of the date of that Contribution, in both cases for Licensee\u2019s Implementation of the Draft Specification, except for those patent claims excluded by Contributor under Section 3. 2.1.1.2. For Approved Specifications. Contributor grants Licensee a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) license to its Necessary Claims included the Approved Specification that are within Scope for Licensee\u2019s Implementation of the Approved Specification, except for those patent claims excluded by Contributor under Section 3. 2.1.2. Patent Grant from Licensee. Licensee grants each other Licensee a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) license to its Necessary Claims for its Implementation, except for those patent claims excluded under Section 3. 2.1.3. Licensee Acceptance. The patent grants set forth in Section 2.1 extend only to Licensees that have indicated their agreement to this License as follows: 2.1.3.1. Source Code Distributions. For distribution in source code, by including this License in the root directory of the source code with the Implementation; 2.1.3.2. Non-Source Code Distributions. For distribution in any form other than source code, by including this License in the documentation, legal notices, via notice in the software, and/or other written materials provided with the Implementation; or 2.1.3.3. Via Notices.md. By issuing pull request or commit to the Specification\u2019s repository\u2019s Notices.md file by the Implementer\u2019s authorized representative, including the Implementer\u2019s name, authorized individual and system identifier, and Specification version. 2.1.4. Defensive Termination. If any Licensee files or maintains a claim in a court asserting that a Necessary Claim is infringed by an Implementation, any licenses granted under this License to the Licensee are immediately terminated unless 1) that claim is directly in response to a claim against Licensee regarding an Implementation, or 2) that claim was brought to enforce the terms of this License, including intervention in a third-party action by a Licensee. 2.1.5. Additional Conditions. This License is not an assurance (i) that any of Contributor\u2019s copyrights or issued patent claims cover an Implementation of the Specification or are enforceable or (ii) that an Implementation of the Specification would not infringe intellectual property rights of any third party. 2.2. Patent Licensing Commitment. In addition to the rights granted in Section 2.1, Contributor agrees to grant everyone a no charge, royalty-free license on reasonable and non-discriminatory terms to Contributor\u2019s Necessary Claims that are within Scope for: Implementations of a Draft Specification, where such license applies only to those Necessary Claims infringed by implementing Contributor's Contribution(s) included in that Draft Specification, and Implementations of the Approved Specification. This patent licensing commitment does not apply to those claims subject to Contributor\u2019s Exclusion Notice under Section 3. 2.3. Effect of Withdrawal. Contributor may withdraw from the Working Group by issuing a pull request or commit providing notice of withdrawal to the Working Group repository\u2019s Notices.md file. All of Contributor\u2019s existing commitments and obligations with respect to the Working Group up to the date of that withdrawal notice will remain in effect, but no new obligations will be incurred. 2.4. Binding Encumbrance. This License is binding on any future owner, assignee, or party who has been given the right to enforce any Necessary Claims against third parties. 3. Patent Exclusion. 3.1. As a Result of Contributions. Contributor may exclude Necessary Claims from its licensing commitments incurred under Section 2.1.1 by issuing an Exclusion Notice within 45 days of the date of that Contribution. Contributor may not issue an Exclusion Notice for any material that has been included in a Draft Deliverable for more than 45 days prior to the date of that Contribution. 3.2. As a Result of a Draft Specification Becoming an Approved Specification. Prior to the adoption of a Draft Specification as an Approved Specification, Contributor may exclude Necessary Claims from its licensing commitments under this Agreement by issuing an Exclusion Notice. Contributor may not issue an Exclusion Notice for patents that were eligible to have been excluded pursuant to Section 3.1. 4. Source Code License. Any source code developed by the Working Group is solely subject the source code license included in the Working Group\u2019s repository for that code. If no source code license is included, the source code will be subject to the MIT License. 5. No Other Rights. Except as specifically set forth in this License, no other express or implied patent, trademark, copyright, or other rights are granted under this License, including by implication, waiver, or estoppel. 6. Antitrust Compliance. Contributor acknowledge that it may compete with other participants in various lines of business and that it is therefore imperative that they and their respective representatives act in a manner that does not violate any applicable antitrust laws and regulations. This License does not restrict any Contributor from engaging in similar specification development projects. Each Contributor may design, develop, manufacture, acquire or market competitive deliverables, products, and services, and conduct its business, in whatever way it chooses. No Contributor is obligated to announce or market any products or services. Without limiting the generality of the foregoing, the Contributors agree not to have any discussion relating to any product pricing, methods or channels of product distribution, division of markets, allocation of customers or any other topic that should not be discussed among competitors under the auspices of the Working Group. 7. Non-Circumvention. Contributor agrees that it will not intentionally take or willfully assist any third party to take any action for the purpose of circumventing any obligations under this License. 8. Representations, Warranties and Disclaimers. 8.1. Representations, Warranties and Disclaimers. Contributor and Licensee represents and warrants that 1) it is legally entitled to grant the rights set forth in this License and 2) it will not intentionally include any third party materials in any Contribution unless those materials are available under terms that do not conflict with this License. IN ALL OTHER RESPECTS ITS CONTRIBUTIONS ARE PROVIDED \"AS IS.\" The entire risk as to implementing or otherwise using the Contribution or the Specification is assumed by the implementer and user. Except as stated herein, CONTRIBUTOR AND LICENSEE EXPRESSLY DISCLAIM ANY WARRANTIES (EXPRESS, IMPLIED, OR OTHERWISE), INCLUDING IMPLIED WARRANTIES OF MERCHANTABILITY, NON-INFRINGEMENT, FITNESS FOR A PARTICULAR PURPOSE, CONDITIONS OF QUALITY, OR TITLE, RELATED TO THE CONTRIBUTION OR THE SPECIFICATION. IN NO EVENT WILL ANY PARTY BE LIABLE TO ANY OTHER PARTY FOR LOST PROFITS OR ANY FORM OF INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER FROM ANY CAUSES OF ACTION OF ANY KIND WITH RESPECT TO THIS AGREEMENT, WHETHER BASED ON BREACH OF CONTRACT, TORT (INCLUDING NEGLIGENCE), OR OTHERWISE, AND WHETHER OR NOT THE OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. Any obligations regarding the transfer, successors in interest, or assignment of Necessary Claims will be satisfied if Contributor or Licensee notifies the transferee or assignee of any patent that it knows contains Necessary Claims or necessary claims under this License. Nothing in this License requires Contributor to undertake a patent search. If Contributor is 1) employed by or acting on behalf of an employer, 2) is making a Contribution under the direction or control of a third party, or 3) is making the Contribution as a consultant, contractor, or under another similar relationship with a third party, Contributor represents that they have been authorized by that party to enter into this License on its behalf. 8.2. Distribution Disclaimer. Any distributions of technical information to third parties must include a notice materially similar to the following: \u201cTHESE MATERIALS ARE PROVIDED \u201cAS IS.\u201d The Contributors and Licensees expressly disclaim any warranties (express, implied, or otherwise), including implied warranties of merchantability, non-infringement, fitness for a particular purpose, or title, related to the materials. The entire risk as to implementing or otherwise using the materials is assumed by the implementer and user. IN NO EVENT WILL THE CONTRIBUTORS OR LICENSEES BE LIABLE TO ANY OTHER PARTY FOR LOST PROFITS OR ANY FORM OF INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER FROM ANY CAUSES OF ACTION OF ANY KIND WITH RESPECT TO THIS DELIVERABLE OR ITS GOVERNING AGREEMENT, WHETHER BASED ON BREACH OF CONTRACT, TORT (INCLUDING NEGLIGENCE), OR OTHERWISE, AND WHETHER OR NOT THE OTHER MEMBER HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\u201d 9. Definitions. 9.1. Affiliate. \u201cAffiliate\u201d means an entity that directly or indirectly Controls, is Controlled by, or is under common Control of that party. 9.2. Approved Specification. \u201cApproved Specification\u201d means the final version and contents of any Draft Specification designated as an Approved Specification as set forth in the accompanying Governance.md file. 9.3. Contribution. \u201cContribution\u201d means any original work of authorship, including any modifications or additions to an existing work, that Contributor submits for inclusion in a Draft Specification, which is included in a Draft Specification or Approved Specification. 9.4. Contributor. \u201cContributor\u201d means any person or entity that has indicated its acceptance of the License 1) by making a Contribution to the Specification, or 2) by entering into the Community Specification Contributor License Agreement for the Specification. Contributor includes its Affiliates, assigns, agents, and successors in interest. 9.5. Control. \u201cControl\u201d means direct or indirect control of more than 50% of the voting power to elect directors of that corporation, or for any other entity, the power to direct management of such entity. 9.6. Draft Specification. \u201cDraft Specification\u201d means all versions of the material (except an Approved Specification) developed by this Working Group for the purpose of creating, commenting on, revising, updating, modifying, or adding to any document that is to be considered for inclusion in the Approved Specification. 9.7. Exclusion Notice. \u201cExclusion Notice\u201d means a written notice made by making a pull request or commit to the repository\u2019s Notices.md file that identifies patents that Contributor is excluding from its patent licensing commitments under this License. The Exclusion Notice for issued patents and published applications must include the Draft Specification\u2019s name, patent number(s) or title and application number(s), as the case may be, for each of the issued patent(s) or pending patent application(s) that the Contributor is excluding from the royalty-free licensing commitment set forth in this License. If an issued patent or pending patent application that may contain Necessary Claims is not set forth in the Exclusion Notice, those Necessary Claims shall continue to be subject to the licensing commitments under this License. The Exclusion Notice for unpublished patent applications must provide either: (i) the text of the filed application; or (ii) identification of the specific part(s) of the Draft Specification whose implementation makes the excluded claim a Necessary Claim. If (ii) is chosen, the effect of the exclusion will be limited to the identified part(s) of the Draft Specification. 9.8. Implementation. \u201cImplementation\u201d means making, using, selling, offering for sale, importing or distributing any implementation of the Specification 1) only to the extent it implements the Specification and 2) so long as all required portions of the Specification are implemented. 9.9. License. \u201cLicense\u201d means this Community Specification License. 9.10. Licensee. \u201cLicensee\u201d means any person or entity that has indicated its acceptance of the License as set forth in Section 2.1.3. Licensee includes its Affiliates, assigns, agents, and successors in interest. 9.11. Necessary Claims. \u201cNecessary Claims\u201d are those patent claims, if any, that a party owns or controls, including those claims later acquired, that are necessary to implement the required portions (including the required elements of optional portions) of the Specification that are described in detail and not merely referenced in the Specification. 9.12. Specification. \u201cSpecification\u201d means a Draft Specification or Approved Specification included in the Working Group\u2019s repository subject to this License, and the version of the Specification implemented by the Licensee. 9.13. Scope. \u201cScope\u201d has the meaning as set forth in the accompanying Scope.md file included in this Specification\u2019s repository. Changes to Scope do not apply retroactively. If no Scope is provided, each Contributor\u2019s Necessary Claims are limited to that Contributor\u2019s Contributions. 9.14. Working Group. \u201cWorking Group\u201d means this project to develop specifications, standards, best practices, guidelines, and other similar materials under this License. The text of this Community Specification License is Copyright 2020 Joint Development Foundation and is licensed under the Creative Commons Attribution 4.0 International License available at https://creativecommons.org/licenses/by/4.0/. SPDX-License-Identifier: CC-BY-4.0","title":"Community Specification License 1.0"},{"location":"governance/Governance/","text":"Community Specification Governance Policy 1.0 This document provides the governance policy for specifications and other documents developed using the Community Specification process in a repository (each a \u201cWorking Group\u201d). Each Working Group and must adhere to the requirements in this document. 1. Roles. Each Working Group may include the following roles. Additional roles may be adopted and documented by the Working Group. 1.1. Maintainer. \u201cMaintainers\u201d are responsible for organizing activities around developing, maintaining, and updating the specification(s) developed by the Working Group. Maintainers are also responsible for determining consensus and coordinating appeals. Each Working Group will designate one or more Maintainer for that Working Group. A Working Group may select a new or additional Maintainer(s) upon Approval of the Working Group Participants. 1.2. Editor. \u201cEditors\u201d are responsible for ensuring that the contents of the document accurately reflect the decisions that have been made by the group, and that the specification adheres to formatting and content guidelines. Each Working Group will designate an Editor for that Working Group. A Working Group may select a new Editor upon Approval of the Working Group Participants. 1.3. Participants. \u201cParticipants\u201d are those that have made Contributions to the Working Group subject to the Community Specification License. 2. Decision Making. 2.1. Consensus-Based Decision Making. Working Groups make decisions through a consensus process (\u201cApproval\u201d or \u201cApproved\u201d). While the agreement of all Participants is preferred, it is not required for consensus. Rather, the Maintainer will determine consensus based on their good faith consideration of a number of factors, including the dominant view of the Working Group Participants and nature of support and objections. The Maintainer will document evidence of consensus in accordance with these requirements. 2.2. Appeal Process. Decisions may be appealed be via a pull request or an issue, and that appeal will be considered by the Maintainer in good faith, who will respond in writing within a reasonable time. 3. Ways of Working. Inspired by ANSI\u2019s Essential Requirements for Due Process , Community Specification Working Groups must adhere to consensus-based due process requirements. These requirements apply to activities related to the development of consensus for approval, revision, reaffirmation, and withdrawal of Community Specifications. Due process means that any person (organization, company, government agency, individual, etc.) with a direct and material interest has a right to participate by: a) expressing a position and its basis, b) having that position considered, and c) having the right to appeal. Due process allows for equity and fair play. The following constitute the minimum acceptable due process requirements for the development of consensus. 3.1. Openness. Participation shall be open to all persons who are directly and materially affected by the activity in question. There shall be no undue financial barriers to participation. Voting membership on the consensus body shall not be conditional upon membership in any organization, nor unreasonably restricted on the basis of technical qualifications or other such requirements. Membership in a Working Group\u2019s parent organization, if any, may be required. 3.2. Lack of Dominance. The development process shall not be dominated by any single interest category, individual or organization. Dominance means a position or exercise of dominant authority, leadership, or influence by reason of superior leverage, strength, or representation to the exclusion of fair and equitable consideration of other viewpoints. 3.3. Balance. The development process should have a balance of interests. Participants from diverse interest categories shall be sought with the objective of achieving balance. 3.4. Coordination and Harmonization. Good faith efforts shall be made to resolve potential conflicts between and among deliverables developed under this Working Group and existing industry standards. 3.5. Consideration of Views and Objections. Prompt consideration shall be given to the written views and objections of all Participants. 3.6. Written procedures. This governance document and other materials documenting the Community Specification development process shall be available to any interested person. 4. Specification Development Process. 4.1. Pre-Draft. Any Participant may submit a proposed initial draft document as a candidate Draft Specification of that Working Group. The Maintainer will designate each submission as a \u201cPre-Draft\u201d document. 4.2. Draft. Each Pre-Draft document of a Working Group must first be Approved to become a\u201d Draft Specification\u201d. Once the Working Group approves a document as a Draft Specification, the Draft Specification becomes the basis for all going forward work on that specification. 4.3. Working Group Approval. Once a Working Group believes it has achieved the objectives for its specification as described in the Scope, it will Approve that Draft Specification and progress it to \u201cApproved Specification\u201d status. 4.4. Publication and Submission. Upon the designation of a Draft Specification as an Approved Specification, the Maintainer will publish the Approved Specification in a manner agreed upon by the Working Group Participants (i.e., Working Group Participant only location, publicly available location, Working Group maintained website, Working Group member website, etc.). The publication of an Approved Specification in a publicly accessible manner must include the terms under which the Approved Specification is being made available under. 4.5. Submissions to Standards Bodies. No Draft Specification or Approved Specification may be submitted to another standards development organization without Working group Approval. Upon reaching Approval, the Maintainer will coordinate the submission of the applicable Draft Specification or Approved Specification to another standards development organization. Working Group Participants that developed that Draft Specification or Approved Specification agree to grant the copyright rights necessary to make those submissions. 5. Non-Confidential, Restricted Disclosure. Information disclosed in connection with any Working Group activity, including but not limited to meetings, Contributions, and submissions, is not confidential, regardless of any markings or statements to the contrary. Notwithstanding the foregoing, if the Working Group is collaborating via a private repository, the Participants will not make any public disclosures of that information contained in that private repository without the Approval of the Working Group.","title":"Community Specification Governance Policy 1.0"},{"location":"governance/Governance/#community-specification-governance-policy-10","text":"This document provides the governance policy for specifications and other documents developed using the Community Specification process in a repository (each a \u201cWorking Group\u201d). Each Working Group and must adhere to the requirements in this document.","title":"Community Specification Governance Policy 1.0"},{"location":"governance/Governance/#1-roles","text":"Each Working Group may include the following roles. Additional roles may be adopted and documented by the Working Group. 1.1. Maintainer. \u201cMaintainers\u201d are responsible for organizing activities around developing, maintaining, and updating the specification(s) developed by the Working Group. Maintainers are also responsible for determining consensus and coordinating appeals. Each Working Group will designate one or more Maintainer for that Working Group. A Working Group may select a new or additional Maintainer(s) upon Approval of the Working Group Participants. 1.2. Editor. \u201cEditors\u201d are responsible for ensuring that the contents of the document accurately reflect the decisions that have been made by the group, and that the specification adheres to formatting and content guidelines. Each Working Group will designate an Editor for that Working Group. A Working Group may select a new Editor upon Approval of the Working Group Participants. 1.3. Participants. \u201cParticipants\u201d are those that have made Contributions to the Working Group subject to the Community Specification License.","title":"1. Roles."},{"location":"governance/Governance/#2-decision-making","text":"2.1. Consensus-Based Decision Making. Working Groups make decisions through a consensus process (\u201cApproval\u201d or \u201cApproved\u201d). While the agreement of all Participants is preferred, it is not required for consensus. Rather, the Maintainer will determine consensus based on their good faith consideration of a number of factors, including the dominant view of the Working Group Participants and nature of support and objections. The Maintainer will document evidence of consensus in accordance with these requirements. 2.2. Appeal Process. Decisions may be appealed be via a pull request or an issue, and that appeal will be considered by the Maintainer in good faith, who will respond in writing within a reasonable time.","title":"2. Decision Making."},{"location":"governance/Governance/#3-ways-of-working","text":"Inspired by ANSI\u2019s Essential Requirements for Due Process , Community Specification Working Groups must adhere to consensus-based due process requirements. These requirements apply to activities related to the development of consensus for approval, revision, reaffirmation, and withdrawal of Community Specifications. Due process means that any person (organization, company, government agency, individual, etc.) with a direct and material interest has a right to participate by: a) expressing a position and its basis, b) having that position considered, and c) having the right to appeal. Due process allows for equity and fair play. The following constitute the minimum acceptable due process requirements for the development of consensus. 3.1. Openness. Participation shall be open to all persons who are directly and materially affected by the activity in question. There shall be no undue financial barriers to participation. Voting membership on the consensus body shall not be conditional upon membership in any organization, nor unreasonably restricted on the basis of technical qualifications or other such requirements. Membership in a Working Group\u2019s parent organization, if any, may be required. 3.2. Lack of Dominance. The development process shall not be dominated by any single interest category, individual or organization. Dominance means a position or exercise of dominant authority, leadership, or influence by reason of superior leverage, strength, or representation to the exclusion of fair and equitable consideration of other viewpoints. 3.3. Balance. The development process should have a balance of interests. Participants from diverse interest categories shall be sought with the objective of achieving balance. 3.4. Coordination and Harmonization. Good faith efforts shall be made to resolve potential conflicts between and among deliverables developed under this Working Group and existing industry standards. 3.5. Consideration of Views and Objections. Prompt consideration shall be given to the written views and objections of all Participants. 3.6. Written procedures. This governance document and other materials documenting the Community Specification development process shall be available to any interested person.","title":"3. Ways of Working."},{"location":"governance/Governance/#4-specification-development-process","text":"4.1. Pre-Draft. Any Participant may submit a proposed initial draft document as a candidate Draft Specification of that Working Group. The Maintainer will designate each submission as a \u201cPre-Draft\u201d document. 4.2. Draft. Each Pre-Draft document of a Working Group must first be Approved to become a\u201d Draft Specification\u201d. Once the Working Group approves a document as a Draft Specification, the Draft Specification becomes the basis for all going forward work on that specification. 4.3. Working Group Approval. Once a Working Group believes it has achieved the objectives for its specification as described in the Scope, it will Approve that Draft Specification and progress it to \u201cApproved Specification\u201d status. 4.4. Publication and Submission. Upon the designation of a Draft Specification as an Approved Specification, the Maintainer will publish the Approved Specification in a manner agreed upon by the Working Group Participants (i.e., Working Group Participant only location, publicly available location, Working Group maintained website, Working Group member website, etc.). The publication of an Approved Specification in a publicly accessible manner must include the terms under which the Approved Specification is being made available under. 4.5. Submissions to Standards Bodies. No Draft Specification or Approved Specification may be submitted to another standards development organization without Working group Approval. Upon reaching Approval, the Maintainer will coordinate the submission of the applicable Draft Specification or Approved Specification to another standards development organization. Working Group Participants that developed that Draft Specification or Approved Specification agree to grant the copyright rights necessary to make those submissions.","title":"4. Specification Development Process."},{"location":"governance/Governance/#5-non-confidential-restricted-disclosure","text":"Information disclosed in connection with any Working Group activity, including but not limited to meetings, Contributions, and submissions, is not confidential, regardless of any markings or statements to the contrary. Notwithstanding the foregoing, if the Working Group is collaborating via a private repository, the Participants will not make any public disclosures of that information contained in that private repository without the Approval of the Working Group.","title":"5. Non-Confidential, Restricted Disclosure."},{"location":"governance/License/","text":"Licenses Specification License Specifications in the repository are subject to the Community Specification License 1.0 available at https://github.com/CommunitySpecification/1.0 . Source Code License If source code is included in this repository, or for sample or reference code included in the specification itself, that code is subject to the MIT license unless otherwise designated. In the case of any conflict or confusion within this specification repository between the Community Specification License and the MIT or other designated license, the terms of the Community Specification License shall apply. If source code is included in this repository, or for sample or reference code included in the specification itself, that code is subject to the MIT license unless otherwise marked. In the case of any conflict or confusion within this specification repository between the Community Specification License and the designated source code license, the terms of the Community Specification License shall apply.","title":"Licenses"},{"location":"governance/License/#licenses","text":"","title":"Licenses"},{"location":"governance/License/#specification-license","text":"Specifications in the repository are subject to the Community Specification License 1.0 available at https://github.com/CommunitySpecification/1.0 .","title":"Specification License"},{"location":"governance/License/#source-code-license","text":"If source code is included in this repository, or for sample or reference code included in the specification itself, that code is subject to the MIT license unless otherwise designated. In the case of any conflict or confusion within this specification repository between the Community Specification License and the MIT or other designated license, the terms of the Community Specification License shall apply. If source code is included in this repository, or for sample or reference code included in the specification itself, that code is subject to the MIT license unless otherwise marked. In the case of any conflict or confusion within this specification repository between the Community Specification License and the designated source code license, the terms of the Community Specification License shall apply.","title":"Source Code License"},{"location":"governance/Notices/","text":"Notices Community Specification Contributor License Agreement 1.0 By making a Contribution to this repository, I agree to the terms of the following documents located at https://github.com/CommunitySpecification/1.0 : (a) Community Specification License 1.0 Community_Specification_License-v1.md (b) Community Specification Governance Policy 1.0 Governance.md (c) Community Specification Contribution Policy 1.0 CONTRIBUTING.md (d) Community Specification Code of Conduct Code_of_Conduct.md In addition, for source code contributions, I certify that: (a) The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file; or (b) The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file; or (c) The contribution was provided directly to me by some other person who certified (a), (b) or (c) and I have not modified it. (d) I understand and agree that this working group and the contribution may be public and that a record of the contribution (including all personal information I submit with it, including my sign-off) is maintained indefinitely and may be redistributed consistent with this agreement or the open source license(s) involved. I represent that I am legally entitled to make the grants set forth in the documents above. If my employer(s) has rights to intellectual property that may be infringed by the materials developed by this Working Group, I represent that I have received permission to enter these agreements on behalf of that employer. License Acceptance Licensee\u2019s name: Joseph Gregorio Authorized individual and system identifier: jcgregorio@google.com Specification version: 1.0 Licensee\u2019s name: Florin Malita Authorized individual and system identifier: fmalita@google.com Specification version: 1.0 Licensee\u2019s name: Hern\u00e1n Torrisi Authorized individual and system identifier: hernantorrisi@gmail.com Specification version: 1.0 Licensee\u2019s name: Mike Reed Authorized individual and system identifier: reed@google.com Specification version: 1.0 Licensee\u2019s name: Mattia Basaglia Authorized individual and system identifier: glax@dragon.best Specification version: 1.0 Licensee's name: Jorge Betancourt Authorized individual and system identifier: jmbetancourt@google.com Specification version: 1.0 Licensee's name: Jawish Hameed Authorized individual and system identifier: jawish@lottiefiles.com Specification version: 1.0 Licensee's name: Aidos Sabit Authorized individual and system identifier: aidosmf@gmail.com Specification version: 1.0 Licensee's name: Alistair Thomson Authorized individual and system identifier: alistair@lottielab.io Specification version: 1.0 Licensee's name: Marcus Stenbeck Authorized individual and system identifier: marcus.stenbeck@gmail.com Specification version: 1.0 Licensee's name: Brandon Wilson Authorized individual and system identifier: bwils@google.com Specification version: 1.0 Licensee's name: Naail Abdul Rahman Authorized individual and system identifier: kudanai@gmail.com Specification version: 1.0 Licensee's name: Henry Huck Authorized individual and system identifier: henry@jitter.video Specification version: 1.0","title":"Notices"},{"location":"governance/Notices/#notices","text":"","title":"Notices"},{"location":"governance/Notices/#community-specification-contributor-license-agreement-10","text":"By making a Contribution to this repository, I agree to the terms of the following documents located at https://github.com/CommunitySpecification/1.0 : (a) Community Specification License 1.0 Community_Specification_License-v1.md (b) Community Specification Governance Policy 1.0 Governance.md (c) Community Specification Contribution Policy 1.0 CONTRIBUTING.md (d) Community Specification Code of Conduct Code_of_Conduct.md In addition, for source code contributions, I certify that: (a) The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file; or (b) The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file; or (c) The contribution was provided directly to me by some other person who certified (a), (b) or (c) and I have not modified it. (d) I understand and agree that this working group and the contribution may be public and that a record of the contribution (including all personal information I submit with it, including my sign-off) is maintained indefinitely and may be redistributed consistent with this agreement or the open source license(s) involved. I represent that I am legally entitled to make the grants set forth in the documents above. If my employer(s) has rights to intellectual property that may be infringed by the materials developed by this Working Group, I represent that I have received permission to enter these agreements on behalf of that employer.","title":"Community Specification Contributor License Agreement 1.0"},{"location":"governance/Notices/#license-acceptance","text":"Licensee\u2019s name: Joseph Gregorio Authorized individual and system identifier: jcgregorio@google.com Specification version: 1.0 Licensee\u2019s name: Florin Malita Authorized individual and system identifier: fmalita@google.com Specification version: 1.0 Licensee\u2019s name: Hern\u00e1n Torrisi Authorized individual and system identifier: hernantorrisi@gmail.com Specification version: 1.0 Licensee\u2019s name: Mike Reed Authorized individual and system identifier: reed@google.com Specification version: 1.0 Licensee\u2019s name: Mattia Basaglia Authorized individual and system identifier: glax@dragon.best Specification version: 1.0 Licensee's name: Jorge Betancourt Authorized individual and system identifier: jmbetancourt@google.com Specification version: 1.0 Licensee's name: Jawish Hameed Authorized individual and system identifier: jawish@lottiefiles.com Specification version: 1.0 Licensee's name: Aidos Sabit Authorized individual and system identifier: aidosmf@gmail.com Specification version: 1.0 Licensee's name: Alistair Thomson Authorized individual and system identifier: alistair@lottielab.io Specification version: 1.0 Licensee's name: Marcus Stenbeck Authorized individual and system identifier: marcus.stenbeck@gmail.com Specification version: 1.0 Licensee's name: Brandon Wilson Authorized individual and system identifier: bwils@google.com Specification version: 1.0 Licensee's name: Naail Abdul Rahman Authorized individual and system identifier: kudanai@gmail.com Specification version: 1.0 Licensee's name: Henry Huck Authorized individual and system identifier: henry@jitter.video Specification version: 1.0","title":"License Acceptance"},{"location":"specs/assets/","text":"Assets Asset Composition Diagram for Asset Asset Visual Object Precomposition Image Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like id string ID Unique identifier used by layers when referencing this asset Precomposition Asset containing a composition that can be referenced by layers. Composition Diagram for Precomposition Precomposition Asset Composition Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like id string ID Unique identifier used by layers when referencing this asset layers array of Layer Layers Layers Image Asset containing an image that can be referenced by layers. Image formats supported vary depending on the player. Some commonly supported formats are JPEG, GIF, PNG and SVG. Composition Diagram for Image Image Asset Slottable Object Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like id string ID Unique identifier used by layers when referencing this asset sid string Slot Id Identifier to look up the slot w number Width Width of the image h number Height Height of the image p string File Name Name of the image file or a data url u string File Path Path to the image file e 0-1 integer Embedded If '1', 'p' is a Data URL If the dimensions of the image asset does not match the size given by w and h , renderers MUST ensure image layers referencing that asset do not have any visuals exceeding the w - h size. It's RECOMMENDED they scale the image maintaining its aspect ratio and they center it within the ( 0 , 0 ) , ( w , h ) box. Even if an image asset does not have any intrinsic size, its contents MUST still stay within the w - h bounds when rendered. Authoring tools SHOULD export files where w and h match the physical size of the assets.","title":"Assets"},{"location":"specs/assets/#assets","text":"","title":"Assets"},{"location":"specs/assets/#asset","text":"Composition Diagram for Asset Asset Visual Object Precomposition Image Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like id string ID Unique identifier used by layers when referencing this asset","title":"Asset"},{"location":"specs/assets/#precomposition","text":"Asset containing a composition that can be referenced by layers. Composition Diagram for Precomposition Precomposition Asset Composition Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like id string ID Unique identifier used by layers when referencing this asset layers array of Layer Layers Layers","title":"Precomposition"},{"location":"specs/assets/#image","text":"Asset containing an image that can be referenced by layers. Image formats supported vary depending on the player. Some commonly supported formats are JPEG, GIF, PNG and SVG. Composition Diagram for Image Image Asset Slottable Object Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like id string ID Unique identifier used by layers when referencing this asset sid string Slot Id Identifier to look up the slot w number Width Width of the image h number Height Height of the image p string File Name Name of the image file or a data url u string File Path Path to the image file e 0-1 integer Embedded If '1', 'p' is a Data URL If the dimensions of the image asset does not match the size given by w and h , renderers MUST ensure image layers referencing that asset do not have any visuals exceeding the w - h size. It's RECOMMENDED they scale the image maintaining its aspect ratio and they center it within the ( 0 , 0 ) , ( w , h ) box. Even if an image asset does not have any intrinsic size, its contents MUST still stay within the w - h bounds when rendered. Authoring tools SHOULD export files where w and h match the physical size of the assets.","title":"Image"},{"location":"specs/composition/","text":"Composition Animation Top level object, describing the animation Composition Diagram for Animation Animation Visual Object Composition Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like layers array of Layer Layers Layers ver integer Specification Version Specification version this Lottie is targeting. This is a 6 digit number with version components encoded as MMmmpp , with MM being major version, mm being minor and pp being patch. fr number Framerate Framerate in frames per second ip number In Point Frame the animation starts at (usually 0) op number Out Point Frame the animation stops/loops at, which makes this the duration in frames when ip is 0 w integer Width Width of the animation h integer Height Height of the animation assets array of Asset Assets List of assets that can be referenced by layers markers array of Marker Markers Markers defining named sections of the composition. slots object Slots Dictionary of slot ids that will replace matching properties. Versioning Guidelines The Lottie specification version number uses a semantic versioning system, tools implementing the specification SHOULD consider the following guidelines: Major version signal the possibility of breaking changes that are not compatible with previous versions of the specification. Minor version updates typically add new functionality but do not contain breaking changes for existing features. Patch version updates typically make minor changes or clarifications to already existing functionality. Authoring Tools Authoring tools SHOULD specify the latest version of the Lottie Specification. They MAY allow the major version to be configurable to facilitate playback on a wider range of players. Changing the targeted major version MAY also require changes to the produced animation in the case of any breaking changes between major versions. Animation Players Players SHOULD determine what major versions they support and handle breaking changes across supported major versions. Players SHOULD be able to handle animations that specify both newer and older versions of the Lottie specification and SHOULD issue a warning if: The animation specifies a major version that is not supported. The animation specifies a newer minor version. No warning needed if the specified patch version is different. Composition An object that contains a list of layers Composition Diagram for Composition Composition Precomposition Animation Attribute Type Title Description layers array of Layer Layers Layers","title":"Composition"},{"location":"specs/composition/#composition_1","text":"","title":"Composition"},{"location":"specs/composition/#animation","text":"Top level object, describing the animation Composition Diagram for Animation Animation Visual Object Composition Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like layers array of Layer Layers Layers ver integer Specification Version Specification version this Lottie is targeting. This is a 6 digit number with version components encoded as MMmmpp , with MM being major version, mm being minor and pp being patch. fr number Framerate Framerate in frames per second ip number In Point Frame the animation starts at (usually 0) op number Out Point Frame the animation stops/loops at, which makes this the duration in frames when ip is 0 w integer Width Width of the animation h integer Height Height of the animation assets array of Asset Assets List of assets that can be referenced by layers markers array of Marker Markers Markers defining named sections of the composition. slots object Slots Dictionary of slot ids that will replace matching properties.","title":"Animation"},{"location":"specs/composition/#versioning-guidelines","text":"The Lottie specification version number uses a semantic versioning system, tools implementing the specification SHOULD consider the following guidelines: Major version signal the possibility of breaking changes that are not compatible with previous versions of the specification. Minor version updates typically add new functionality but do not contain breaking changes for existing features. Patch version updates typically make minor changes or clarifications to already existing functionality.","title":"Versioning Guidelines"},{"location":"specs/composition/#authoring-tools","text":"Authoring tools SHOULD specify the latest version of the Lottie Specification. They MAY allow the major version to be configurable to facilitate playback on a wider range of players. Changing the targeted major version MAY also require changes to the produced animation in the case of any breaking changes between major versions.","title":"Authoring Tools"},{"location":"specs/composition/#animation-players","text":"Players SHOULD determine what major versions they support and handle breaking changes across supported major versions. Players SHOULD be able to handle animations that specify both newer and older versions of the Lottie specification and SHOULD issue a warning if: The animation specifies a major version that is not supported. The animation specifies a newer minor version. No warning needed if the specified patch version is different.","title":"Animation Players"},{"location":"specs/composition/#composition","text":"An object that contains a list of layers Composition Diagram for Composition Composition Precomposition Animation Attribute Type Title Description layers array of Layer Layers Layers","title":"Composition"},{"location":"specs/constants/","text":"Enumerations Fill Rule Rule used to handle multiple shapes rendered with the same fill object Value Name Description 1 Non Zero Everything is colored (You can think of this as an OR) 2 Even Odd Colored based on intersections and path direction, can be used to create \"holes\" Example Fill Rule Non Zero Even Odd var lottie_player_3 = new PlaygroundPlayer( 3, 'playground_3_2', 'lottie_target_3', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{f5d94f54-bb8f-4f07-be45-232ebd4b9eb1}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{4b0993ed-e35b-48a5-ab12-687dbc147c7c}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Path\", \"mn\": \"{29196ff2-0a65-48b4-a450-f9fbc3a3640d}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"Path\", \"mn\": \"{bb7e6c60-755e-4a21-a7ba-bd054feab5c7}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[125.51641791044776, 452.20298507462684], [240.71641791044777, 38.6865671641791], [435.8686567164179, 447.9044776119403], [42.125373134328356, 173.65970149253732], [460.8, 156.46567164179103]], \"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"p\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[0].it[1]; shape.r = Number(data[\"Fill Rule\"]); this.json_viewer_contents = lottie.layers[0].shapes[0].it[1]; }, {} ); Trim Multiple Shapes How to handle multiple shapes in trim path Value Name Description 1 Parallel All shapes apply the trim at the same time 2 Sequential Shapes are considered as a continuous sequence Multiple Shapes Parallel Sequential var lottie_player_4 = new PlaygroundPlayer( 4, 'playground_4_2', 'lottie_target_4', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [128, 128]}, \"or\": {\"a\": 0, \"k\": 100}, \"ir\": {\"a\": 0, \"k\": 50}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [384, 128]}, \"s\": {\"a\": 0, \"k\": [200, 200]}}, {\"ty\": \"rc\", \"nm\": \"Rect\", \"mn\": \"{0776f2df-2619-415c-b10d-f648f2edfa0f}\", \"d\": 1, \"p\": {\"a\": 0, \"k\": [128, 384]}, \"s\": {\"a\": 0, \"k\": [200, 200]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"sr\", \"nm\": \"Triangle\", \"mn\": \"{db373594-d0ae-44ff-9295-30ff72616af2}\", \"p\": {\"a\": 0, \"k\": [384, 384]}, \"or\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 3}, \"sy\": 2, \"os\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 50}, \"o\": {\"a\": 0, \"k\": 0}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 20}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { lottie.layers[0].shapes[4].m = Number(data[\"Multiple Shapes\"]); this.json_viewer_contents = lottie.layers[0].shapes[4]; }, {} ); Shape Direction Drawing direction of the shape curve, useful for trim path Value Name Description 1 Normal Usually clockwise 3 Reversed Usually counter clockwise Shape Direction Normal Reversed var lottie_player_5 = new PlaygroundPlayer( 5, 'playground_5_2', 'lottie_target_5', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [128, 128]}, \"or\": {\"a\": 0, \"k\": 100}, \"ir\": {\"a\": 0, \"k\": 50}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [384, 128]}, \"s\": {\"a\": 0, \"k\": [200, 200]}}, {\"ty\": \"rc\", \"nm\": \"Rect\", \"mn\": \"{0776f2df-2619-415c-b10d-f648f2edfa0f}\", \"d\": 1, \"p\": {\"a\": 0, \"k\": [128, 384]}, \"s\": {\"a\": 0, \"k\": [200, 200]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"sr\", \"nm\": \"Triangle\", \"mn\": \"{db373594-d0ae-44ff-9295-30ff72616af2}\", \"p\": {\"a\": 0, \"k\": [384, 384]}, \"or\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 3}, \"sy\": 2, \"os\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 50}, \"o\": {\"a\": 0, \"k\": 0}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 20}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { for ( let shape of lottie.layers[0].shapes ) shape.d = Number(data[\"Shape Direction\"]); this.json_viewer_contents = lottie.layers[0].shapes[1]; }, {} ); Star Type Whether a PolyStar is a star or a polygon Value Name 1 Star 2 Polygon Example Star Type Star Polygon var lottie_player_6 = new PlaygroundPlayer( 6, 'playground_6_2', 'lottie_target_6', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"layers\": [{\"ty\": 4, \"ddd\": 0, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ip\": 0, \"op\": 180, \"ind\": 0, \"st\": 0, \"sr\": 1, \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{9199543e-3552-4e51-a802-623f2a4a2ca1}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.979995422293431, 0.28000305180437934]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var star = lottie.layers[0].shapes[0].it[0]; star.sy = Number(data[\"Star Type\"]); if ( data[\"Star Type\"] == \"1\" ) { star[\"ir\"] = {\"a\": 0, \"k\": 100}; star[\"is\"] = {\"a\": 0, \"k\": 0}; } else { delete star[\"ir\"]; delete star[\"is\"]; } lottie.layers[0].shapes[0].it[0] = star; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); Line Cap Style at the end of a stoked line Value Name 1 Butt 2 Round 3 Square Example Line Cap Butt Round Square var lottie_player_7 = new PlaygroundPlayer( 7, 'playground_7_2', 'lottie_target_7', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.lc = Number(data[\"Line Cap\"]); shape.d = undefined; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} ); Line Join Style at a sharp corner of a stoked line Value Name 1 Miter 2 Round 3 Bevel Example Line Join Miter Round Bevel Miter Limit 3 var lottie_player_8 = new PlaygroundPlayer( 8, 'playground_8_3', 'lottie_target_8', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.lj = Number(data[\"Line Join\"]); shape.ml = data[\"Miter Limit\"]; shape.d = undefined; var trim = lottie.layers[0].shapes[1]; trim.e.k = 100; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} ); Mask Mode Describes how a mask interacts (blends) with the preceding masks in the stack. Value Name Description 'n' None The mask is ignored. 'a' Add Mask coverage is added (Normal blending). 's' Subtract Mask coverage is subtracted (Subtract blending). 'i' Intersect Mask coverage is intersected (Source-In blending). Example Mask Mode None Add Subtract Intersect Mask1 Opacity 100 Mask2 Opacity 100 var lottie_player_9 = new PlaygroundPlayer( 9, 'playground_9_4', 'lottie_target_9', {\"v\": \"5.12.0\", \"fr\": 30, \"ip\": 0, \"op\": 150, \"w\": 500, \"h\": 500, \"nm\": \"test2\", \"ddd\": 0, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ind\": 0, \"ty\": \"sh\", \"ix\": 1, \"ks\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"v\": [[0, -250], [58.779, -80.902], [237.764, -77.254], [95.106, 30.902], [146.946, 202.254], [0, 100], [-146.946, 202.254], [-95.106, 30.902], [-237.764, -77.254], [-58.779, -80.902]], \"c\": true}, \"ix\": 2}, \"nm\": \"Path 1\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ind\": 1, \"ty\": \"sh\", \"ix\": 2, \"ks\": {\"a\": 0, \"k\": {\"i\": [[-96.65, 0], [0, -69.036], [96.65, 0], [0, 69.036]], \"o\": [[96.65, 0], [0, 69.036], [-96.65, 0], [0, -69.036]], \"v\": [[0, -125], [175, 0], [0, 125], [-175, 0]], \"c\": true}, \"ix\": 2}, \"nm\": \"Path 2\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [1, 0, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 1, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"d\": [{\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 10, \"ix\": 1}}, {\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0, \"ix\": 7}}], \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 150, \"st\": 0, \"ct\": 1, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 1, \"nm\": \"Medium Green Solid 3\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"hasMask\": true, \"masksProperties\": [{\"inv\": false, \"mode\": \"a\", \"pt\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"v\": [[250, 0], [308.779, 169.098], [487.764, 172.746], [345.106, 280.902], [396.946, 452.254], [250, 350], [103.054, 452.254], [154.894, 280.902], [12.236, 172.746], [191.221, 169.098]], \"c\": true}, \"ix\": 1}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 3}, \"x\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Mask 1\"}, {\"inv\": false, \"mode\": \"a\", \"pt\": {\"a\": 0, \"k\": {\"i\": [[-96.65, 0], [0, -69.036], [96.65, 0], [0, 69.036]], \"o\": [[96.65, 0], [0, 69.036], [-96.65, 0], [0, -69.036]], \"v\": [[250, 125], [425, 250], [250, 375], [75, 250]], \"c\": true}, \"ix\": 1}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 3}, \"x\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Mask 2\"}], \"sw\": 500, \"sh\": 500, \"sc\": \"#97f487\", \"ip\": 0, \"op\": 150, \"st\": 0, \"bm\": 0}], \"markers\": [], \"props\": {}}, function (lottie, data) { let mask1 = lottie.layers[1].masksProperties[0]; let mask2 = lottie.layers[1].masksProperties[1]; mask1.o.k = Number(data[\"Mask1 Opacity\"]); mask2.o.k = Number(data[\"Mask2 Opacity\"]); mask2.mode = data[\"Mask Mode\"]; this.json_viewer_contents = lottie.layers[1].masksProperties[1]; }, {} ); Stroke Dash Type Type of a dash item in a stroked line Value Name 'd' Dash 'g' Gap 'o' Offset Matte Mode How a layer should mask another layer The value for Luma is calculated according to Rec.709 standard: Y = 0.2126 R + 0.7152 G + 0.0722 B Value Name Description 0 Normal The layer is not used as a track matte 1 Alpha The masked layer opacity is modulated by the track matte layer opacity 2 Inverted Alpha The masked layer opacity is modulated by the inverted track matte layer opacity 3 Luma The masked layer opacity is modulated by the track matte layer luminance 4 Inverted Luma The masked layer opacity is modulated by the inverted track matte layer luminance Example Matte Mode Normal Alpha Inverted Alpha Luma Inverted Luma var lottie_player_10 = new PlaygroundPlayer( 10, 'playground_10_2', 'lottie_target_10', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{b3d1b083-9de7-4537-a691-fc9aa42f9742}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Ellipse (Mask)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [153, 294]}, \"p\": {\"a\": 0, \"k\": [346, 211]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"mn\": \"{261eddeb-af92-4be1-932c-790b00c23933}\", \"p\": {\"a\": 0, \"k\": [137.0955223880597, 293.60820895522386]}, \"s\": {\"a\": 0, \"k\": [303.42089552238804, 315.55074626865667]}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{aa9c282c-253d-4d8d-ab05-4819c592fa85}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 1, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 6}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{2b2b0002-ff0c-4978-a33b-db4e0498848d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}], \"td\": 1}, {\"ddd\": 0, \"ty\": 4, \"ind\": 2, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Shapes (Masked)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{528994b7-40ff-4d12-81f8-603f274da12e}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{ce8756d7-289f-4f84-a135-d225d57c42e0}\", \"p\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"or\": {\"a\": 0, \"k\": 216.4160919189453}, \"ir\": {\"a\": 0, \"k\": 87.03440856933594}, \"r\": {\"a\": 0, \"k\": 261.54803466796875}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{efd05a25-a43b-451d-83d2-53a477087223}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{523ca39c-9e57-4547-bf0e-ba7496003579}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.19607843137254902, 0.3137254901960784, 0.6901960784313725]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"p\": {\"a\": 0, \"k\": [338.7223880597015, 209.76716417910447]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"Rectangle\", \"mn\": \"{d2d7a5d5-6d91-42e8-b40a-af52a112fe38}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{9ef8604e-7891-4909-a655-445131b4d842}\", \"p\": {\"a\": 0, \"k\": [209.17611940298502, 226.8]}, \"s\": {\"a\": 0, \"k\": [363.3313432835821, 369.3492537313433]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{444584d2-cb59-4cba-83a1-82cc605837fd}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{f75aed67-9b0e-41a9-b859-a14b5b0a320d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.7686274509803922, 0.8509803921568627, 0.9607843137254902]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"p\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}], \"tt\": 1, \"tp\": 1}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[1].tt = Number(data[\"Matte Mode\"]); this.json_viewer_contents = {...lottie.layers[1], shapes: [], ks: {}}; }, {} ); Gradient Type Whether a Gradient is a linear or radial. Value Name Description 1 Linear Colors transition in a single linear direction. 2 Radial Colors transition outward from a center point. Example Type Linear Radial var lottie_player_11 = new PlaygroundPlayer( 11, 'playground_11_2', 'lottie_target_11', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{3da63a46-0ec5-45b8-90fb-d31c5614d5be}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Start/End markers\", \"mn\": \"{04a8ef87-75fd-451c-868b-7413969c8ad9}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{078a0bf7-08ce-49f7-9dca-c473ad9ff09d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{efb1ff36-fe2b-4939-97a5-d75a167d003b}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{759da60a-0439-496c-89a9-66e1d721ceb7}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"\", \"mn\": \"{b56ba91b-5ef9-40d2-a1da-27265d105c7a}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{020e377d-646e-45f6-830f-756cfff57aa9}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[3.7994567051676293, -7.097994637365934], [5.33994951436286, -6.707992504500113], [6.327946284594615, -5.609490432573314], [6.672442201680043, -3.952002315682892], [6.672442201680043, -3.262995246756169], [1.901449879997, -3.262995246756169], [2.505949758118953, -1.4624984765244131], [4.124444517362934, -0.8449957342683567], [5.300948539338484, -0.968496282719568], [6.360449636240906, -1.326002681317033], [6.360449636240906, -0.32500304695117377], [5.307446162716568, 0.019500487512187806], [4.072448295582389, 0.12999817182929574], [2.3239477471311782, -0.2729992077926948], [1.1409537191554788, -1.4755013406585165], [0.7184558520213006, -3.4319943936098403], [1.1019527441311032, -5.395000304695118], [2.1809543285457136, -6.655996282719569], [3.7994567051676293, -7.097994637365934]], \"i\": [[0, 0], [-0.4290005687642191, -0.2600014219105473], [-0.22966394472361795, -0.4723332927073187], [0, -0.6326587852196304], [0, 0], [0, 0], [-0.3856627665691641, -0.411668494837371], [-0.69333373959349, 0], [-0.34233512087802254, 0.08233369896747422], [-0.3639989437235931, 0.15600390009750242], [0, 0], [0.34666686979674477, -0.07366512287807196], [0.47666504162604095, 0], [0.506997440561014, 0.2686649197479937], [0.281665244756119, 0.5330031688292207], [0, 0.7713255331383286], [-0.25566459473986836, 0.5459984155853892], [-0.4636697948698716, 0.29466556976424485], [-0.6153317895447388, 0]], \"o\": [[0.5979946373659342, 0], [0.4290005687642182, 0.2600014219105473], [0.22966394472361795, 0.47233329270731783], [0, 0], [0, 0], [0.017337152178804383, 0.7886626853171328], [0.3856627665691641, 0.411668494837371], [0.4420008937723443, 0], [0.34233512087802165, -0.08233369896747411], [0, 0], [-0.35533544588614685, 0.15600390009750242], [-0.34666686979674477, 0.07366512287807195], [-0.6586695917397929, 0], [-0.5069974405610138, -0.26866491974799367], [-0.28166524475611887, -0.5330031688292207], [0, -0.7626721918047954], [0.2556645947398686, -0.5459984155853901], [0.46366979486987203, -0.29466556976424396], [0, 0]]}}}, {\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{b3f5759c-30aa-4352-a4ea-23b71ead28ad}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[3.7864462236555916, -6.162001706292657], [2.4929545113627842, -5.635496160841521], [1.9274556082652068, -4.172997684317108], [5.476452926948174, -4.172997684317108], [5.06045268319208, -5.609498049951249], [3.7864462236555916, -6.162001706292657]], \"i\": [[0, 0], [0.3163344708617717, -0.3510036969674246], [0.06066479786994661, -0.6239952873821846], [0, 0], [0.2686699979999494, 0.36833577089427205], [0.5806676416910426, 0]], \"o\": [[-0.5459933373334334, 0], [-0.3163344708617717, 0.3510036969674246], [0, 0], [-0.008663497837446243, -0.5893311395284879], [-0.2686699979999503, -0.36833577089427205], [0, 0]]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 16]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{e16b0057-203a-4dab-8e5b-495775987f85}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{07bcfe04-40c2-4636-807c-d64982f7a44d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{0de90988-3e53-4e7a-8a7d-cb147d0c42b5}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{22460e65-f67b-48b8-844b-e361867d003b}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[5.645452073801845, -1.923997318682967], [4.891453536338409, -0.39000213286582164], [2.8634485393384836, 0.12999817182929574], [1.608957802070052, 0.013002864134103353], [0.679454876996925, -0.311992565439136], [0.679454876996925, -1.3519931748293708], [1.6869521347408687, -0.968496282719568], [2.8894542676066903, -0.7929995124878122], [4.150450245631141, -1.0724963436585915], [4.540444761119028, -1.820004875121878], [4.3974513425335635, -2.2880013406585165], [3.8839562785944652, -2.7040015844146104], [2.824447564314108, -3.171998049951249], [1.6674516472286809, -3.6919983546463664], [0.9264559738993475, -4.315998720280507], [0.666459630240756, -5.251999268731718], [1.3879548160579016, -6.616995307695193], [3.2794487830945775, -7.097994637365934], [4.468948051826296, -6.9744940889147236], [5.502443420460512, -6.629998171829296], [5.1124489049726245, -5.719995734268357], [4.189443603277582, -6.031995917085427], [3.2014468330458263, -6.162001706292657], [2.128950489387235, -5.934501096902423], [1.7584564614115354, -5.316990737268432], [1.9274556082652068, -4.82950140159754], [2.4929545113627842, -4.439499268731718], [3.552455608265207, -3.9910032907072677], [4.683453414460362, -3.4839982327683194], [5.398450976899423, -2.853500243756094], [5.645452073801845, -1.923997318682967]], \"i\": [[0, 0], [0.5026656916422914, -0.346666869796745], [0.8493376396909924, 0], [0.35099861871546767, 0.07799687179679493], [0.26866999799995006, 0.13866674791869799], [0, 0], [-0.3943313426585666, -0.11699784682117054], [-0.4073367459186481, 0], [-0.2599963436585919, 0.18633122078051945], [0, 0.31200780019500485], [0.09532894572364281, 0.13866674791869782], [0.2470010969024221, 0.13866674791869782], [0.45933804595114847, 0.17333089577239447], [0.32066621978049437, 0.17333597402435075], [0.17333089577239413, 0.24266426973174227], [0, 0.38133609590239725], [-0.48099679054476374, 0.32066621978049437], [-0.779999187479687, 0], [-0.36833577089427294, -0.08233369896747345], [-0.32066114152853853, -0.14733024575614362], [0, 0], [0.32066621978049437, 0.08667052613815329], [0.3379982937073427, 0], [0.24699601865046583, -0.15166707292682258], [0, -0.2600065001625049], [-0.11266609790244764, -0.13433499899997603], [-0.26433317082927044, -0.12566642291057306], [-0.4420008937723443, -0.17333089577239447], [-0.3119976436910923, -0.1733359740243503], [-0.16466739793494867, -0.24699601865046628], [0, -0.3726725980649519]], \"o\": [[0, 0.6759965874146854], [-0.5026656916422914, 0.3466668697967449], [-0.4853285394634863, 0], [-0.3509986187154679, -0.07799687179679493], [0, 0], [0.27733349583739597, 0.13866674791869804], [0.3943313426585664, 0.11699784682117043], [0.5806676416910421, 0], [0.2599963436585915, -0.18633122078051967], [0, -0.17333089577239424], [-0.09532894572364281, -0.13866674791869826], [-0.24700109690242256, -0.13866674791869826], [-0.45066439160979055, -0.17333089577239447], [-0.3206662197804946, -0.1733359740243503], [-0.17333089577239436, -0.24266426973174315], [0, -0.5893311395284879], [0.4809967905447634, -0.3206662197804935], [0.4246637415935397, 0], [0.36833577089427205, 0.08233369896747433], [0, 0], [-0.2946706480162007, -0.12132959573989321], [-0.3206662197804948, -0.08667052613815329], [-0.4680015437885947, 0], [-0.2469960186504665, 0.15166707292682347], [0, 0.1906578914472865], [0.11266609790244786, 0.13433499899997514], [0.26433317082927044, 0.12566642291057306], [0.44200089377234475, 0.16466739793494822], [0.3119976436910914, 0.17333597402435075], [0.16466739793494867, 0.24699601865046583], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 496]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{a5276bb6-4d7c-4b4f-b371-a0e14a279176}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Gradient\", \"mn\": \"{9df3ba96-24a3-412e-abd4-e64e2e76e6df}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{20934ad0-1c22-4752-a5b1-be99889ea79a}\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [512, 512]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"gf\", \"nm\": \"Gradient Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"r\": 1, \"s\": {\"a\": 0, \"k\": [256, 496]}, \"e\": {\"a\": 0, \"k\": [256, 16]}, \"t\": 1, \"h\": {\"a\": 0, \"k\": 0}, \"a\": {\"a\": 0, \"k\": 0}, \"g\": {\"p\": 3, \"k\": {\"a\": 0, \"k\": [0, 0.7686274509803922, 0.8509803921568627, 0.9607843137254902, 0.5, 0.19600213626306554, 0.31400015259021896, 0.6899977111467155, 1, 0.16099794003204396, 0.18399328603036547, 0.45900663767452504, 0, 1, 0.5, 1, 1, 1]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"p\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var gradient = lottie.layers[1].shapes[0].it[1]; gradient.t = Number(data[\"Type\"]); this.json_viewer_contents = lottie.layers[1].shapes[0].it[1]; }, {} );","title":"Enumerations"},{"location":"specs/constants/#enumerations","text":"","title":"Enumerations"},{"location":"specs/constants/#fill-rule","text":"Rule used to handle multiple shapes rendered with the same fill object Value Name Description 1 Non Zero Everything is colored (You can think of this as an OR) 2 Even Odd Colored based on intersections and path direction, can be used to create \"holes\" Example Fill Rule Non Zero Even Odd var lottie_player_3 = new PlaygroundPlayer( 3, 'playground_3_2', 'lottie_target_3', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{f5d94f54-bb8f-4f07-be45-232ebd4b9eb1}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{4b0993ed-e35b-48a5-ab12-687dbc147c7c}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Path\", \"mn\": \"{29196ff2-0a65-48b4-a450-f9fbc3a3640d}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"Path\", \"mn\": \"{bb7e6c60-755e-4a21-a7ba-bd054feab5c7}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[125.51641791044776, 452.20298507462684], [240.71641791044777, 38.6865671641791], [435.8686567164179, 447.9044776119403], [42.125373134328356, 173.65970149253732], [460.8, 156.46567164179103]], \"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"p\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[0].it[1]; shape.r = Number(data[\"Fill Rule\"]); this.json_viewer_contents = lottie.layers[0].shapes[0].it[1]; }, {} );","title":"Fill Rule"},{"location":"specs/constants/#trim-multiple-shapes","text":"How to handle multiple shapes in trim path Value Name Description 1 Parallel All shapes apply the trim at the same time 2 Sequential Shapes are considered as a continuous sequence Multiple Shapes Parallel Sequential var lottie_player_4 = new PlaygroundPlayer( 4, 'playground_4_2', 'lottie_target_4', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [128, 128]}, \"or\": {\"a\": 0, \"k\": 100}, \"ir\": {\"a\": 0, \"k\": 50}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [384, 128]}, \"s\": {\"a\": 0, \"k\": [200, 200]}}, {\"ty\": \"rc\", \"nm\": \"Rect\", \"mn\": \"{0776f2df-2619-415c-b10d-f648f2edfa0f}\", \"d\": 1, \"p\": {\"a\": 0, \"k\": [128, 384]}, \"s\": {\"a\": 0, \"k\": [200, 200]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"sr\", \"nm\": \"Triangle\", \"mn\": \"{db373594-d0ae-44ff-9295-30ff72616af2}\", \"p\": {\"a\": 0, \"k\": [384, 384]}, \"or\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 3}, \"sy\": 2, \"os\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 50}, \"o\": {\"a\": 0, \"k\": 0}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 20}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { lottie.layers[0].shapes[4].m = Number(data[\"Multiple Shapes\"]); this.json_viewer_contents = lottie.layers[0].shapes[4]; }, {} );","title":"Trim Multiple Shapes"},{"location":"specs/constants/#shape-direction","text":"Drawing direction of the shape curve, useful for trim path Value Name Description 1 Normal Usually clockwise 3 Reversed Usually counter clockwise Shape Direction Normal Reversed var lottie_player_5 = new PlaygroundPlayer( 5, 'playground_5_2', 'lottie_target_5', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [128, 128]}, \"or\": {\"a\": 0, \"k\": 100}, \"ir\": {\"a\": 0, \"k\": 50}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [384, 128]}, \"s\": {\"a\": 0, \"k\": [200, 200]}}, {\"ty\": \"rc\", \"nm\": \"Rect\", \"mn\": \"{0776f2df-2619-415c-b10d-f648f2edfa0f}\", \"d\": 1, \"p\": {\"a\": 0, \"k\": [128, 384]}, \"s\": {\"a\": 0, \"k\": [200, 200]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"sr\", \"nm\": \"Triangle\", \"mn\": \"{db373594-d0ae-44ff-9295-30ff72616af2}\", \"p\": {\"a\": 0, \"k\": [384, 384]}, \"or\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 3}, \"sy\": 2, \"os\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 50}, \"o\": {\"a\": 0, \"k\": 0}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 20}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { for ( let shape of lottie.layers[0].shapes ) shape.d = Number(data[\"Shape Direction\"]); this.json_viewer_contents = lottie.layers[0].shapes[1]; }, {} );","title":"Shape Direction"},{"location":"specs/constants/#star-type","text":"Whether a PolyStar is a star or a polygon Value Name 1 Star 2 Polygon Example Star Type Star Polygon var lottie_player_6 = new PlaygroundPlayer( 6, 'playground_6_2', 'lottie_target_6', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"layers\": [{\"ty\": 4, \"ddd\": 0, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ip\": 0, \"op\": 180, \"ind\": 0, \"st\": 0, \"sr\": 1, \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{9199543e-3552-4e51-a802-623f2a4a2ca1}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.979995422293431, 0.28000305180437934]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var star = lottie.layers[0].shapes[0].it[0]; star.sy = Number(data[\"Star Type\"]); if ( data[\"Star Type\"] == \"1\" ) { star[\"ir\"] = {\"a\": 0, \"k\": 100}; star[\"is\"] = {\"a\": 0, \"k\": 0}; } else { delete star[\"ir\"]; delete star[\"is\"]; } lottie.layers[0].shapes[0].it[0] = star; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} );","title":"Star Type"},{"location":"specs/constants/#line-cap","text":"Style at the end of a stoked line Value Name 1 Butt 2 Round 3 Square Example Line Cap Butt Round Square var lottie_player_7 = new PlaygroundPlayer( 7, 'playground_7_2', 'lottie_target_7', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.lc = Number(data[\"Line Cap\"]); shape.d = undefined; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} );","title":"Line Cap"},{"location":"specs/constants/#line-join","text":"Style at a sharp corner of a stoked line Value Name 1 Miter 2 Round 3 Bevel Example Line Join Miter Round Bevel Miter Limit 3 var lottie_player_8 = new PlaygroundPlayer( 8, 'playground_8_3', 'lottie_target_8', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.lj = Number(data[\"Line Join\"]); shape.ml = data[\"Miter Limit\"]; shape.d = undefined; var trim = lottie.layers[0].shapes[1]; trim.e.k = 100; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} );","title":"Line Join"},{"location":"specs/constants/#mask-mode","text":"Describes how a mask interacts (blends) with the preceding masks in the stack. Value Name Description 'n' None The mask is ignored. 'a' Add Mask coverage is added (Normal blending). 's' Subtract Mask coverage is subtracted (Subtract blending). 'i' Intersect Mask coverage is intersected (Source-In blending). Example Mask Mode None Add Subtract Intersect Mask1 Opacity 100 Mask2 Opacity 100 var lottie_player_9 = new PlaygroundPlayer( 9, 'playground_9_4', 'lottie_target_9', {\"v\": \"5.12.0\", \"fr\": 30, \"ip\": 0, \"op\": 150, \"w\": 500, \"h\": 500, \"nm\": \"test2\", \"ddd\": 0, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ind\": 0, \"ty\": \"sh\", \"ix\": 1, \"ks\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"v\": [[0, -250], [58.779, -80.902], [237.764, -77.254], [95.106, 30.902], [146.946, 202.254], [0, 100], [-146.946, 202.254], [-95.106, 30.902], [-237.764, -77.254], [-58.779, -80.902]], \"c\": true}, \"ix\": 2}, \"nm\": \"Path 1\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ind\": 1, \"ty\": \"sh\", \"ix\": 2, \"ks\": {\"a\": 0, \"k\": {\"i\": [[-96.65, 0], [0, -69.036], [96.65, 0], [0, 69.036]], \"o\": [[96.65, 0], [0, 69.036], [-96.65, 0], [0, -69.036]], \"v\": [[0, -125], [175, 0], [0, 125], [-175, 0]], \"c\": true}, \"ix\": 2}, \"nm\": \"Path 2\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [1, 0, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 1, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"d\": [{\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 10, \"ix\": 1}}, {\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0, \"ix\": 7}}], \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 150, \"st\": 0, \"ct\": 1, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 1, \"nm\": \"Medium Green Solid 3\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"hasMask\": true, \"masksProperties\": [{\"inv\": false, \"mode\": \"a\", \"pt\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"v\": [[250, 0], [308.779, 169.098], [487.764, 172.746], [345.106, 280.902], [396.946, 452.254], [250, 350], [103.054, 452.254], [154.894, 280.902], [12.236, 172.746], [191.221, 169.098]], \"c\": true}, \"ix\": 1}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 3}, \"x\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Mask 1\"}, {\"inv\": false, \"mode\": \"a\", \"pt\": {\"a\": 0, \"k\": {\"i\": [[-96.65, 0], [0, -69.036], [96.65, 0], [0, 69.036]], \"o\": [[96.65, 0], [0, 69.036], [-96.65, 0], [0, -69.036]], \"v\": [[250, 125], [425, 250], [250, 375], [75, 250]], \"c\": true}, \"ix\": 1}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 3}, \"x\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Mask 2\"}], \"sw\": 500, \"sh\": 500, \"sc\": \"#97f487\", \"ip\": 0, \"op\": 150, \"st\": 0, \"bm\": 0}], \"markers\": [], \"props\": {}}, function (lottie, data) { let mask1 = lottie.layers[1].masksProperties[0]; let mask2 = lottie.layers[1].masksProperties[1]; mask1.o.k = Number(data[\"Mask1 Opacity\"]); mask2.o.k = Number(data[\"Mask2 Opacity\"]); mask2.mode = data[\"Mask Mode\"]; this.json_viewer_contents = lottie.layers[1].masksProperties[1]; }, {} );","title":"Mask Mode"},{"location":"specs/constants/#stroke-dash-type","text":"Type of a dash item in a stroked line Value Name 'd' Dash 'g' Gap 'o' Offset","title":"Stroke Dash Type"},{"location":"specs/constants/#matte-mode","text":"How a layer should mask another layer The value for Luma is calculated according to Rec.709 standard: Y = 0.2126 R + 0.7152 G + 0.0722 B Value Name Description 0 Normal The layer is not used as a track matte 1 Alpha The masked layer opacity is modulated by the track matte layer opacity 2 Inverted Alpha The masked layer opacity is modulated by the inverted track matte layer opacity 3 Luma The masked layer opacity is modulated by the track matte layer luminance 4 Inverted Luma The masked layer opacity is modulated by the inverted track matte layer luminance Example Matte Mode Normal Alpha Inverted Alpha Luma Inverted Luma var lottie_player_10 = new PlaygroundPlayer( 10, 'playground_10_2', 'lottie_target_10', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{b3d1b083-9de7-4537-a691-fc9aa42f9742}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Ellipse (Mask)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [153, 294]}, \"p\": {\"a\": 0, \"k\": [346, 211]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"mn\": \"{261eddeb-af92-4be1-932c-790b00c23933}\", \"p\": {\"a\": 0, \"k\": [137.0955223880597, 293.60820895522386]}, \"s\": {\"a\": 0, \"k\": [303.42089552238804, 315.55074626865667]}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{aa9c282c-253d-4d8d-ab05-4819c592fa85}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 1, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 6}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{2b2b0002-ff0c-4978-a33b-db4e0498848d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}], \"td\": 1}, {\"ddd\": 0, \"ty\": 4, \"ind\": 2, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Shapes (Masked)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{528994b7-40ff-4d12-81f8-603f274da12e}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{ce8756d7-289f-4f84-a135-d225d57c42e0}\", \"p\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"or\": {\"a\": 0, \"k\": 216.4160919189453}, \"ir\": {\"a\": 0, \"k\": 87.03440856933594}, \"r\": {\"a\": 0, \"k\": 261.54803466796875}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{efd05a25-a43b-451d-83d2-53a477087223}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{523ca39c-9e57-4547-bf0e-ba7496003579}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.19607843137254902, 0.3137254901960784, 0.6901960784313725]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"p\": {\"a\": 0, \"k\": [338.7223880597015, 209.76716417910447]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"Rectangle\", \"mn\": \"{d2d7a5d5-6d91-42e8-b40a-af52a112fe38}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{9ef8604e-7891-4909-a655-445131b4d842}\", \"p\": {\"a\": 0, \"k\": [209.17611940298502, 226.8]}, \"s\": {\"a\": 0, \"k\": [363.3313432835821, 369.3492537313433]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{444584d2-cb59-4cba-83a1-82cc605837fd}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{f75aed67-9b0e-41a9-b859-a14b5b0a320d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.7686274509803922, 0.8509803921568627, 0.9607843137254902]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"p\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}], \"tt\": 1, \"tp\": 1}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[1].tt = Number(data[\"Matte Mode\"]); this.json_viewer_contents = {...lottie.layers[1], shapes: [], ks: {}}; }, {} );","title":"Matte Mode"},{"location":"specs/constants/#gradient-type","text":"Whether a Gradient is a linear or radial. Value Name Description 1 Linear Colors transition in a single linear direction. 2 Radial Colors transition outward from a center point. Example Type Linear Radial var lottie_player_11 = new PlaygroundPlayer( 11, 'playground_11_2', 'lottie_target_11', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{3da63a46-0ec5-45b8-90fb-d31c5614d5be}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Start/End markers\", \"mn\": \"{04a8ef87-75fd-451c-868b-7413969c8ad9}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{078a0bf7-08ce-49f7-9dca-c473ad9ff09d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{efb1ff36-fe2b-4939-97a5-d75a167d003b}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{759da60a-0439-496c-89a9-66e1d721ceb7}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"\", \"mn\": \"{b56ba91b-5ef9-40d2-a1da-27265d105c7a}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{020e377d-646e-45f6-830f-756cfff57aa9}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[3.7994567051676293, -7.097994637365934], [5.33994951436286, -6.707992504500113], [6.327946284594615, -5.609490432573314], [6.672442201680043, -3.952002315682892], [6.672442201680043, -3.262995246756169], [1.901449879997, -3.262995246756169], [2.505949758118953, -1.4624984765244131], [4.124444517362934, -0.8449957342683567], [5.300948539338484, -0.968496282719568], [6.360449636240906, -1.326002681317033], [6.360449636240906, -0.32500304695117377], [5.307446162716568, 0.019500487512187806], [4.072448295582389, 0.12999817182929574], [2.3239477471311782, -0.2729992077926948], [1.1409537191554788, -1.4755013406585165], [0.7184558520213006, -3.4319943936098403], [1.1019527441311032, -5.395000304695118], [2.1809543285457136, -6.655996282719569], [3.7994567051676293, -7.097994637365934]], \"i\": [[0, 0], [-0.4290005687642191, -0.2600014219105473], [-0.22966394472361795, -0.4723332927073187], [0, -0.6326587852196304], [0, 0], [0, 0], [-0.3856627665691641, -0.411668494837371], [-0.69333373959349, 0], [-0.34233512087802254, 0.08233369896747422], [-0.3639989437235931, 0.15600390009750242], [0, 0], [0.34666686979674477, -0.07366512287807196], [0.47666504162604095, 0], [0.506997440561014, 0.2686649197479937], [0.281665244756119, 0.5330031688292207], [0, 0.7713255331383286], [-0.25566459473986836, 0.5459984155853892], [-0.4636697948698716, 0.29466556976424485], [-0.6153317895447388, 0]], \"o\": [[0.5979946373659342, 0], [0.4290005687642182, 0.2600014219105473], [0.22966394472361795, 0.47233329270731783], [0, 0], [0, 0], [0.017337152178804383, 0.7886626853171328], [0.3856627665691641, 0.411668494837371], [0.4420008937723443, 0], [0.34233512087802165, -0.08233369896747411], [0, 0], [-0.35533544588614685, 0.15600390009750242], [-0.34666686979674477, 0.07366512287807195], [-0.6586695917397929, 0], [-0.5069974405610138, -0.26866491974799367], [-0.28166524475611887, -0.5330031688292207], [0, -0.7626721918047954], [0.2556645947398686, -0.5459984155853901], [0.46366979486987203, -0.29466556976424396], [0, 0]]}}}, {\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{b3f5759c-30aa-4352-a4ea-23b71ead28ad}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[3.7864462236555916, -6.162001706292657], [2.4929545113627842, -5.635496160841521], [1.9274556082652068, -4.172997684317108], [5.476452926948174, -4.172997684317108], [5.06045268319208, -5.609498049951249], [3.7864462236555916, -6.162001706292657]], \"i\": [[0, 0], [0.3163344708617717, -0.3510036969674246], [0.06066479786994661, -0.6239952873821846], [0, 0], [0.2686699979999494, 0.36833577089427205], [0.5806676416910426, 0]], \"o\": [[-0.5459933373334334, 0], [-0.3163344708617717, 0.3510036969674246], [0, 0], [-0.008663497837446243, -0.5893311395284879], [-0.2686699979999503, -0.36833577089427205], [0, 0]]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 16]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{e16b0057-203a-4dab-8e5b-495775987f85}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{07bcfe04-40c2-4636-807c-d64982f7a44d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{0de90988-3e53-4e7a-8a7d-cb147d0c42b5}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{22460e65-f67b-48b8-844b-e361867d003b}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[5.645452073801845, -1.923997318682967], [4.891453536338409, -0.39000213286582164], [2.8634485393384836, 0.12999817182929574], [1.608957802070052, 0.013002864134103353], [0.679454876996925, -0.311992565439136], [0.679454876996925, -1.3519931748293708], [1.6869521347408687, -0.968496282719568], [2.8894542676066903, -0.7929995124878122], [4.150450245631141, -1.0724963436585915], [4.540444761119028, -1.820004875121878], [4.3974513425335635, -2.2880013406585165], [3.8839562785944652, -2.7040015844146104], [2.824447564314108, -3.171998049951249], [1.6674516472286809, -3.6919983546463664], [0.9264559738993475, -4.315998720280507], [0.666459630240756, -5.251999268731718], [1.3879548160579016, -6.616995307695193], [3.2794487830945775, -7.097994637365934], [4.468948051826296, -6.9744940889147236], [5.502443420460512, -6.629998171829296], [5.1124489049726245, -5.719995734268357], [4.189443603277582, -6.031995917085427], [3.2014468330458263, -6.162001706292657], [2.128950489387235, -5.934501096902423], [1.7584564614115354, -5.316990737268432], [1.9274556082652068, -4.82950140159754], [2.4929545113627842, -4.439499268731718], [3.552455608265207, -3.9910032907072677], [4.683453414460362, -3.4839982327683194], [5.398450976899423, -2.853500243756094], [5.645452073801845, -1.923997318682967]], \"i\": [[0, 0], [0.5026656916422914, -0.346666869796745], [0.8493376396909924, 0], [0.35099861871546767, 0.07799687179679493], [0.26866999799995006, 0.13866674791869799], [0, 0], [-0.3943313426585666, -0.11699784682117054], [-0.4073367459186481, 0], [-0.2599963436585919, 0.18633122078051945], [0, 0.31200780019500485], [0.09532894572364281, 0.13866674791869782], [0.2470010969024221, 0.13866674791869782], [0.45933804595114847, 0.17333089577239447], [0.32066621978049437, 0.17333597402435075], [0.17333089577239413, 0.24266426973174227], [0, 0.38133609590239725], [-0.48099679054476374, 0.32066621978049437], [-0.779999187479687, 0], [-0.36833577089427294, -0.08233369896747345], [-0.32066114152853853, -0.14733024575614362], [0, 0], [0.32066621978049437, 0.08667052613815329], [0.3379982937073427, 0], [0.24699601865046583, -0.15166707292682258], [0, -0.2600065001625049], [-0.11266609790244764, -0.13433499899997603], [-0.26433317082927044, -0.12566642291057306], [-0.4420008937723443, -0.17333089577239447], [-0.3119976436910923, -0.1733359740243503], [-0.16466739793494867, -0.24699601865046628], [0, -0.3726725980649519]], \"o\": [[0, 0.6759965874146854], [-0.5026656916422914, 0.3466668697967449], [-0.4853285394634863, 0], [-0.3509986187154679, -0.07799687179679493], [0, 0], [0.27733349583739597, 0.13866674791869804], [0.3943313426585664, 0.11699784682117043], [0.5806676416910421, 0], [0.2599963436585915, -0.18633122078051967], [0, -0.17333089577239424], [-0.09532894572364281, -0.13866674791869826], [-0.24700109690242256, -0.13866674791869826], [-0.45066439160979055, -0.17333089577239447], [-0.3206662197804946, -0.1733359740243503], [-0.17333089577239436, -0.24266426973174315], [0, -0.5893311395284879], [0.4809967905447634, -0.3206662197804935], [0.4246637415935397, 0], [0.36833577089427205, 0.08233369896747433], [0, 0], [-0.2946706480162007, -0.12132959573989321], [-0.3206662197804948, -0.08667052613815329], [-0.4680015437885947, 0], [-0.2469960186504665, 0.15166707292682347], [0, 0.1906578914472865], [0.11266609790244786, 0.13433499899997514], [0.26433317082927044, 0.12566642291057306], [0.44200089377234475, 0.16466739793494822], [0.3119976436910914, 0.17333597402435075], [0.16466739793494867, 0.24699601865046583], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 496]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{a5276bb6-4d7c-4b4f-b371-a0e14a279176}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Gradient\", \"mn\": \"{9df3ba96-24a3-412e-abd4-e64e2e76e6df}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{20934ad0-1c22-4752-a5b1-be99889ea79a}\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [512, 512]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"gf\", \"nm\": \"Gradient Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"r\": 1, \"s\": {\"a\": 0, \"k\": [256, 496]}, \"e\": {\"a\": 0, \"k\": [256, 16]}, \"t\": 1, \"h\": {\"a\": 0, \"k\": 0}, \"a\": {\"a\": 0, \"k\": 0}, \"g\": {\"p\": 3, \"k\": {\"a\": 0, \"k\": [0, 0.7686274509803922, 0.8509803921568627, 0.9607843137254902, 0.5, 0.19600213626306554, 0.31400015259021896, 0.6899977111467155, 1, 0.16099794003204396, 0.18399328603036547, 0.45900663767452504, 0, 1, 0.5, 1, 1, 1]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"p\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var gradient = lottie.layers[1].shapes[0].it[1]; gradient.t = Number(data[\"Type\"]); this.json_viewer_contents = lottie.layers[1].shapes[0].it[1]; }, {} );","title":"Gradient Type"},{"location":"specs/glossary/","text":"Glossary local coordinates The local coordinate system is the coordinate system of the current group or layer, with the X coordinate increasing towards the right and the Y coordinate increasing towards the bottom. Without any transforms, the point ( 0 , 0 ) corresponds with the top-left corner of the viewport. render stack A render stack is a list if rendering primitive to be drawn in inverse stack order. A render stack can contain child stacks. stacking order The order in which objects appear in the render stack . collected shapes When collecting shapes for a rendering operation, implementations MUST traverse the render stack in reverse order. All Shapes encountered in the stack traversal MUST be included, until the beginning of the stack is reached or a Modifier is encountered. If a Modifier is found, it MUST be applied to its own collected shapes and the output added to the shape collection.","title":"Glossary"},{"location":"specs/glossary/#glossary","text":"local coordinates The local coordinate system is the coordinate system of the current group or layer, with the X coordinate increasing towards the right and the Y coordinate increasing towards the bottom. Without any transforms, the point ( 0 , 0 ) corresponds with the top-left corner of the viewport. render stack A render stack is a list if rendering primitive to be drawn in inverse stack order. A render stack can contain child stacks. stacking order The order in which objects appear in the render stack . collected shapes When collecting shapes for a rendering operation, implementations MUST traverse the render stack in reverse order. All Shapes encountered in the stack traversal MUST be included, until the beginning of the stack is reached or a Modifier is encountered. If a Modifier is found, it MUST be applied to its own collected shapes and the output added to the shape collection.","title":"Glossary"},{"location":"specs/helpers/","text":"Helpers Transform Layer transform Composition Diagram for Transform Transform Transform Shape Attribute Type Title Description a Position Anchor Point Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale) p Splittable Position Position Position / Translation r Scalar Rotation Rotation in degrees, clockwise s Vector Scale Scale factor, [100, 100] for no scaling o Scalar Opacity Opacity sk Scalar Skew Skew amount as an angle in degrees sa Scalar Skew Axis Direction along which skew is applied, in degrees ( 0 skews along the X axis, 90 along the Y axis) To make the anchor point properly line up with the center of location, p and a should have the same value. This example allows you to tweak transform attributes and see how the shape changes. The anchor point is highlighted with an orange dot. Anchor X 256 Anchor Y 256 Position X 256 Position Y 256 Scale X 100 Scale Y 100 Rotation 0 Skew 0 Skew Angle 0 Opacity 100 var lottie_player_12 = new PlaygroundPlayer( 12, 'playground_12_11', 'lottie_target_12', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{a3bb98c7-d0dd-4484-b6da-74a0e70eaf2f}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 2, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Anchor\", \"mn\": \"{04f9b742-3603-49fa-9552-ea04de1a3f33}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"mn\": \"{4251e46a-bb13-464b-913c-e67c44a218da}\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [32, 32]}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{7d3070ed-88a3-41aa-a62e-7db8df1bd312}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Transformed\", \"mn\": \"{d00298c4-66b4-4ae4-a730-22c1eb85c188}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}, \"sk\": {\"a\": 0, \"k\": 0}, \"sa\": {\"a\": 0, \"k\": 0}}, \"shapes\": [{\"ty\": \"rc\", \"nm\": \"Rectangle 1\", \"mn\": \"{bf8ad877-113b-4df8-a2e2-3bb4af32edf7}\", \"p\": {\"a\": 0, \"k\": [252.75223880597017, 250.60298507462684]}, \"s\": {\"a\": 0, \"k\": [319.8089552238806, 330.98507462686564]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{b9040dc8-0753-4a6e-b5f1-d508d17bbd4f}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.19607843137254902, 0.3137254901960784, 0.6901960784313725]}, \"r\": 1}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Reference\", \"mn\": \"{8f351be7-8a51-4310-9dc3-59ed21594815}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{cb4f7b74-bed1-493b-a0e6-01b00566aedd}\", \"p\": {\"a\": 0, \"k\": [252.75223880597017, 250.60298507462684]}, \"s\": {\"a\": 0, \"k\": [319.8089552238806, 330.98507462686564]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{05064670-7e14-4141-89c1-e0f0f3a1c57d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.1607843137254902, 0.1843137254901961, 0.4588235294117647]}, \"r\": 1}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { lottie.layers[0].ks.p.k[0] = data[\"Anchor X\"]; lottie.layers[1].ks.a.k[0] = data[\"Anchor X\"]; lottie.layers[0].ks.p.k[1] = data[\"Anchor Y\"]; lottie.layers[1].ks.a.k[1] = data[\"Anchor Y\"]; lottie.layers[1].ks.p.k[0] = data[\"Position X\"]; lottie.layers[1].ks.p.k[1] = data[\"Position Y\"]; lottie.layers[1].ks.s.k[0] = data[\"Scale X\"]; lottie.layers[1].ks.s.k[1] = data[\"Scale Y\"]; lottie.layers[1].ks.r.k = data[\"Rotation\"]; lottie.layers[1].ks.sk.k = data[\"Skew\"]; lottie.layers[1].ks.sa.k = data[\"Skew Angle\"]; lottie.layers[1].ks.o.k = data[\"Opacity\"]; this.json_viewer_contents = lottie.layers[1].ks; }, {} ); Transforms the parent's coordinate system. When calculating the final transform, properties MUST be applied as follows: Translate by \u2212 a Scale by s 100 If s k \u2260 0 : Rotate by \u2212 s a Skew x by tan ( \u2212 s k ) Rotate by s a Rotate by \u2212 r Translate by p Steps that have no effect MAY be skipped. Assuming a transform matrix with the following layout, with the labels equivalent to the CSS matrix transform : ( a b 0 c d 0 e f 1 ) The final transform is given by chaining transform matrices for each transform step: ( 1 0 0 0 1 0 \u2212 a . x \u2212 a . y 1 ) \u00d7 ( s . x 100 0 0 0 s . y 100 0 0 0 1 ) \u00d7 \u00d7 ( cos ( \u2212 s a ) sin ( \u2212 s a ) 0 \u2212 sin ( \u2212 s a ) cos ( \u2212 s a ) 0 0 0 1 ) \u00d7 ( 1 tan ( \u2212 s k ) 0 0 1 0 0 0 1 ) \u00d7 ( cos ( s a ) sin ( s a ) 0 \u2212 sin ( s a ) cos ( s a ) 0 0 0 1 ) \u00d7 \u00d7 ( cos ( \u2212 r ) sin ( \u2212 r ) 0 \u2212 sin ( \u2212 r ) cos ( \u2212 r ) 0 0 0 1 ) \u00d7 ( 1 0 0 0 1 0 p . x p . y 1 ) Note that if the transform matrix is transposed compared to the above: ( a c e b d f 0 0 1 ) The operations need to be chained using right multiplication instead of left multiplication. Visual Object Composition Diagram for Visual Object Visual Object Asset Precomposition Image Animation Layer Visual Layer Solid Layer Image Layer Precomposition Layer Null Layer Shape Layer Graphic Element Group Shape Style Fill Gradient Stroke Gradient Stroke Shape PolyStar Path Rectangle Ellipse Transform Shape Modifier Trim Path Stroke Dash Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like Marker Defines named portions of the composition. Attribute Type Title Description cm string Comment Comment tm number Time Time dr number Duration Duration Slots Slots are a way to define a property value once and use the value in multiple properties. Slot definitions are in a dictionary, the slot definition key is the key that is used to match all properties with a sid field to the same key for replacement. Slot Defines a property value that will be set to all matched properties Attribute Type Title Description p Property Value Property Value Slotabble Object Object that may have its value replaced with a slot value Composition Diagram for Slottable Object Slottable Object Image Slottable Property Vector Property Scalar Property Position Property Color Property Attribute Type Title Description sid string Slot Id Identifier to look up the slot Slotabble Property Property that may have its value replaced with a slot value Composition Diagram for Slottable Property Slottable Property Slottable Object Vector Property Scalar Property Position Property Color Property Attribute Type Title Description sid string Slot Id Identifier to look up the slot Scale X 100 Scale Y 100 Rotation 0 Opacity 100 var lottie_player_13 = new PlaygroundPlayer( 13, 'playground_13_5', 'lottie_target_13', {\"v\": \"5.12.2\", \"fr\": 29.9700012207031, \"ip\": 0, \"op\": 900.000036657751, \"w\": 512, \"h\": 512, \"nm\": \"SlotDemo\", \"ddd\": 0, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [256, 256, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ty\": \"sr\", \"sy\": 2, \"d\": 1, \"pt\": {\"a\": 0, \"k\": 3, \"ix\": 3}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 4}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"or\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"os\": {\"a\": 0, \"k\": 0, \"ix\": 9}, \"ix\": 1, \"nm\": \"Polystar Path 1\", \"mn\": \"ADBE Vector Shape - Star\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 6, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [-128, 128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Polystar 2\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [149.971, 150], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 6, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [128, -128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Ellipse 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"sr\", \"sy\": 1, \"d\": 1, \"pt\": {\"a\": 0, \"k\": 5, \"ix\": 3}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 4}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"ir\": {\"a\": 0, \"k\": 50, \"ix\": 6}, \"is\": {\"a\": 0, \"k\": 0, \"ix\": 8}, \"or\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"os\": {\"a\": 0, \"k\": 0, \"ix\": 9}, \"ix\": 1, \"nm\": \"Polystar Path 1\", \"mn\": \"ADBE Vector Shape - Star\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [128, 128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Polystar 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [150, 150], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [-128, -128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Rectangle 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 4, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 900.000036657751, \"st\": 0, \"ct\": 1, \"bm\": 0}], \"markers\": [], \"props\": {}, \"slots\": {\"rotation\": {\"p\": {\"a\": 0, \"k\": 0}}, \"opacity\": {\"p\": {\"a\": 0, \"k\": 100}}, \"scale\": {\"p\": {\"a\": 0, \"k\": [100, 100]}}}}, function (lottie, data) { lottie.slots.rotation.p.k = data[\"Rotation\"]; lottie.slots.opacity.p.k = data[\"Opacity\"]; lottie.slots.scale.p.k[0] = data[\"Scale X\"]; lottie.slots.scale.p.k[1] = data[\"Scale Y\"]; this.json_viewer_contents = lottie.slots; }, {} ); Mask Mask for layer content. Attribute Type Title Description mode Mask Mode Mode Mode o Scalar Opacity Mask opacity, as a percentage [0..100]. pt Bezier Shape Mask shape Masks provide single-channel coverage information (alpha channel) that modulates the layer's content. When multiple masks are specified, they are combined (blended) into a single coverage buffer, in order, based on the mode operator. Masks are specified in terms of a Path plus additional properties. For a given mask path, the coverage C p a t h is 1 inside the path, 0 outside the path, and possibly in the [ 0 . .1 ] range along the path edges (anti-aliasing). The coverage for a given Mask is C = { C p a t h \u00b7 o p a c i t y , when i n v = f a l s e C p a t h \u2212 1 \u00b7 o p a c i t y , when i n v = t r u e and the cumulative coverage for all masks is C c u m u l a t i v e = \u220f k = 1 n C k where the product operator is determined by mode . Then the final layer coverage (alpha channel) is C l a y e r \u2032 = C l a y e r \u00b7 C c u m u l a t i v e Example Opacity 100 var lottie_player_14 = new PlaygroundPlayer( 14, 'playground_14_2', 'lottie_target_14', {\"v\": \"5.12.0\", \"fr\": 60, \"ip\": 0, \"op\": 601, \"w\": 500, \"h\": 500, \"nm\": \"test3\", \"ddd\": 0, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 2\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ind\": 0, \"ty\": \"sh\", \"ix\": 1, \"ks\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"v\": [[0, -200], [86.603, -50], [173.205, 100], [0, 100], [-173.205, 100], [-86.603, -50]], \"c\": true}, \"ix\": 2}, \"nm\": \"Path 1\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [1, 0, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 2, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"d\": [{\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 10, \"ix\": 1}}, {\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0, \"ix\": 7}}], \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}], \"ip\": 0, \"op\": 601, \"st\": 0, \"ct\": 1, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"hasMask\": true, \"masksProperties\": [{\"inv\": false, \"mode\": \"a\", \"pt\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0]], \"v\": [[0.5, -199.5], [173.705, 100.5], [-172.705, 100.5]], \"c\": true}, \"ix\": 1}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 3}, \"x\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Mask 1\"}], \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [200, 200], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [100, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0, 1, 0.250980407, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 75, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 600, \"s\": [360]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 3\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"sr\", \"sy\": 1, \"d\": 1, \"pt\": {\"a\": 0, \"k\": 5, \"ix\": 3}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 4}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"ir\": {\"a\": 0, \"k\": 50, \"ix\": 6}, \"is\": {\"a\": 0, \"k\": 0, \"ix\": 8}, \"or\": {\"a\": 0, \"k\": 162, \"ix\": 7}, \"os\": {\"a\": 0, \"k\": 0, \"ix\": 9}, \"ix\": 1, \"nm\": \"Polystar Path 1\", \"mn\": \"ADBE Vector Shape - Star\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 0.250980407, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 75, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 600, \"s\": [720]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [175, 175], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [-90, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.250980407, 0, 1, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 75, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 600, \"s\": [-360]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 601, \"st\": 0, \"ct\": 1, \"bm\": 0}], \"markers\": [], \"props\": {}}, function (lottie, data) { let mask = lottie.layers[1].masksProperties[0]; mask.o.k = Number(data[\"Opacity\"]); this.json_viewer_contents = lottie.layers[1].masksProperties[0]; }, {} );","title":"Helpers"},{"location":"specs/helpers/#helpers","text":"","title":"Helpers"},{"location":"specs/helpers/#transform","text":"Layer transform Composition Diagram for Transform Transform Transform Shape Attribute Type Title Description a Position Anchor Point Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale) p Splittable Position Position Position / Translation r Scalar Rotation Rotation in degrees, clockwise s Vector Scale Scale factor, [100, 100] for no scaling o Scalar Opacity Opacity sk Scalar Skew Skew amount as an angle in degrees sa Scalar Skew Axis Direction along which skew is applied, in degrees ( 0 skews along the X axis, 90 along the Y axis) To make the anchor point properly line up with the center of location, p and a should have the same value. This example allows you to tweak transform attributes and see how the shape changes. The anchor point is highlighted with an orange dot. Anchor X 256 Anchor Y 256 Position X 256 Position Y 256 Scale X 100 Scale Y 100 Rotation 0 Skew 0 Skew Angle 0 Opacity 100 var lottie_player_12 = new PlaygroundPlayer( 12, 'playground_12_11', 'lottie_target_12', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{a3bb98c7-d0dd-4484-b6da-74a0e70eaf2f}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 2, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Anchor\", \"mn\": \"{04f9b742-3603-49fa-9552-ea04de1a3f33}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"mn\": \"{4251e46a-bb13-464b-913c-e67c44a218da}\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [32, 32]}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{7d3070ed-88a3-41aa-a62e-7db8df1bd312}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Transformed\", \"mn\": \"{d00298c4-66b4-4ae4-a730-22c1eb85c188}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}, \"sk\": {\"a\": 0, \"k\": 0}, \"sa\": {\"a\": 0, \"k\": 0}}, \"shapes\": [{\"ty\": \"rc\", \"nm\": \"Rectangle 1\", \"mn\": \"{bf8ad877-113b-4df8-a2e2-3bb4af32edf7}\", \"p\": {\"a\": 0, \"k\": [252.75223880597017, 250.60298507462684]}, \"s\": {\"a\": 0, \"k\": [319.8089552238806, 330.98507462686564]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{b9040dc8-0753-4a6e-b5f1-d508d17bbd4f}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.19607843137254902, 0.3137254901960784, 0.6901960784313725]}, \"r\": 1}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Reference\", \"mn\": \"{8f351be7-8a51-4310-9dc3-59ed21594815}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{cb4f7b74-bed1-493b-a0e6-01b00566aedd}\", \"p\": {\"a\": 0, \"k\": [252.75223880597017, 250.60298507462684]}, \"s\": {\"a\": 0, \"k\": [319.8089552238806, 330.98507462686564]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{05064670-7e14-4141-89c1-e0f0f3a1c57d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.1607843137254902, 0.1843137254901961, 0.4588235294117647]}, \"r\": 1}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { lottie.layers[0].ks.p.k[0] = data[\"Anchor X\"]; lottie.layers[1].ks.a.k[0] = data[\"Anchor X\"]; lottie.layers[0].ks.p.k[1] = data[\"Anchor Y\"]; lottie.layers[1].ks.a.k[1] = data[\"Anchor Y\"]; lottie.layers[1].ks.p.k[0] = data[\"Position X\"]; lottie.layers[1].ks.p.k[1] = data[\"Position Y\"]; lottie.layers[1].ks.s.k[0] = data[\"Scale X\"]; lottie.layers[1].ks.s.k[1] = data[\"Scale Y\"]; lottie.layers[1].ks.r.k = data[\"Rotation\"]; lottie.layers[1].ks.sk.k = data[\"Skew\"]; lottie.layers[1].ks.sa.k = data[\"Skew Angle\"]; lottie.layers[1].ks.o.k = data[\"Opacity\"]; this.json_viewer_contents = lottie.layers[1].ks; }, {} ); Transforms the parent's coordinate system. When calculating the final transform, properties MUST be applied as follows: Translate by \u2212 a Scale by s 100 If s k \u2260 0 : Rotate by \u2212 s a Skew x by tan ( \u2212 s k ) Rotate by s a Rotate by \u2212 r Translate by p Steps that have no effect MAY be skipped. Assuming a transform matrix with the following layout, with the labels equivalent to the CSS matrix transform : ( a b 0 c d 0 e f 1 ) The final transform is given by chaining transform matrices for each transform step: ( 1 0 0 0 1 0 \u2212 a . x \u2212 a . y 1 ) \u00d7 ( s . x 100 0 0 0 s . y 100 0 0 0 1 ) \u00d7 \u00d7 ( cos ( \u2212 s a ) sin ( \u2212 s a ) 0 \u2212 sin ( \u2212 s a ) cos ( \u2212 s a ) 0 0 0 1 ) \u00d7 ( 1 tan ( \u2212 s k ) 0 0 1 0 0 0 1 ) \u00d7 ( cos ( s a ) sin ( s a ) 0 \u2212 sin ( s a ) cos ( s a ) 0 0 0 1 ) \u00d7 \u00d7 ( cos ( \u2212 r ) sin ( \u2212 r ) 0 \u2212 sin ( \u2212 r ) cos ( \u2212 r ) 0 0 0 1 ) \u00d7 ( 1 0 0 0 1 0 p . x p . y 1 ) Note that if the transform matrix is transposed compared to the above: ( a c e b d f 0 0 1 ) The operations need to be chained using right multiplication instead of left multiplication.","title":"Transform"},{"location":"specs/helpers/#visual-object","text":"Composition Diagram for Visual Object Visual Object Asset Precomposition Image Animation Layer Visual Layer Solid Layer Image Layer Precomposition Layer Null Layer Shape Layer Graphic Element Group Shape Style Fill Gradient Stroke Gradient Stroke Shape PolyStar Path Rectangle Ellipse Transform Shape Modifier Trim Path Stroke Dash Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like","title":"Visual Object"},{"location":"specs/helpers/#marker","text":"Defines named portions of the composition. Attribute Type Title Description cm string Comment Comment tm number Time Time dr number Duration Duration","title":"Marker"},{"location":"specs/helpers/#slots","text":"Slots are a way to define a property value once and use the value in multiple properties. Slot definitions are in a dictionary, the slot definition key is the key that is used to match all properties with a sid field to the same key for replacement.","title":"Slots"},{"location":"specs/helpers/#slot","text":"Defines a property value that will be set to all matched properties Attribute Type Title Description p Property Value Property Value","title":"Slot"},{"location":"specs/helpers/#slottable-object","text":"Object that may have its value replaced with a slot value Composition Diagram for Slottable Object Slottable Object Image Slottable Property Vector Property Scalar Property Position Property Color Property Attribute Type Title Description sid string Slot Id Identifier to look up the slot","title":"Slotabble Object"},{"location":"specs/helpers/#slottable-property","text":"Property that may have its value replaced with a slot value Composition Diagram for Slottable Property Slottable Property Slottable Object Vector Property Scalar Property Position Property Color Property Attribute Type Title Description sid string Slot Id Identifier to look up the slot Scale X 100 Scale Y 100 Rotation 0 Opacity 100 var lottie_player_13 = new PlaygroundPlayer( 13, 'playground_13_5', 'lottie_target_13', {\"v\": \"5.12.2\", \"fr\": 29.9700012207031, \"ip\": 0, \"op\": 900.000036657751, \"w\": 512, \"h\": 512, \"nm\": \"SlotDemo\", \"ddd\": 0, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [256, 256, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ty\": \"sr\", \"sy\": 2, \"d\": 1, \"pt\": {\"a\": 0, \"k\": 3, \"ix\": 3}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 4}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"or\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"os\": {\"a\": 0, \"k\": 0, \"ix\": 9}, \"ix\": 1, \"nm\": \"Polystar Path 1\", \"mn\": \"ADBE Vector Shape - Star\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 6, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [-128, 128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Polystar 2\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [149.971, 150], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 6, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [128, -128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Ellipse 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"sr\", \"sy\": 1, \"d\": 1, \"pt\": {\"a\": 0, \"k\": 5, \"ix\": 3}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 4}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"ir\": {\"a\": 0, \"k\": 50, \"ix\": 6}, \"is\": {\"a\": 0, \"k\": 0, \"ix\": 8}, \"or\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"os\": {\"a\": 0, \"k\": 0, \"ix\": 9}, \"ix\": 1, \"nm\": \"Polystar Path 1\", \"mn\": \"ADBE Vector Shape - Star\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [128, 128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Polystar 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [150, 150], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [-128, -128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Rectangle 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 4, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 900.000036657751, \"st\": 0, \"ct\": 1, \"bm\": 0}], \"markers\": [], \"props\": {}, \"slots\": {\"rotation\": {\"p\": {\"a\": 0, \"k\": 0}}, \"opacity\": {\"p\": {\"a\": 0, \"k\": 100}}, \"scale\": {\"p\": {\"a\": 0, \"k\": [100, 100]}}}}, function (lottie, data) { lottie.slots.rotation.p.k = data[\"Rotation\"]; lottie.slots.opacity.p.k = data[\"Opacity\"]; lottie.slots.scale.p.k[0] = data[\"Scale X\"]; lottie.slots.scale.p.k[1] = data[\"Scale Y\"]; this.json_viewer_contents = lottie.slots; }, {} );","title":"Slotabble Property"},{"location":"specs/helpers/#mask","text":"Mask for layer content. Attribute Type Title Description mode Mask Mode Mode Mode o Scalar Opacity Mask opacity, as a percentage [0..100]. pt Bezier Shape Mask shape Masks provide single-channel coverage information (alpha channel) that modulates the layer's content. When multiple masks are specified, they are combined (blended) into a single coverage buffer, in order, based on the mode operator. Masks are specified in terms of a Path plus additional properties. For a given mask path, the coverage C p a t h is 1 inside the path, 0 outside the path, and possibly in the [ 0 . .1 ] range along the path edges (anti-aliasing). The coverage for a given Mask is C = { C p a t h \u00b7 o p a c i t y , when i n v = f a l s e C p a t h \u2212 1 \u00b7 o p a c i t y , when i n v = t r u e and the cumulative coverage for all masks is C c u m u l a t i v e = \u220f k = 1 n C k where the product operator is determined by mode . Then the final layer coverage (alpha channel) is C l a y e r \u2032 = C l a y e r \u00b7 C c u m u l a t i v e Example Opacity 100 var lottie_player_14 = new PlaygroundPlayer( 14, 'playground_14_2', 'lottie_target_14', {\"v\": \"5.12.0\", \"fr\": 60, \"ip\": 0, \"op\": 601, \"w\": 500, \"h\": 500, \"nm\": \"test3\", \"ddd\": 0, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 2\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ind\": 0, \"ty\": \"sh\", \"ix\": 1, \"ks\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"v\": [[0, -200], [86.603, -50], [173.205, 100], [0, 100], [-173.205, 100], [-86.603, -50]], \"c\": true}, \"ix\": 2}, \"nm\": \"Path 1\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [1, 0, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 2, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"d\": [{\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 10, \"ix\": 1}}, {\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0, \"ix\": 7}}], \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}], \"ip\": 0, \"op\": 601, \"st\": 0, \"ct\": 1, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"hasMask\": true, \"masksProperties\": [{\"inv\": false, \"mode\": \"a\", \"pt\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0]], \"v\": [[0.5, -199.5], [173.705, 100.5], [-172.705, 100.5]], \"c\": true}, \"ix\": 1}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 3}, \"x\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Mask 1\"}], \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [200, 200], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [100, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0, 1, 0.250980407, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 75, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 600, \"s\": [360]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 3\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"sr\", \"sy\": 1, \"d\": 1, \"pt\": {\"a\": 0, \"k\": 5, \"ix\": 3}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 4}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"ir\": {\"a\": 0, \"k\": 50, \"ix\": 6}, \"is\": {\"a\": 0, \"k\": 0, \"ix\": 8}, \"or\": {\"a\": 0, \"k\": 162, \"ix\": 7}, \"os\": {\"a\": 0, \"k\": 0, \"ix\": 9}, \"ix\": 1, \"nm\": \"Polystar Path 1\", \"mn\": \"ADBE Vector Shape - Star\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 0.250980407, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 75, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 600, \"s\": [720]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [175, 175], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [-90, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.250980407, 0, 1, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 75, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 600, \"s\": [-360]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 601, \"st\": 0, \"ct\": 1, \"bm\": 0}], \"markers\": [], \"props\": {}}, function (lottie, data) { let mask = lottie.layers[1].masksProperties[0]; mask.o.k = Number(data[\"Opacity\"]); this.json_viewer_contents = lottie.layers[1].masksProperties[0]; }, {} );","title":"Mask"},{"location":"specs/layers/","text":"Layers Common Properties Layer Common properties for all layers Composition Diagram for Layer Layer Visual Object Visual Layer Solid Layer Image Layer Precomposition Layer Null Layer Shape Layer Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer Type Layer Type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible The ty property defines the specific layer type based on the following values: ty Type 0 Precomposition Layer 2 Image Layer 3 Null Layer 1 Solid Layer 4 Shape Layer None Unknown layer types Visual Layer Layer used to affect visual elements Composition Diagram for Visual Layer Visual Layer Layer Visual Object Solid Layer Image Layer Precomposition Layer Null Layer Shape Layer Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer Type Layer Type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. Parenting Layer parenting offers a way to connect layers such that the movement of one layer (child) follows the movement of another (parent). Multiple child layers can reference the same parent (this is useful for applying the same transform animation to a group of layers). When the parent property points to another layer, the referencing layer's current transformation matrix (CTM) is composed with the parent CTM: C T M ( c h i l d ) = C T M ( p a r e n t ) \u00d7 T r a n s f o r m ( c h i l d ) Parenting is transitive, and reference cycles are not allowed (undefined behavior). Hidden Layers The hidden flag hd determines whether a layer is rendered: hidden layers are not rendered as part of the normal layer tree, but their properties and content are evaluated when used as a reference target in other contexts. Specifically, hidden layers contribute to a layer's total transform when used as a parent contribute to a layer's track matte when used as a matte source hd only affects the layer for which it is defined, it does not transitively apply to other referencing layers. Mattes A matte allows using a layer as a mask for another layer. The way it works is the layer defining the mask has a tt attribute with the appropriate value . The layer being masked is indicated by the tp attribute, which has the index ( ind ) of the layer that is being masked. In this example there's a layer with a rectangle and a star being masked by an ellipse: Example Enable Matte Matte Mode Normal Alpha Inverted Alpha Luma Inverted Luma var lottie_player_15 = new PlaygroundPlayer( 15, 'playground_15_3', 'lottie_target_15', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{b3d1b083-9de7-4537-a691-fc9aa42f9742}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Ellipse (Mask)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [153, 294]}, \"p\": {\"a\": 0, \"k\": [346, 211]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"mn\": \"{261eddeb-af92-4be1-932c-790b00c23933}\", \"p\": {\"a\": 0, \"k\": [137.0955223880597, 293.60820895522386]}, \"s\": {\"a\": 0, \"k\": [303.42089552238804, 315.55074626865667]}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{aa9c282c-253d-4d8d-ab05-4819c592fa85}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 1, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 6}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{2b2b0002-ff0c-4978-a33b-db4e0498848d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}], \"td\": 1}, {\"ddd\": 0, \"ty\": 4, \"ind\": 2, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Shapes (Masked)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{528994b7-40ff-4d12-81f8-603f274da12e}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{ce8756d7-289f-4f84-a135-d225d57c42e0}\", \"p\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"or\": {\"a\": 0, \"k\": 216.4160919189453}, \"ir\": {\"a\": 0, \"k\": 87.03440856933594}, \"r\": {\"a\": 0, \"k\": 261.54803466796875}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{efd05a25-a43b-451d-83d2-53a477087223}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{523ca39c-9e57-4547-bf0e-ba7496003579}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.19607843137254902, 0.3137254901960784, 0.6901960784313725]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"p\": {\"a\": 0, \"k\": [338.7223880597015, 209.76716417910447]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"Rectangle\", \"mn\": \"{d2d7a5d5-6d91-42e8-b40a-af52a112fe38}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{9ef8604e-7891-4909-a655-445131b4d842}\", \"p\": {\"a\": 0, \"k\": [209.17611940298502, 226.8]}, \"s\": {\"a\": 0, \"k\": [363.3313432835821, 369.3492537313433]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{444584d2-cb59-4cba-83a1-82cc605837fd}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{f75aed67-9b0e-41a9-b859-a14b5b0a320d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.7686274509803922, 0.8509803921568627, 0.9607843137254902]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"p\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}], \"tt\": 1, \"tp\": 1}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { if ( data[\"Enable Matte\"] ) { lottie.layers[1].tt = Number(data[\"Matte Mode\"]); lottie.layers[1].tp = 1; lottie.layers[0].td = 1; } else { lottie.layers[1].tt = undefined; lottie.layers[1].tp = undefined; lottie.layers[0].td = undefined; } this.json_viewer_contents = {...lottie.layers[1], shapes: [], ks: {}}; }, {} ); Layer types Shape Layer Layer containing Shapes Composition Diagram for Shape Layer Shape Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 4 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. shapes array of Graphic Element Shapes Shapes Image Layer Layer containing an image Composition Diagram for Image Layer Image Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 2 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. refId string Reference Id ID of the image as specified in the assets Null Layer Layer with no data, useful to group layers together Composition Diagram for Null Layer Null Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 3 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. Solid Layer Solid color, rectangle-shaped layer Composition Diagram for Solid Layer Solid Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 1 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. sw integer Width Solid rectangle width sh integer Height Solid rectangle height sc Hex Color Color Solid fill color Precomposition Layer Layer that renders a Precomposition asset Composition Diagram for Precomposition Layer Precomposition Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 0 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. refId string Reference Id ID of the precomp as specified in the assets w integer Width Width of the clipping rect h integer Height Height of the clipping rect sr number Time Stretch Time Stretch st number Start Time Start Time tm Scalar Time Remap Timeline remap function (frame index -> time in seconds) Time Stretch The st property specifies a start time offset, while sr defines a time stretch factor, to be applied when evaluating animated properties pertaining to the layer: t \u2032 = t s t r e t c h \u2212 s t a r t sr values less than 1 increase the layer playback speed, while values greater than 1 decrease it (\"stretching\" the layer timeline). Example Time Stretch 1 var lottie_player_16 = new PlaygroundPlayer( 16, 'playground_16_2', 'lottie_target_16', {\"v\": \"5.12.0\", \"fr\": 60, \"ip\": 0, \"op\": 600, \"w\": 500, \"h\": 500, \"nm\": \"time_stretch\", \"ddd\": 0, \"assets\": [{\"id\": \"comp_0\", \"nm\": \"swing\", \"fr\": 60, \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.402], \"y\": [0.993]}, \"o\": {\"x\": [0.599], \"y\": [-0.002]}, \"t\": 0, \"s\": [50]}, {\"i\": {\"x\": [0.407], \"y\": [1.004]}, \"o\": {\"x\": [0.603], \"y\": [0.005]}, \"t\": 150, \"s\": [-50]}, {\"i\": {\"x\": [0.408], \"y\": [1.001]}, \"o\": {\"x\": [0.605], \"y\": [0]}, \"t\": 299, \"s\": [50]}, {\"i\": {\"x\": [0.407], \"y\": [1.001]}, \"o\": {\"x\": [0.603], \"y\": [0.004]}, \"t\": 450, \"s\": [-50]}, {\"i\": {\"x\": [0.417], \"y\": [1.001]}, \"o\": {\"x\": [0.604], \"y\": [0.003]}, \"t\": 599, \"s\": [50]}, {\"i\": {\"x\": [0.402], \"y\": [0.998]}, \"o\": {\"x\": [0.599], \"y\": [-0.004]}, \"t\": 750, \"s\": [-50]}, {\"i\": {\"x\": [0.411], \"y\": [0.997]}, \"o\": {\"x\": [0.612], \"y\": [0.004]}, \"t\": 900, \"s\": [50]}, {\"i\": {\"x\": [0.404], \"y\": [1.003]}, \"o\": {\"x\": [0.605], \"y\": [-0.002]}, \"t\": 1050, \"s\": [-50]}, {\"t\": 1199, \"s\": [50]}], \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 150, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, -250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0, 0.364705890417, 0.662745118141, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [2, 200], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, -150], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.937254905701, 0.882352948189, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 1201, \"st\": 0, \"ct\": 1, \"bm\": 0}]}], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 0, \"nm\": \"swing\", \"refId\": \"comp_0\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 100, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [70, 70, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"w\": 500, \"h\": 500, \"ip\": 0, \"op\": 600, \"st\": 0, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 0, \"nm\": \"swing\", \"refId\": \"comp_0\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 350, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [70, 70, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"w\": 500, \"h\": 500, \"ip\": 0, \"op\": 600, \"st\": 0, \"bm\": 0}], \"markers\": [], \"props\": {}}, function (lottie, data) { var layer = lottie.layers[0]; layer.sr = Number(data[\"Time Stretch\"]); this.json_viewer_contents = lottie.layers[0]; }, {} ); Time Remap The tm property specifies a time remap function as an animatable property, allowing full control over the precomp timeline (subset, speedup/slowdown, reverse, frame-freeze, or any other arbitrary transformation). It maps the current layer time (in the frame index [ i p \u2026 o p ] domain) to a precomp time expressed in seconds, and evaluates all animatable precomp properties based on the new time value: t m : [ i p \u2026 o p ] \u21a6 s e c o n d s t \u2032 = t m ( t ) \u00b7 F P S Note: the global frame rate factor F P S ( Animation fr property) is required to convert back into the frame index domain. When both time stretch ( sr ) and time remap ( tm ) are specified, time stretch is applied first. Example Time Remap Linear Reverse Subset Discrete Easing 1 Easing 2 Easing-Reverse var lottie_player_17 = new PlaygroundPlayer( 17, 'playground_17_2', 'lottie_target_17', {\"v\": \"5.12.0\", \"fr\": 60, \"ip\": 0, \"op\": 600, \"w\": 500, \"h\": 500, \"nm\": \"time_remap\", \"ddd\": 0, \"assets\": [{\"id\": \"comp_0\", \"nm\": \"time_remap_precomp\", \"fr\": 60, \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0, 0.858823537827, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 7, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 5, \"bm\": 0, \"d\": [{\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 4.5, \"ix\": 1}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 15, \"ix\": 2}}, {\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0, \"ix\": 7}}], \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 0.266666680574, 0.270588248968, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 1, \"k\": [{\"i\": {\"x\": 0.833, \"y\": 0.833}, \"o\": {\"x\": 0.167, \"y\": 0.167}, \"t\": 0, \"s\": [-250, 0], \"to\": [83.333, 0], \"ti\": [-83.333, 0]}, {\"t\": 599, \"s\": [250, 0]}], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 599, \"s\": [540]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [500, 5], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 50], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0, 0, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 3\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [500, 200], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 1, 1, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 600, \"st\": 0, \"ct\": 1, \"bm\": 0}]}], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 350, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [2, 120], \"ix\": 2}, \"p\": {\"a\": 1, \"k\": [{\"i\": {\"x\": 0.833, \"y\": 0.833}, \"o\": {\"x\": 0.167, \"y\": 0.167}, \"t\": 0, \"s\": [-250, 0], \"to\": [83.333, 0], \"ti\": [-83.333, 0]}, {\"t\": 599, \"s\": [250, 0]}], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 0, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 3\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ind\": 0, \"ty\": \"sh\", \"ix\": 1, \"ks\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0]], \"v\": [[-229.358, 0.147], [5.161, 0.72], [204.128, 2.44]], \"c\": false}, \"ix\": 2}, \"nm\": \"Path 1\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0, 0.470588237047, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 2, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [500, 100], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.917647063732, 0.917647063732, 0.705882370472, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 600, \"st\": 0, \"ct\": 1, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 0, \"nm\": \"time_remap_precomp\", \"refId\": \"comp_0\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 180, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"tm\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 120, \"s\": [7]}, {\"t\": 600, \"s\": [10]}], \"ix\": 2}, \"w\": 500, \"h\": 500, \"ip\": 0, \"op\": 600, \"st\": 0, \"bm\": 0}], \"markers\": []}, function (lottie, data) { const time_maps = [ { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }}, { 't': 600, 's': [10] } ]}, { 'a': 1, k: [ { 't': 0, 's': [10], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }}, { 't': 600, 's': [ 0] } ]}, { 'a': 1, k: [ { 't': 0, 's': [3], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }}, { 't': 600, 's': [7] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0.0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 150, 's': [ 2.5], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 300, 's': [ 5.0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 450, 's': [ 7.5], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 600, 's': [10.0] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0], 'y': [0.5]}, 'i': { 'x': [0.5], 'y': [1] }}, { 't': 600, 's': [10] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0], 'y': [0.5]}, 'i': { 'x': [1], 'y': [0.5] }}, { 't': 600, 's': [10] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0.2], 'y': [0]}, 'i': { 'x': [0.8], 'y': [1] }}, { 't': 300, 's': [ 7], 'o': { 'x': [0.2], 'y': [0]}, 'i': { 'x': [0.8], 'y': [1] }}, { 't': 600, 's': [ 0] } ]}, ]; const time_paths = [ { 'v': [[-250, 50], [250, -50]], 'o': [[ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[250, 50], [-250, -50]], 'o': [[ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[250, 20], [-250, -20]], 'o': [[ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[-250, 50], [-125, 50], [-125, 25], [0, 25], [0, 0], [125, 0], [125, -25], [250, -25]], 'o': [[ 0, 0], [ 0, 0], [ 0, 0], [0, 0], [0, 0], [ 0, 0], [ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0], [ 0, 0], [0, 0], [0, 0], [ 0, 0], [ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[-250, 50], [ 250, -50]], 'o': [[ 0, -50], [ 0, 0]], 'i': [[ 0, 0], [-250, 0]], 'c': false }, { 'v': [[-250, 50], [250, -50]], 'o': [[ 0, -50], [ 0, 0]], 'i': [[ 0, 0], [ 0, 50]], 'c': false }, { 'v': [[-250, 50], [ 0, -20], [ 250, 50]], 'o': [[ 100, 0], [ 100, 0], [ 0, 0]], 'i': [[ 0, 0], [-100, 0], [-100, 0]], 'c': false }, ]; const sample_index = data[\"Time Remap\"]; const precomp_layer = lottie.layers[1]; precomp_layer.tm = time_maps[sample_index]; const time_shape = lottie.layers[0].shapes[1].it[0]; time_shape.ks.k = time_paths[sample_index]; this.json_viewer_contents = lottie.layers[1].tm; }, {} );","title":"Layers"},{"location":"specs/layers/#layers","text":"","title":"Layers"},{"location":"specs/layers/#common-properties","text":"","title":"Common Properties"},{"location":"specs/layers/#layer","text":"Common properties for all layers Composition Diagram for Layer Layer Visual Object Visual Layer Solid Layer Image Layer Precomposition Layer Null Layer Shape Layer Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer Type Layer Type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible The ty property defines the specific layer type based on the following values: ty Type 0 Precomposition Layer 2 Image Layer 3 Null Layer 1 Solid Layer 4 Shape Layer None Unknown layer types","title":"Layer"},{"location":"specs/layers/#visual-layer","text":"Layer used to affect visual elements Composition Diagram for Visual Layer Visual Layer Layer Visual Object Solid Layer Image Layer Precomposition Layer Null Layer Shape Layer Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer Type Layer Type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer.","title":"Visual Layer"},{"location":"specs/layers/#parenting","text":"Layer parenting offers a way to connect layers such that the movement of one layer (child) follows the movement of another (parent). Multiple child layers can reference the same parent (this is useful for applying the same transform animation to a group of layers). When the parent property points to another layer, the referencing layer's current transformation matrix (CTM) is composed with the parent CTM: C T M ( c h i l d ) = C T M ( p a r e n t ) \u00d7 T r a n s f o r m ( c h i l d ) Parenting is transitive, and reference cycles are not allowed (undefined behavior).","title":"Parenting"},{"location":"specs/layers/#hidden-layers","text":"The hidden flag hd determines whether a layer is rendered: hidden layers are not rendered as part of the normal layer tree, but their properties and content are evaluated when used as a reference target in other contexts. Specifically, hidden layers contribute to a layer's total transform when used as a parent contribute to a layer's track matte when used as a matte source hd only affects the layer for which it is defined, it does not transitively apply to other referencing layers.","title":"Hidden Layers"},{"location":"specs/layers/#mattes","text":"A matte allows using a layer as a mask for another layer. The way it works is the layer defining the mask has a tt attribute with the appropriate value . The layer being masked is indicated by the tp attribute, which has the index ( ind ) of the layer that is being masked. In this example there's a layer with a rectangle and a star being masked by an ellipse: Example Enable Matte Matte Mode Normal Alpha Inverted Alpha Luma Inverted Luma var lottie_player_15 = new PlaygroundPlayer( 15, 'playground_15_3', 'lottie_target_15', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{b3d1b083-9de7-4537-a691-fc9aa42f9742}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Ellipse (Mask)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [153, 294]}, \"p\": {\"a\": 0, \"k\": [346, 211]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"mn\": \"{261eddeb-af92-4be1-932c-790b00c23933}\", \"p\": {\"a\": 0, \"k\": [137.0955223880597, 293.60820895522386]}, \"s\": {\"a\": 0, \"k\": [303.42089552238804, 315.55074626865667]}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{aa9c282c-253d-4d8d-ab05-4819c592fa85}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 1, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 6}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{2b2b0002-ff0c-4978-a33b-db4e0498848d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}], \"td\": 1}, {\"ddd\": 0, \"ty\": 4, \"ind\": 2, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Shapes (Masked)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{528994b7-40ff-4d12-81f8-603f274da12e}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{ce8756d7-289f-4f84-a135-d225d57c42e0}\", \"p\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"or\": {\"a\": 0, \"k\": 216.4160919189453}, \"ir\": {\"a\": 0, \"k\": 87.03440856933594}, \"r\": {\"a\": 0, \"k\": 261.54803466796875}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{efd05a25-a43b-451d-83d2-53a477087223}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{523ca39c-9e57-4547-bf0e-ba7496003579}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.19607843137254902, 0.3137254901960784, 0.6901960784313725]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"p\": {\"a\": 0, \"k\": [338.7223880597015, 209.76716417910447]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"Rectangle\", \"mn\": \"{d2d7a5d5-6d91-42e8-b40a-af52a112fe38}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{9ef8604e-7891-4909-a655-445131b4d842}\", \"p\": {\"a\": 0, \"k\": [209.17611940298502, 226.8]}, \"s\": {\"a\": 0, \"k\": [363.3313432835821, 369.3492537313433]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{444584d2-cb59-4cba-83a1-82cc605837fd}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{f75aed67-9b0e-41a9-b859-a14b5b0a320d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.7686274509803922, 0.8509803921568627, 0.9607843137254902]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"p\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}], \"tt\": 1, \"tp\": 1}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { if ( data[\"Enable Matte\"] ) { lottie.layers[1].tt = Number(data[\"Matte Mode\"]); lottie.layers[1].tp = 1; lottie.layers[0].td = 1; } else { lottie.layers[1].tt = undefined; lottie.layers[1].tp = undefined; lottie.layers[0].td = undefined; } this.json_viewer_contents = {...lottie.layers[1], shapes: [], ks: {}}; }, {} );","title":"Mattes"},{"location":"specs/layers/#layer-types","text":"","title":"Layer types"},{"location":"specs/layers/#shape-layer","text":"Layer containing Shapes Composition Diagram for Shape Layer Shape Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 4 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. shapes array of Graphic Element Shapes Shapes","title":"Shape Layer"},{"location":"specs/layers/#image-layer","text":"Layer containing an image Composition Diagram for Image Layer Image Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 2 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. refId string Reference Id ID of the image as specified in the assets","title":"Image Layer"},{"location":"specs/layers/#null-layer","text":"Layer with no data, useful to group layers together Composition Diagram for Null Layer Null Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 3 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer.","title":"Null Layer"},{"location":"specs/layers/#solid-layer","text":"Solid color, rectangle-shaped layer Composition Diagram for Solid Layer Solid Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 1 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. sw integer Width Solid rectangle width sh integer Height Solid rectangle height sc Hex Color Color Solid fill color","title":"Solid Layer"},{"location":"specs/layers/#precomposition-layer","text":"Layer that renders a Precomposition asset Composition Diagram for Precomposition Layer Precomposition Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 0 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. refId string Reference Id ID of the precomp as specified in the assets w integer Width Width of the clipping rect h integer Height Height of the clipping rect sr number Time Stretch Time Stretch st number Start Time Start Time tm Scalar Time Remap Timeline remap function (frame index -> time in seconds)","title":"Precomposition Layer"},{"location":"specs/layers/#precomposition-time-stretch","text":"The st property specifies a start time offset, while sr defines a time stretch factor, to be applied when evaluating animated properties pertaining to the layer: t \u2032 = t s t r e t c h \u2212 s t a r t sr values less than 1 increase the layer playback speed, while values greater than 1 decrease it (\"stretching\" the layer timeline). Example Time Stretch 1 var lottie_player_16 = new PlaygroundPlayer( 16, 'playground_16_2', 'lottie_target_16', {\"v\": \"5.12.0\", \"fr\": 60, \"ip\": 0, \"op\": 600, \"w\": 500, \"h\": 500, \"nm\": \"time_stretch\", \"ddd\": 0, \"assets\": [{\"id\": \"comp_0\", \"nm\": \"swing\", \"fr\": 60, \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.402], \"y\": [0.993]}, \"o\": {\"x\": [0.599], \"y\": [-0.002]}, \"t\": 0, \"s\": [50]}, {\"i\": {\"x\": [0.407], \"y\": [1.004]}, \"o\": {\"x\": [0.603], \"y\": [0.005]}, \"t\": 150, \"s\": [-50]}, {\"i\": {\"x\": [0.408], \"y\": [1.001]}, \"o\": {\"x\": [0.605], \"y\": [0]}, \"t\": 299, \"s\": [50]}, {\"i\": {\"x\": [0.407], \"y\": [1.001]}, \"o\": {\"x\": [0.603], \"y\": [0.004]}, \"t\": 450, \"s\": [-50]}, {\"i\": {\"x\": [0.417], \"y\": [1.001]}, \"o\": {\"x\": [0.604], \"y\": [0.003]}, \"t\": 599, \"s\": [50]}, {\"i\": {\"x\": [0.402], \"y\": [0.998]}, \"o\": {\"x\": [0.599], \"y\": [-0.004]}, \"t\": 750, \"s\": [-50]}, {\"i\": {\"x\": [0.411], \"y\": [0.997]}, \"o\": {\"x\": [0.612], \"y\": [0.004]}, \"t\": 900, \"s\": [50]}, {\"i\": {\"x\": [0.404], \"y\": [1.003]}, \"o\": {\"x\": [0.605], \"y\": [-0.002]}, \"t\": 1050, \"s\": [-50]}, {\"t\": 1199, \"s\": [50]}], \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 150, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, -250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0, 0.364705890417, 0.662745118141, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [2, 200], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, -150], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.937254905701, 0.882352948189, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 1201, \"st\": 0, \"ct\": 1, \"bm\": 0}]}], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 0, \"nm\": \"swing\", \"refId\": \"comp_0\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 100, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [70, 70, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"w\": 500, \"h\": 500, \"ip\": 0, \"op\": 600, \"st\": 0, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 0, \"nm\": \"swing\", \"refId\": \"comp_0\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 350, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [70, 70, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"w\": 500, \"h\": 500, \"ip\": 0, \"op\": 600, \"st\": 0, \"bm\": 0}], \"markers\": [], \"props\": {}}, function (lottie, data) { var layer = lottie.layers[0]; layer.sr = Number(data[\"Time Stretch\"]); this.json_viewer_contents = lottie.layers[0]; }, {} );","title":"Time Stretch"},{"location":"specs/layers/#precomposition-time-remap","text":"The tm property specifies a time remap function as an animatable property, allowing full control over the precomp timeline (subset, speedup/slowdown, reverse, frame-freeze, or any other arbitrary transformation). It maps the current layer time (in the frame index [ i p \u2026 o p ] domain) to a precomp time expressed in seconds, and evaluates all animatable precomp properties based on the new time value: t m : [ i p \u2026 o p ] \u21a6 s e c o n d s t \u2032 = t m ( t ) \u00b7 F P S Note: the global frame rate factor F P S ( Animation fr property) is required to convert back into the frame index domain. When both time stretch ( sr ) and time remap ( tm ) are specified, time stretch is applied first. Example Time Remap Linear Reverse Subset Discrete Easing 1 Easing 2 Easing-Reverse var lottie_player_17 = new PlaygroundPlayer( 17, 'playground_17_2', 'lottie_target_17', {\"v\": \"5.12.0\", \"fr\": 60, \"ip\": 0, \"op\": 600, \"w\": 500, \"h\": 500, \"nm\": \"time_remap\", \"ddd\": 0, \"assets\": [{\"id\": \"comp_0\", \"nm\": \"time_remap_precomp\", \"fr\": 60, \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0, 0.858823537827, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 7, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 5, \"bm\": 0, \"d\": [{\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 4.5, \"ix\": 1}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 15, \"ix\": 2}}, {\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0, \"ix\": 7}}], \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 0.266666680574, 0.270588248968, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 1, \"k\": [{\"i\": {\"x\": 0.833, \"y\": 0.833}, \"o\": {\"x\": 0.167, \"y\": 0.167}, \"t\": 0, \"s\": [-250, 0], \"to\": [83.333, 0], \"ti\": [-83.333, 0]}, {\"t\": 599, \"s\": [250, 0]}], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 599, \"s\": [540]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [500, 5], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 50], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0, 0, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 3\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [500, 200], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 1, 1, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 600, \"st\": 0, \"ct\": 1, \"bm\": 0}]}], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 350, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [2, 120], \"ix\": 2}, \"p\": {\"a\": 1, \"k\": [{\"i\": {\"x\": 0.833, \"y\": 0.833}, \"o\": {\"x\": 0.167, \"y\": 0.167}, \"t\": 0, \"s\": [-250, 0], \"to\": [83.333, 0], \"ti\": [-83.333, 0]}, {\"t\": 599, \"s\": [250, 0]}], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 0, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 3\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ind\": 0, \"ty\": \"sh\", \"ix\": 1, \"ks\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0]], \"v\": [[-229.358, 0.147], [5.161, 0.72], [204.128, 2.44]], \"c\": false}, \"ix\": 2}, \"nm\": \"Path 1\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0, 0.470588237047, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 2, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [500, 100], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.917647063732, 0.917647063732, 0.705882370472, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 600, \"st\": 0, \"ct\": 1, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 0, \"nm\": \"time_remap_precomp\", \"refId\": \"comp_0\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 180, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"tm\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 120, \"s\": [7]}, {\"t\": 600, \"s\": [10]}], \"ix\": 2}, \"w\": 500, \"h\": 500, \"ip\": 0, \"op\": 600, \"st\": 0, \"bm\": 0}], \"markers\": []}, function (lottie, data) { const time_maps = [ { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }}, { 't': 600, 's': [10] } ]}, { 'a': 1, k: [ { 't': 0, 's': [10], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }}, { 't': 600, 's': [ 0] } ]}, { 'a': 1, k: [ { 't': 0, 's': [3], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }}, { 't': 600, 's': [7] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0.0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 150, 's': [ 2.5], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 300, 's': [ 5.0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 450, 's': [ 7.5], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 600, 's': [10.0] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0], 'y': [0.5]}, 'i': { 'x': [0.5], 'y': [1] }}, { 't': 600, 's': [10] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0], 'y': [0.5]}, 'i': { 'x': [1], 'y': [0.5] }}, { 't': 600, 's': [10] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0.2], 'y': [0]}, 'i': { 'x': [0.8], 'y': [1] }}, { 't': 300, 's': [ 7], 'o': { 'x': [0.2], 'y': [0]}, 'i': { 'x': [0.8], 'y': [1] }}, { 't': 600, 's': [ 0] } ]}, ]; const time_paths = [ { 'v': [[-250, 50], [250, -50]], 'o': [[ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[250, 50], [-250, -50]], 'o': [[ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[250, 20], [-250, -20]], 'o': [[ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[-250, 50], [-125, 50], [-125, 25], [0, 25], [0, 0], [125, 0], [125, -25], [250, -25]], 'o': [[ 0, 0], [ 0, 0], [ 0, 0], [0, 0], [0, 0], [ 0, 0], [ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0], [ 0, 0], [0, 0], [0, 0], [ 0, 0], [ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[-250, 50], [ 250, -50]], 'o': [[ 0, -50], [ 0, 0]], 'i': [[ 0, 0], [-250, 0]], 'c': false }, { 'v': [[-250, 50], [250, -50]], 'o': [[ 0, -50], [ 0, 0]], 'i': [[ 0, 0], [ 0, 50]], 'c': false }, { 'v': [[-250, 50], [ 0, -20], [ 250, 50]], 'o': [[ 100, 0], [ 100, 0], [ 0, 0]], 'i': [[ 0, 0], [-100, 0], [-100, 0]], 'c': false }, ]; const sample_index = data[\"Time Remap\"]; const precomp_layer = lottie.layers[1]; precomp_layer.tm = time_maps[sample_index]; const time_shape = lottie.layers[0].shapes[1].it[0]; time_shape.ks.k = time_paths[sample_index]; this.json_viewer_contents = lottie.layers[1].tm; }, {} );","title":"Time Remap"},{"location":"specs/properties/","text":"Properties Introduction Properties in Lottie can be animated. Their structure depends on whether it's animated or not: Attribute Type Title Description a 0-1 integer Animated Whether the property is animated k Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Keyframes Composition Diagram for Base Keyframe Base Keyframe Vector Keyframe Position Keyframe Gradient Keyframe Color Keyframe Shape Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe Keyframe arrays MUST be stored in order of ascending t frame number. Two consecutive keyframes MAY have the same t value but a property MUST NOT have more than two keyframes with the same t . If two keyframes share the t value, the implementation MUST render one of the two values at the given frame. All keyframes MUST have an i and o value, unless- It is the last keyframe in the sequence OR h is present and it's 1, as the property will keep the same value until the next keyframe. If the first keyframe occurs after the start of the animation, the initial property value will be from the first keyframe. Similarly, if the last keyframe is before the end of the animation, the last keyframe value will be held until the end. Keyframe Easing Keyframe easing handles are objects with x and y attributes, which are numbers within 0 and 1. Attribute Type Title Description x Vector or number X Time component: 0 means start time of the keyframe, 1 means time of the next keyframe. y Vector or number Y Value interpolation component: 0 means start value of the keyframe, 1 means value at the next keyframe. For vector properties, these are arrays, with one element per dimension so you can have different easing curves per dimension. They represent a cubic bezier, starting at [0,0] and ending at [1,1] where the value determines the easing function. The x axis represents time, a value of 0 is the time of the current keyframe, a value of 1 is the time of the next keyframe. The y axis represents the value interpolation factor, a value of 0 represents the value at the current keyframe, a value of 1 represents the value at the next keyframe. Unlike x values, y values are not clamped to [0 .. 1] . Supernormal y values allow the interpolated value to overshoot (extrapolate) beyond the specified keyframe values range. When you use easing you have two easing handles for the keyframe: o is the \"out\" handle, and is the first one in the bezier, determines the curve as it exits the current keyframe. i is the \"in\" handle, and it's the second one in the bezier, determines the curve as it enters the next keyframe. For linear interpolation you'd have { \"o\": {\"x\": [0, 0], \"y\": [0, 0]}, \"i\": {\"x\": [1, 1], \"y\": [1, 1]} } For easing in and out, you move the x towards the center, this makes the animation more fluid: { \"o\": {\"x\": [0.333, 0.333], \"y\": [0, 0]}, \"i\": {\"x\": [0.667, 0.667], \"y\": [1, 1]} } Easing example In the following example, the ball moves left and right, on the background you can see and edit a representation of its easing function. KeyframePreviewEditor.stand_alone(document.getElementById(\"editor_18\"), (lottie) => { var raw_json = JSON.stringify(lottie, undefined, 4); var pretty_json = hljs.highlight(\"json\", raw_json).value; document.getElementById(\"json_viewer_18\").innerHTML = pretty_json; }, ); Property types Vector Animatable Vector . Composition Diagram for Vector Property Vector Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k Vector or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Vector Keyframe Composition Diagram for Vector Keyframe Vector Keyframe Base Keyframe Position Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Vector Value Value at this keyframe. Scalar Animatable scalar (single number value). Note that when animated it uses Vector Keyframes , so instead of scalars keyframes have arrays with a single values. Composition Diagram for Scalar Property Scalar Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k number or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Position Animatable 2D Vector with optional spatial tangents. Composition Diagram for Position Property Position Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k Vector or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Position Keyframe Composition Diagram for Position Keyframe Position Keyframe Vector Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Vector Value Value at this keyframe. ti Vector Value In Tangent Tangent for values (eg: moving position around a curved path) to Vector Value Out Tangent Tangent for values (eg: moving position around a curved path) Split Position An animatable position where position values may be defined and animated separately. Attribute Type Title Description s boolean = True Split Whether the position has split values x Scalar X Position X Position y Scalar Y Position Y Position Bezier Shape Animatable Bezier . Attribute Type Title Description a 0-1 integer Animated Whether the property is animated k Bezier or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Bezier Shape Keyframe Composition Diagram for Shape Keyframe Shape Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s array of Bezier Value Value at this keyframe. Color Animatable Color . Composition Diagram for Color Property Color Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k Color or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Color Keyframe Composition Diagram for Color Keyframe Color Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Color Value Value at this keyframe. Gradient Animatable Gradient . Attribute Type Title Description p number Color stop count Color stop count k object Gradient stops Animatable vector representing the gradient stops k.a 0-1 integer Animated Whether the property is animated k.k Gradient or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Color count is not animatable. Gradient Keyframe Composition Diagram for Gradient Keyframe Gradient Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Gradient Value Value at this keyframe.","title":"Properties"},{"location":"specs/properties/#properties","text":"","title":"Properties"},{"location":"specs/properties/#introduction","text":"Properties in Lottie can be animated. Their structure depends on whether it's animated or not: Attribute Type Title Description a 0-1 integer Animated Whether the property is animated k Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes.","title":"Introduction"},{"location":"specs/properties/#base-keyframe","text":"Composition Diagram for Base Keyframe Base Keyframe Vector Keyframe Position Keyframe Gradient Keyframe Color Keyframe Shape Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe Keyframe arrays MUST be stored in order of ascending t frame number. Two consecutive keyframes MAY have the same t value but a property MUST NOT have more than two keyframes with the same t . If two keyframes share the t value, the implementation MUST render one of the two values at the given frame. All keyframes MUST have an i and o value, unless- It is the last keyframe in the sequence OR h is present and it's 1, as the property will keep the same value until the next keyframe. If the first keyframe occurs after the start of the animation, the initial property value will be from the first keyframe. Similarly, if the last keyframe is before the end of the animation, the last keyframe value will be held until the end.","title":"Keyframes"},{"location":"specs/properties/#easing-handle","text":"Keyframe easing handles are objects with x and y attributes, which are numbers within 0 and 1. Attribute Type Title Description x Vector or number X Time component: 0 means start time of the keyframe, 1 means time of the next keyframe. y Vector or number Y Value interpolation component: 0 means start value of the keyframe, 1 means value at the next keyframe. For vector properties, these are arrays, with one element per dimension so you can have different easing curves per dimension. They represent a cubic bezier, starting at [0,0] and ending at [1,1] where the value determines the easing function. The x axis represents time, a value of 0 is the time of the current keyframe, a value of 1 is the time of the next keyframe. The y axis represents the value interpolation factor, a value of 0 represents the value at the current keyframe, a value of 1 represents the value at the next keyframe. Unlike x values, y values are not clamped to [0 .. 1] . Supernormal y values allow the interpolated value to overshoot (extrapolate) beyond the specified keyframe values range. When you use easing you have two easing handles for the keyframe: o is the \"out\" handle, and is the first one in the bezier, determines the curve as it exits the current keyframe. i is the \"in\" handle, and it's the second one in the bezier, determines the curve as it enters the next keyframe. For linear interpolation you'd have { \"o\": {\"x\": [0, 0], \"y\": [0, 0]}, \"i\": {\"x\": [1, 1], \"y\": [1, 1]} } For easing in and out, you move the x towards the center, this makes the animation more fluid: { \"o\": {\"x\": [0.333, 0.333], \"y\": [0, 0]}, \"i\": {\"x\": [0.667, 0.667], \"y\": [1, 1]} }","title":"Keyframe Easing"},{"location":"specs/properties/#easing-example","text":"In the following example, the ball moves left and right, on the background you can see and edit a representation of its easing function. KeyframePreviewEditor.stand_alone(document.getElementById(\"editor_18\"), (lottie) => { var raw_json = JSON.stringify(lottie, undefined, 4); var pretty_json = hljs.highlight(\"json\", raw_json).value; document.getElementById(\"json_viewer_18\").innerHTML = pretty_json; }, );","title":"Easing example"},{"location":"specs/properties/#property-types","text":"","title":"Property types"},{"location":"specs/properties/#vector-property","text":"Animatable Vector . Composition Diagram for Vector Property Vector Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k Vector or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes.","title":"Vector"},{"location":"specs/properties/#vector-keyframe","text":"Composition Diagram for Vector Keyframe Vector Keyframe Base Keyframe Position Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Vector Value Value at this keyframe.","title":"Vector Keyframe"},{"location":"specs/properties/#scalar-property","text":"Animatable scalar (single number value). Note that when animated it uses Vector Keyframes , so instead of scalars keyframes have arrays with a single values. Composition Diagram for Scalar Property Scalar Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k number or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes.","title":"Scalar"},{"location":"specs/properties/#position-property","text":"Animatable 2D Vector with optional spatial tangents. Composition Diagram for Position Property Position Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k Vector or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes.","title":"Position"},{"location":"specs/properties/#position-keyframe","text":"Composition Diagram for Position Keyframe Position Keyframe Vector Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Vector Value Value at this keyframe. ti Vector Value In Tangent Tangent for values (eg: moving position around a curved path) to Vector Value Out Tangent Tangent for values (eg: moving position around a curved path)","title":"Position Keyframe"},{"location":"specs/properties/#splittable-position-property","text":"An animatable position where position values may be defined and animated separately. Attribute Type Title Description s boolean = True Split Whether the position has split values x Scalar X Position X Position y Scalar Y Position Y Position","title":"Split Position"},{"location":"specs/properties/#bezier-property","text":"Animatable Bezier . Attribute Type Title Description a 0-1 integer Animated Whether the property is animated k Bezier or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes.","title":"Bezier Shape"},{"location":"specs/properties/#bezier-keyframe","text":"Composition Diagram for Shape Keyframe Shape Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s array of Bezier Value Value at this keyframe.","title":"Bezier Shape Keyframe"},{"location":"specs/properties/#color-property","text":"Animatable Color . Composition Diagram for Color Property Color Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k Color or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes.","title":"Color"},{"location":"specs/properties/#color-keyframe","text":"Composition Diagram for Color Keyframe Color Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Color Value Value at this keyframe.","title":"Color Keyframe"},{"location":"specs/properties/#gradient-property","text":"Animatable Gradient . Attribute Type Title Description p number Color stop count Color stop count k object Gradient stops Animatable vector representing the gradient stops k.a 0-1 integer Animated Whether the property is animated k.k Gradient or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Color count is not animatable.","title":"Gradient"},{"location":"specs/properties/#gradient-keyframe","text":"Composition Diagram for Gradient Keyframe Gradient Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Gradient Value Value at this keyframe.","title":"Gradient Keyframe"},{"location":"specs/schema/","text":"JSON Schema This page shows a formatted version of the JSON schema, you can click on highlighted objects to get a link to that section of the schema. You can also click on $ref values to jump to the relevant section. If you want you can also view the raw schema file . { \"$schema\" : \"https://json-schema.org/draft/2020-12/schema\" , \"$id\" : \"https://lottie.github.io/lottie-spec/specs/schema/0.1.0\" , \"$ref\" : \"#/$defs/composition/animation\" , \"$version\" : 100 , \"$defs\" : { \"assets\" : { \"precomposition\" : { \"type\" : \"object\" , \"title\" : \"Precomposition\" , \"description\" : \"Asset containing a composition that can be referenced by layers.\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/assets/asset\" }, { \"$ref\" : \"#/$defs/composition/composition\" } ] }, \"asset\" : { \"type\" : \"object\" , \"title\" : \"Asset\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"id\" : { \"title\" : \"ID\" , \"description\" : \"Unique identifier used by layers when referencing this asset\" , \"type\" : \"string\" } }, \"required\" : [ \"id\" ] } ] }, \"image\" : { \"type\" : \"object\" , \"title\" : \"Image\" , \"description\" : \"Asset containing an image that can be referenced by layers.\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/assets/asset\" }, { \"$ref\" : \"#/$defs/helpers/slottable-object\" }, { \"type\" : \"object\" , \"properties\" : { \"w\" : { \"title\" : \"Width\" , \"description\" : \"Width of the image\" , \"type\" : \"number\" }, \"h\" : { \"title\" : \"Height\" , \"description\" : \"Height of the image\" , \"type\" : \"number\" }, \"p\" : { \"title\" : \"File Name\" , \"description\" : \"Name of the image file or a data url\" , \"type\" : \"string\" }, \"u\" : { \"title\" : \"File Path\" , \"description\" : \"Path to the image file\" , \"type\" : \"string\" }, \"e\" : { \"title\" : \"Embedded\" , \"description\" : \"If '1', 'p' is a Data URL\" , \"$ref\" : \"#/$defs/values/int-boolean\" } }, \"allOf\" : [ { \"if\" : { \"properties\" : { \"e\" : { \"const\" : 1 } }, \"required\" : [ \"e\" ] }, \"then\" : { \"properties\" : { \"p\" : { \"$ref\" : \"#/$defs/values/data-url\" } } } } ], \"if\" : { \"required\" : [ \"sid\" ] }, \"else\" : { \"required\" : [ \"w\" , \"h\" , \"p\" ] } } ] }, \"all-assets\" : { \"oneOf\" : [ { \"$ref\" : \"#/$defs/assets/precomposition\" }, { \"$ref\" : \"#/$defs/assets/image\" } ] } }, \"composition\" : { \"animation\" : { \"type\" : \"object\" , \"title\" : \"Animation\" , \"description\" : \"Top level object, describing the animation\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"ver\" : { \"title\" : \"Specification Version\" , \"description\" : \"Specification version this Lottie is targeting. This is a 6 digit number with version components encoded as MMmmpp , with MM being major version, mm being minor and pp being patch.\" , \"type\" : \"integer\" , \"minimum\" : 100 }, \"fr\" : { \"title\" : \"Framerate\" , \"description\" : \"Framerate in frames per second\" , \"type\" : \"number\" , \"exclusiveMinimum\" : 0 }, \"ip\" : { \"title\" : \"In Point\" , \"description\" : \"Frame the animation starts at (usually 0)\" , \"type\" : \"number\" }, \"op\" : { \"title\" : \"Out Point\" , \"description\" : \"Frame the animation stops/loops at, which makes this the duration in frames when ip is 0\" , \"type\" : \"number\" }, \"w\" : { \"title\" : \"Width\" , \"description\" : \"Width of the animation\" , \"type\" : \"integer\" , \"minimum\" : 0 }, \"h\" : { \"title\" : \"Height\" , \"description\" : \"Height of the animation\" , \"type\" : \"integer\" , \"minimum\" : 0 }, \"assets\" : { \"title\" : \"Assets\" , \"type\" : \"array\" , \"description\" : \"List of assets that can be referenced by layers\" , \"items\" : { \"$ref\" : \"#/$defs/assets/all-assets\" } }, \"markers\" : { \"title\" : \"Markers\" , \"description\" : \"Markers defining named sections of the composition.\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/helpers/marker\" } }, \"slots\" : { \"title\" : \"Slots\" , \"description\" : \"Dictionary of slot ids that will replace matching properties.\" , \"type\" : \"object\" , \"additionalProperties\" : { \"$ref\" : \"#/$defs/helpers/slot\" } } }, \"required\" : [ \"w\" , \"h\" , \"fr\" , \"op\" , \"ip\" ] }, { \"$ref\" : \"#/$defs/composition/composition\" } ] }, \"composition\" : { \"type\" : \"object\" , \"title\" : \"Composition\" , \"description\" : \"An object that contains a list of layers\" , \"properties\" : { \"layers\" : { \"title\" : \"Layers\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/layers/all-layers\" } } }, \"required\" : [ \"layers\" ] } }, \"constants\" : { \"gradient-type\" : { \"type\" : \"integer\" , \"title\" : \"Gradient Type\" , \"description\" : \"Whether a Gradient is a linear or radial.\" , \"oneOf\" : [ { \"title\" : \"Linear\" , \"description\" : \"Colors transition in a single linear direction.\" , \"const\" : 1 }, { \"title\" : \"Radial\" , \"description\" : \"Colors transition outward from a center point.\" , \"const\" : 2 } ] }, \"line-cap\" : { \"type\" : \"integer\" , \"title\" : \"Line Cap\" , \"description\" : \"Style at the end of a stoked line\" , \"oneOf\" : [ { \"title\" : \"Butt\" , \"const\" : 1 }, { \"title\" : \"Round\" , \"const\" : 2 }, { \"title\" : \"Square\" , \"const\" : 3 } ] }, \"fill-rule\" : { \"type\" : \"integer\" , \"title\" : \"Fill Rule\" , \"description\" : \"Rule used to handle multiple shapes rendered with the same fill object\" , \"oneOf\" : [ { \"title\" : \"Non Zero\" , \"description\" : \"Everything is colored (You can think of this as an OR)\" , \"const\" : 1 }, { \"title\" : \"Even Odd\" , \"description\" : \"Colored based on intersections and path direction, can be used to create \\\"holes\\\"\" , \"const\" : 2 } ] }, \"matte-mode\" : { \"type\" : \"integer\" , \"title\" : \"Matte Mode\" , \"description\" : \"How a layer should mask another layer\" , \"oneOf\" : [ { \"title\" : \"Normal\" , \"description\" : \"The layer is not used as a track matte\" , \"const\" : 0 }, { \"title\" : \"Alpha\" , \"description\" : \"The masked layer opacity is modulated by the track matte layer opacity\" , \"const\" : 1 }, { \"title\" : \"Inverted Alpha\" , \"description\" : \"The masked layer opacity is modulated by the inverted track matte layer opacity\" , \"const\" : 2 }, { \"title\" : \"Luma\" , \"description\" : \"The masked layer opacity is modulated by the track matte layer luminance\" , \"const\" : 3 }, { \"title\" : \"Inverted Luma\" , \"description\" : \"The masked layer opacity is modulated by the inverted track matte layer luminance\" , \"const\" : 4 } ] }, \"star-type\" : { \"type\" : \"integer\" , \"title\" : \"Star Type\" , \"description\" : \"Whether a PolyStar is a star or a polygon\" , \"oneOf\" : [ { \"title\" : \"Star\" , \"const\" : 1 }, { \"title\" : \"Polygon\" , \"const\" : 2 } ] }, \"trim-multiple-shapes\" : { \"type\" : \"integer\" , \"title\" : \"Trim Multiple Shapes\" , \"description\" : \"How to handle multiple shapes in trim path\" , \"oneOf\" : [ { \"title\" : \"Parallel\" , \"description\" : \"All shapes apply the trim at the same time\" , \"const\" : 1 }, { \"title\" : \"Sequential\" , \"description\" : \"Shapes are considered as a continuous sequence\" , \"const\" : 2 } ] }, \"mask-mode\" : { \"type\" : \"string\" , \"title\" : \"Mask Mode\" , \"description\" : \"Describes how a mask interacts (blends) with the preceding masks in the stack.\" , \"oneOf\" : [ { \"title\" : \"None\" , \"const\" : \"n\" , \"description\" : \"The mask is ignored.\" }, { \"title\" : \"Add\" , \"const\" : \"a\" , \"description\" : \"Mask coverage is added (Normal blending).\" }, { \"title\" : \"Subtract\" , \"const\" : \"s\" , \"description\" : \"Mask coverage is subtracted (Subtract blending).\" }, { \"title\" : \"Intersect\" , \"const\" : \"i\" , \"description\" : \"Mask coverage is intersected (Source-In blending).\" } ] }, \"line-join\" : { \"type\" : \"integer\" , \"title\" : \"Line Join\" , \"description\" : \"Style at a sharp corner of a stoked line\" , \"oneOf\" : [ { \"title\" : \"Miter\" , \"const\" : 1 }, { \"title\" : \"Round\" , \"const\" : 2 }, { \"title\" : \"Bevel\" , \"const\" : 3 } ] }, \"shape-direction\" : { \"type\" : \"integer\" , \"title\" : \"Shape Direction\" , \"description\" : \"Drawing direction of the shape curve, useful for trim path\" , \"oneOf\" : [ { \"title\" : \"Normal\" , \"description\" : \"Usually clockwise\" , \"const\" : 1 }, { \"title\" : \"Reversed\" , \"description\" : \"Usually counter clockwise\" , \"const\" : 3 } ] }, \"stroke-dash-type\" : { \"type\" : \"string\" , \"title\" : \"Stroke Dash Type\" , \"description\" : \"Type of a dash item in a stroked line\" , \"oneOf\" : [ { \"title\" : \"Dash\" , \"const\" : \"d\" }, { \"title\" : \"Gap\" , \"const\" : \"g\" }, { \"title\" : \"Offset\" , \"const\" : \"o\" } ] } }, \"helpers\" : { \"marker\" : { \"type\" : \"object\" , \"title\" : \"Marker\" , \"description\" : \"Defines named portions of the composition.\" , \"properties\" : { \"cm\" : { \"title\" : \"Comment\" , \"type\" : \"string\" }, \"tm\" : { \"title\" : \"Time\" , \"type\" : \"number\" }, \"dr\" : { \"title\" : \"Duration\" , \"type\" : \"number\" } } }, \"slottable-object\" : { \"type\" : \"object\" , \"title\" : \"Slottable Object\" , \"description\" : \"Object that may have its value replaced with a slot value\" , \"properties\" : { \"sid\" : { \"title\" : \"Slot Id\" , \"description\" : \"Identifier to look up the slot\" , \"type\" : \"string\" } } }, \"transform\" : { \"type\" : \"object\" , \"title\" : \"Transform\" , \"description\" : \"Layer transform\" , \"allOf\" : [ { \"properties\" : { \"a\" : { \"title\" : \"Anchor Point\" , \"description\" : \"Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale)\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"p\" : { \"title\" : \"Position\" , \"description\" : \"Position / Translation\" , \"$ref\" : \"#/$defs/properties/splittable-position-property\" }, \"r\" : { \"title\" : \"Rotation\" , \"description\" : \"Rotation in degrees, clockwise\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"s\" : { \"title\" : \"Scale\" , \"description\" : \"Scale factor, [100, 100] for no scaling\" , \"$ref\" : \"#/$defs/properties/vector-property\" }, \"o\" : { \"title\" : \"Opacity\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"sk\" : { \"title\" : \"Skew\" , \"description\" : \"Skew amount as an angle in degrees\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"sa\" : { \"title\" : \"Skew Axis\" , \"description\" : \"Direction along which skew is applied, in degrees ( 0 skews along the X axis, 90 along the Y axis)\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } } } ] }, \"mask\" : { \"type\" : \"object\" , \"title\" : \"Mask\" , \"description\" : \"Mask for layer content.\" , \"allOf\" : [ { \"properties\" : { \"mode\" : { \"title\" : \"Mode\" , \"$ref\" : \"#/$defs/constants/mask-mode\" , \"default\" : \"i\" }, \"o\" : { \"title\" : \"Opacity\" , \"description\" : \"Mask opacity, as a percentage [0..100].\" , \"$ref\" : \"#/$defs/properties/scalar-property\" , \"default\" : 100 }, \"pt\" : { \"title\" : \"Shape\" , \"description\" : \"Mask shape\" , \"$ref\" : \"#/$defs/properties/bezier-property\" } }, \"required\" : [ \"pt\" ] } ] }, \"slot\" : { \"type\" : \"object\" , \"title\" : \"Slot\" , \"description\" : \"Defines a property value that will be set to all matched properties\" , \"properties\" : { \"p\" : { \"title\" : \"Property Value\" , \"description\" : \"Property Value\" } }, \"required\" : [ \"p\" ] }, \"slottable-property\" : { \"type\" : \"object\" , \"title\" : \"Slottable Property\" , \"description\" : \"Property that may have its value replaced with a slot value\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-object\" } ], \"if\" : { \"required\" : [ \"sid\" ] }, \"else\" : { \"required\" : [ \"a\" , \"k\" ] } }, \"visual-object\" : { \"type\" : \"object\" , \"title\" : \"Visual Object\" , \"description\" : \"\" , \"allOf\" : [ { \"type\" : \"object\" , \"properties\" : { \"nm\" : { \"title\" : \"Name\" , \"description\" : \"Human readable name, as seen from editors and the like\" , \"type\" : \"string\" } }, \"required\" : [] } ] } }, \"layers\" : { \"solid-layer\" : { \"type\" : \"object\" , \"title\" : \"Solid Layer\" , \"description\" : \"Solid color, rectangle-shaped layer\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 1 }, \"sw\" : { \"title\" : \"Width\" , \"description\" : \"Solid rectangle width\" , \"type\" : \"integer\" }, \"sh\" : { \"title\" : \"Height\" , \"description\" : \"Solid rectangle height\" , \"type\" : \"integer\" }, \"sc\" : { \"title\" : \"Color\" , \"description\" : \"Solid fill color\" , \"$ref\" : \"#/$defs/values/hexcolor\" } }, \"required\" : [ \"ty\" , \"sw\" , \"sh\" , \"sc\" ] } ] }, \"image-layer\" : { \"type\" : \"object\" , \"title\" : \"Image Layer\" , \"description\" : \"Layer containing an image\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 2 }, \"refId\" : { \"title\" : \"Reference Id\" , \"description\" : \"ID of the image as specified in the assets\" , \"type\" : \"string\" } }, \"required\" : [ \"ty\" , \"refId\" ] } ] }, \"all-layers\" : { \"oneOf\" : [ { \"$ref\" : \"#/$defs/layers/precomposition-layer\" }, { \"$ref\" : \"#/$defs/layers/image-layer\" }, { \"$ref\" : \"#/$defs/layers/null-layer\" }, { \"$ref\" : \"#/$defs/layers/solid-layer\" }, { \"$ref\" : \"#/$defs/layers/shape-layer\" }, { \"$ref\" : \"#/$defs/layers/unknown-layer\" } ] }, \"precomposition-layer\" : { \"type\" : \"object\" , \"title\" : \"Precomposition Layer\" , \"description\" : \"Layer that renders a Precomposition asset\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 0 }, \"refId\" : { \"title\" : \"Reference Id\" , \"description\" : \"ID of the precomp as specified in the assets\" , \"type\" : \"string\" }, \"w\" : { \"title\" : \"Width\" , \"description\" : \"Width of the clipping rect\" , \"type\" : \"integer\" }, \"h\" : { \"title\" : \"Height\" , \"description\" : \"Height of the clipping rect\" , \"type\" : \"integer\" }, \"sr\" : { \"title\" : \"Time Stretch\" , \"type\" : \"number\" , \"default\" : 1 }, \"st\" : { \"title\" : \"Start Time\" , \"type\" : \"number\" , \"default\" : 0 }, \"tm\" : { \"title\" : \"Time Remap\" , \"description\" : \"Timeline remap function (frame index -> time in seconds)\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"ty\" , \"refId\" ] } ] }, \"null-layer\" : { \"type\" : \"object\" , \"title\" : \"Null Layer\" , \"description\" : \"Layer with no data, useful to group layers together\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 3 } }, \"required\" : [ \"ty\" ] } ] }, \"shape-layer\" : { \"type\" : \"object\" , \"title\" : \"Shape Layer\" , \"description\" : \"Layer containing Shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 4 }, \"shapes\" : { \"title\" : \"Shapes\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/shapes/all-graphic-elements\" } } }, \"required\" : [ \"ty\" , \"shapes\" ] } ] }, \"unknown-layer\" : { \"type\" : \"object\" , \"title\" : \"Unknown layer types\" , \"description\" : \"Unknown layer types. Types not defined by the specification are still allowed.\" , \"properties\" : { \"ty\" : { \"not\" : { \"$comment\" : \"enum list is dynamically generated\" , \"enum\" : [ 0 , 2 , 3 , 1 , 4 ] } } } }, \"visual-layer\" : { \"type\" : \"object\" , \"title\" : \"Visual Layer\" , \"description\" : \"Layer used to affect visual elements\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ks\" : { \"title\" : \"Transform\" , \"description\" : \"Layer transform\" , \"$ref\" : \"#/$defs/helpers/transform\" }, \"ao\" : { \"title\" : \"Auto Orient\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"default\" : 0 , \"description\" : \"If 1, the layer will rotate itself to match its animated position path\" }, \"tt\" : { \"title\" : \"Matte Mode\" , \"$ref\" : \"#/$defs/constants/matte-mode\" , \"description\" : \"Defines the track matte mode for the layer\" }, \"tp\" : { \"title\" : \"Matte Parent\" , \"type\" : \"integer\" , \"description\" : \"Index of the layer used as matte, if omitted assume the layer above the current one\" }, \"masksProperties\" : { \"title\" : \"Masks\" , \"description\" : \"Optional array of masks for the layer.\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/helpers/mask\" } } }, \"required\" : [ \"ks\" ] } ] }, \"layer\" : { \"type\" : \"object\" , \"title\" : \"Layer\" , \"description\" : \"Common properties for all layers\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"hd\" : { \"title\" : \"Hidden\" , \"description\" : \"Whether the layer is hidden\" , \"type\" : \"boolean\" }, \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer Type\" , \"type\" : \"integer\" }, \"ind\" : { \"title\" : \"Index\" , \"type\" : \"integer\" , \"description\" : \"Index that can be used for parenting and referenced in expressions\" }, \"parent\" : { \"title\" : \"Parent Index\" , \"description\" : \"Must be the ind property of another layer\" , \"type\" : \"integer\" }, \"ip\" : { \"title\" : \"In Point\" , \"description\" : \"Frame when the layer becomes visible\" , \"type\" : \"number\" }, \"op\" : { \"title\" : \"Out Point\" , \"description\" : \"Frame when the layer becomes invisible\" , \"type\" : \"number\" } }, \"required\" : [ \"ty\" , \"ip\" , \"op\" ] } ] } }, \"properties\" : { \"vector-property\" : { \"type\" : \"object\" , \"title\" : \"Vector Property\" , \"description\" : \"An animatable property that holds an array of numbers\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/vector\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/vector-keyframe\" } } } } ] }, \"vector-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Vector Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"$ref\" : \"#/$defs/values/vector\" } } } ], \"required\" : [ \"s\" ] }, \"gradient-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Gradient Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"$ref\" : \"#/$defs/values/gradient\" } } } ], \"required\" : [ \"s\" ] }, \"bezier-property\" : { \"type\" : \"object\" , \"title\" : \"Bezier Property\" , \"description\" : \"An animatable property that holds a Bezier shape\" , \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/bezier\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/bezier-keyframe\" } } } } ], \"required\" : [ \"a\" , \"k\" ] }, \"position-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Position Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/vector-keyframe\" }, { \"properties\" : { \"ti\" : { \"title\" : \"Value In Tangent\" , \"description\" : \"Tangent for values (eg: moving position around a curved path)\" , \"$ref\" : \"#/$defs/values/vector\" }, \"to\" : { \"title\" : \"Value Out Tangent\" , \"description\" : \"Tangent for values (eg: moving position around a curved path)\" , \"$ref\" : \"#/$defs/values/vector\" } } } ] }, \"color-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Color Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"$ref\" : \"#/$defs/values/color\" } } } ], \"required\" : [ \"s\" ] }, \"scalar-property\" : { \"type\" : \"object\" , \"title\" : \"Scalar Property\" , \"description\" : \"An animatable property that holds a float\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"type\" : \"number\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/vector-keyframe\" } } } } ] }, \"gradient-property\" : { \"type\" : \"object\" , \"title\" : \"Gradient Property\" , \"description\" : \"An animatable property that holds a Gradient\" , \"properties\" : { \"p\" : { \"title\" : \"Color stop count\" , \"type\" : \"number\" }, \"k\" : { \"type\" : \"object\" , \"title\" : \"Gradient stops\" , \"description\" : \"Animatable vector representing the gradient stops\" , \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/gradient\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/gradient-keyframe\" } } } } ], \"required\" : [ \"a\" , \"k\" ] } } }, \"easing-handle\" : { \"type\" : \"object\" , \"title\" : \"Keyframe Easing\" , \"description\" : \"Bezier handle for keyframe interpolation\" , \"properties\" : { \"x\" : { \"title\" : \"X\" , \"description\" : \"Time component:\\n0 means start time of the keyframe,\\n1 means time of the next keyframe.\" , \"oneOf\" : [ { \"type\" : \"array\" , \"$ref\" : \"#/$defs/values/vector\" , \"items\" : { \"type\" : \"number\" , \"default\" : 0 , \"minimum\" : 0 , \"maximum\" : 1 }, \"minItems\" : 1 }, { \"type\" : \"number\" , \"default\" : 0 , \"minimum\" : 0 , \"maximum\" : 1 } ] }, \"y\" : { \"title\" : \"Y\" , \"description\" : \"Value interpolation component:\\n0 means start value of the keyframe,\\n1 means value at the next keyframe.\" , \"oneOf\" : [ { \"type\" : \"array\" , \"$ref\" : \"#/$defs/values/vector\" , \"items\" : { \"type\" : \"number\" , \"default\" : 0 }, \"minItems\" : 1 }, { \"type\" : \"number\" , \"default\" : 0 } ] } }, \"required\" : [ \"x\" , \"y\" ] }, \"base-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Base Keyframe\" , \"description\" : \"A Keyframes specifies the value at a specific time and the interpolation function to reach the next keyframe.\" , \"allOf\" : [ { \"properties\" : { \"t\" : { \"title\" : \"Time\" , \"description\" : \"Frame number\" , \"type\" : \"number\" , \"default\" : 0 }, \"h\" : { \"title\" : \"Hold\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"default\" : 0 }, \"i\" : { \"title\" : \"In Tangent\" , \"description\" : \"Easing tangent going into the next keyframe\" , \"$ref\" : \"#/$defs/properties/easing-handle\" }, \"o\" : { \"title\" : \"Out Tangent\" , \"description\" : \"Easing tangent leaving the current keyframe\" , \"$ref\" : \"#/$defs/properties/easing-handle\" } } } ], \"required\" : [ \"t\" ] }, \"split-position\" : { \"type\" : \"object\" , \"title\" : \"Split Position\" , \"description\" : \"An animatable position where x and y are definied and animated separately.\" , \"properties\" : { \"s\" : { \"title\" : \"Split\" , \"description\" : \"Whether the position has split values\" , \"type\" : \"boolean\" , \"const\" : true }, \"x\" : { \"title\" : \"X Position\" , \"description\" : \"X Position\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"y\" : { \"title\" : \"Y Position\" , \"description\" : \"Y Position\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"s\" , \"x\" , \"y\" ] }, \"bezier-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Shape Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/values/bezier\" }, \"minItems\" : 1 , \"maxItems\" : 1 } } } ], \"required\" : [ \"s\" ] }, \"position-property\" : { \"type\" : \"object\" , \"title\" : \"Position Property\" , \"description\" : \"An animatable property to represent a position in space\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/vector\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/position-keyframe\" } } } } ], \"required\" : [ \"a\" , \"k\" ] }, \"color-property\" : { \"type\" : \"object\" , \"title\" : \"Color Property\" , \"description\" : \"An animatable property that holds a Color\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/color\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/color-keyframe\" } } } } ] }, \"splittable-position-property\" : { \"type\" : \"object\" , \"title\" : \"Splittable Position Property\" , \"description\" : \"An animatable position where position values may be defined and animated separately.\" , \"oneOf\" : [ { \"$comment\" : \"Grouped XY position coordinates\" , \"$ref\" : \"#/$defs/properties/position-property\" , \"properties\" : { \"s\" : { \"title\" : \"Split\" , \"description\" : \"Whether the position has split values\" , \"type\" : \"boolean\" , \"const\" : false } } }, { \"$comment\" : \"Split XY position coordinates\" , \"$ref\" : \"#/$defs/properties/split-position\" } ] } }, \"shapes\" : { \"all-graphic-elements\" : { \"$comment\" : \"List of valid shapes\" , \"oneOf\" : [ { \"$ref\" : \"#/$defs/shapes/ellipse\" }, { \"$ref\" : \"#/$defs/shapes/fill\" }, { \"$ref\" : \"#/$defs/shapes/gradient-fill\" }, { \"$ref\" : \"#/$defs/shapes/gradient-stroke\" }, { \"$ref\" : \"#/$defs/shapes/group\" }, { \"$ref\" : \"#/$defs/shapes/path\" }, { \"$ref\" : \"#/$defs/shapes/polystar\" }, { \"$ref\" : \"#/$defs/shapes/rectangle\" }, { \"$ref\" : \"#/$defs/shapes/stroke\" }, { \"$ref\" : \"#/$defs/shapes/transform\" }, { \"$ref\" : \"#/$defs/shapes/trim-path\" }, { \"$ref\" : \"#/$defs/shapes/unknown-shape\" } ] }, \"polystar\" : { \"type\" : \"object\" , \"title\" : \"PolyStar\" , \"description\" : \"Star or regular polygon\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"sr\" }, \"p\" : { \"title\" : \"Position\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"or\" : { \"title\" : \"Outer Radius\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"os\" : { \"title\" : \"Outer Roundness\" , \"description\" : \"Outer Roundness as a percentage\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"r\" : { \"title\" : \"Rotation\" , \"description\" : \"Rotation, clockwise in degrees\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"pt\" : { \"title\" : \"Points\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"sy\" : { \"title\" : \"Star Type\" , \"$ref\" : \"#/$defs/constants/star-type\" , \"default\" : 1 }, \"ir\" : { \"title\" : \"Inner Radius\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"is\" : { \"title\" : \"Inner Roundness\" , \"description\" : \"Inner Roundness as a percentage\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"ty\" , \"or\" , \"os\" , \"pt\" , \"p\" , \"r\" ] }, { \"if\" : { \"properties\" : { \"sy\" : { \"const\" : 1 } } }, \"then\" : { \"required\" : [ \"ir\" , \"is\" ] } } ] }, \"group\" : { \"type\" : \"object\" , \"title\" : \"Group\" , \"description\" : \"Shape Element that can contain other shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"gr\" }, \"np\" : { \"title\" : \"Number Of Properties\" , \"type\" : \"number\" }, \"it\" : { \"title\" : \"Shapes\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/shapes/all-graphic-elements\" } } }, \"required\" : [ \"ty\" ] } ] }, \"path\" : { \"type\" : \"object\" , \"title\" : \"Path\" , \"description\" : \"Custom Bezier shape\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"sh\" }, \"ks\" : { \"title\" : \"Shape\" , \"description\" : \"Bezier path\" , \"$ref\" : \"#/$defs/properties/bezier-property\" } }, \"required\" : [ \"ty\" , \"ks\" ] } ] }, \"shape-style\" : { \"type\" : \"object\" , \"title\" : \"Shape Style\" , \"description\" : \"Describes the visual appearance (like fill and stroke) of neighbouring shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"type\" : \"object\" , \"properties\" : { \"o\" : { \"title\" : \"Opacity\" , \"description\" : \"Opacity, 100 means fully opaque\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"o\" ] } ] }, \"shape\" : { \"type\" : \"object\" , \"title\" : \"Shape\" , \"description\" : \"Drawable shape, defines the actual shape but not the style\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"type\" : \"object\" , \"properties\" : { \"d\" : { \"title\" : \"Direction\" , \"description\" : \"Direction the shape is drawn as, mostly relevant when using trim path\" , \"$ref\" : \"#/$defs/constants/shape-direction\" } } } ] }, \"fill\" : { \"type\" : \"object\" , \"title\" : \"Fill\" , \"description\" : \"Solid fill color\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"fl\" }, \"c\" : { \"title\" : \"Color\" , \"$ref\" : \"#/$defs/properties/color-property\" }, \"r\" : { \"title\" : \"Fill Rule\" , \"$ref\" : \"#/$defs/constants/fill-rule\" } }, \"required\" : [ \"ty\" , \"c\" ] } ] }, \"gradient-stroke\" : { \"type\" : \"object\" , \"title\" : \"Gradient Stroke\" , \"description\" : \"Gradient stroke\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"$ref\" : \"#/$defs/shapes/base-stroke\" }, { \"$ref\" : \"#/$defs/shapes/base-gradient\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"gs\" } }, \"required\" : [ \"ty\" ] } ] }, \"trim-path\" : { \"type\" : \"object\" , \"title\" : \"Trim Path\" , \"description\" : \"Trims shapes into a segment\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/modifier\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"tm\" }, \"s\" : { \"title\" : \"Start\" , \"description\" : \"Segment start\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"e\" : { \"title\" : \"End\" , \"description\" : \"Segment end\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"o\" : { \"title\" : \"Offset\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"m\" : { \"title\" : \"Multiple\" , \"description\" : \"How to treat multiple copies\" , \"$ref\" : \"#/$defs/constants/trim-multiple-shapes\" } }, \"required\" : [ \"ty\" , \"o\" , \"s\" , \"e\" ] } ] }, \"transform\" : { \"type\" : \"object\" , \"title\" : \"Transform Shape\" , \"description\" : \"Group transform\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"$ref\" : \"#/$defs/helpers/transform\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"tr\" } }, \"required\" : [ \"ty\" ] } ] }, \"rectangle\" : { \"type\" : \"object\" , \"title\" : \"Rectangle\" , \"description\" : \"A simple rectangle shape\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"rc\" }, \"p\" : { \"title\" : \"Position\" , \"description\" : \"Center of the rectangle\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"s\" : { \"title\" : \"Size\" , \"$ref\" : \"#/$defs/properties/vector-property\" }, \"r\" : { \"title\" : \"Rounded\" , \"description\" : \"Rounded corners radius\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"ty\" , \"s\" , \"p\" ] } ] }, \"base-gradient\" : { \"type\" : \"object\" , \"title\" : \"Base Gradient\" , \"description\" : \"Common properties for gradients\" , \"allOf\" : [ { \"type\" : \"object\" , \"properties\" : { \"g\" : { \"title\" : \"Colors\" , \"description\" : \"Gradient colors\" , \"$ref\" : \"#/$defs/properties/gradient-property\" }, \"s\" : { \"title\" : \"Start Point\" , \"description\" : \"Starting point for the gradient\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"e\" : { \"title\" : \"End Point\" , \"description\" : \"End point for the gradient\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"t\" : { \"title\" : \"Gradient Type\" , \"description\" : \"Type of the gradient\" , \"$ref\" : \"#/$defs/constants/gradient-type\" }, \"h\" : { \"title\" : \"Highlight Length\" , \"description\" : \"Highlight Length, as a percentage between s and e \" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"a\" : { \"title\" : \"Highlight Angle\" , \"description\" : \"Highlight Angle in clockwise degrees, relative to the direction from s to e \" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"s\" , \"e\" , \"g\" , \"t\" ] } ] }, \"graphic-element\" : { \"type\" : \"object\" , \"title\" : \"Graphic Element\" , \"description\" : \"Element used to display vector data in a shape layer\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"hd\" : { \"title\" : \"Hidden\" , \"description\" : \"Whether the shape is hidden\" , \"type\" : \"boolean\" }, \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" } }, \"required\" : [ \"ty\" ] } ] }, \"stroke-dash\" : { \"type\" : \"object\" , \"title\" : \"Stroke Dash\" , \"description\" : \"An item used to described the dash pattern in a stroked path\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"n\" : { \"title\" : \"Dash Type\" , \"$ref\" : \"#/$defs/constants/stroke-dash-type\" , \"default\" : \"d\" }, \"v\" : { \"title\" : \"Length\" , \"description\" : \"Length of the dash\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [] } ] }, \"gradient-fill\" : { \"type\" : \"object\" , \"title\" : \"Gradient\" , \"description\" : \"Gradient fill color\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"$ref\" : \"#/$defs/shapes/base-gradient\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"gf\" }, \"r\" : { \"title\" : \"Fill Rule\" , \"$ref\" : \"#/$defs/constants/fill-rule\" } }, \"required\" : [ \"ty\" ] } ] }, \"base-stroke\" : { \"type\" : \"object\" , \"title\" : \"Base Stroke\" , \"description\" : \"Common properties for stroke styles\" , \"allOf\" : [ { \"type\" : \"object\" , \"properties\" : { \"lc\" : { \"title\" : \"Line Cap\" , \"$ref\" : \"#/$defs/constants/line-cap\" , \"default\" : 2 }, \"lj\" : { \"title\" : \"Line Join\" , \"$ref\" : \"#/$defs/constants/line-join\" , \"default\" : 2 }, \"ml\" : { \"title\" : \"Miter Limit\" , \"type\" : \"number\" , \"default\" : 0 }, \"ml2\" : { \"title\" : \"Miter Limit\" , \"description\" : \"Animatable alternative to ml\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"w\" : { \"title\" : \"Width\" , \"description\" : \"Stroke width\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"d\" : { \"title\" : \"Dashes\" , \"description\" : \"Dashed line definition\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/shapes/stroke-dash\" } } }, \"required\" : [ \"w\" ] } ] }, \"unknown-shape\" : { \"type\" : \"object\" , \"title\" : \"Unknown shape types\" , \"description\" : \"Unknown shape types. Types not defined by the specification are still allowed.\" , \"properties\" : { \"ty\" : { \"not\" : { \"$comment\" : \"enum list is dynamically generated\" , \"enum\" : [ \"el\" , \"fl\" , \"gf\" , \"gs\" , \"gr\" , \"sh\" , \"sr\" , \"rc\" , \"st\" , \"tr\" , \"tm\" ] } } } }, \"ellipse\" : { \"type\" : \"object\" , \"title\" : \"Ellipse\" , \"description\" : \"Ellipse shape\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"el\" }, \"p\" : { \"title\" : \"Position\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"s\" : { \"title\" : \"Size\" , \"$ref\" : \"#/$defs/properties/vector-property\" } }, \"required\" : [ \"ty\" , \"s\" , \"p\" ] } ] }, \"modifier\" : { \"type\" : \"object\" , \"title\" : \"Modifier\" , \"description\" : \"Modifiers change the bezier curves of neighbouring shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" } ] }, \"stroke\" : { \"type\" : \"object\" , \"title\" : \"Stroke\" , \"description\" : \"Solid stroke\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"$ref\" : \"#/$defs/shapes/base-stroke\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"st\" }, \"c\" : { \"title\" : \"Color\" , \"description\" : \"Stroke color\" , \"$ref\" : \"#/$defs/properties/color-property\" } }, \"required\" : [ \"ty\" , \"c\" ] } ] } }, \"values\" : { \"hexcolor\" : { \"type\" : \"string\" , \"title\" : \"Hex Color\" , \"description\" : \"Color value in hexadecimal format, with two digits per component ('#RRGGBB')\" , \"pattern\" : \"^#([a-fA-F0-9]{6})$\" , \"examples\" : [ \"#FF00AA\" ] }, \"bezier\" : { \"type\" : \"object\" , \"title\" : \"Bezier\" , \"description\" : \"Cubic polybezier\" , \"properties\" : { \"c\" : { \"title\" : \"Closed\" , \"type\" : \"boolean\" , \"default\" : false }, \"i\" : { \"title\" : \"In Tangents\" , \"type\" : \"array\" , \"description\" : \"Array of points, each point is an array of coordinates.\\nThese points are along the in tangents relative to the corresponding v .\" , \"items\" : { \"$ref\" : \"#/$defs/values/vector\" , \"default\" : [] } }, \"o\" : { \"title\" : \"Out Tangents\" , \"type\" : \"array\" , \"description\" : \"Array of points, each point is an array of coordinates.\\nThese points are along the out tangents relative to the corresponding v .\" , \"items\" : { \"$ref\" : \"#/$defs/values/vector\" , \"default\" : [] } }, \"v\" : { \"title\" : \"Vertices\" , \"description\" : \"Array of points, each point is an array of coordinates.\\nThese points are along the bezier path\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/values/vector\" , \"default\" : [] } } }, \"required\" : [ \"i\" , \"v\" , \"o\" ] }, \"data-url\" : { \"type\" : \"string\" , \"title\" : \"Data URL\" , \"description\" : \"An embedded data object\" , \"pattern\" : \"^data:([\\w/]+)(;base64)?,(.+)$\" }, \"color\" : { \"type\" : \"array\" , \"title\" : \"Color\" , \"description\" : \"Color as a [r, g, b] array with values in [0, 1]\" , \"items\" : { \"type\" : \"number\" , \"minimum\" : 0 , \"maximum\" : 1 }, \"minItems\" : 3 , \"maxItems\" : 4 }, \"int-boolean\" : { \"type\" : \"integer\" , \"title\" : \"Integer Boolean\" , \"description\" : \"Represents boolean values as an integer. 0 is false, 1 is true.\" , \"default\" : 0 , \"examples\" : [ 0 ], \"enum\" : [ 0 , 1 ], \"oneOf\" : [ { \"title\" : \"True\" , \"const\" : 1 }, { \"title\" : \"False\" , \"const\" : 0 } ] }, \"vector\" : { \"type\" : \"array\" , \"title\" : \"Vector\" , \"description\" : \"An array of numbers\" , \"items\" : { \"type\" : \"number\" } }, \"gradient\" : { \"type\" : \"array\" , \"title\" : \"Gradient\" , \"description\" : \"A flat list of color stops followed by optional transparency stops. A color stop is [offset, red, green, blue]. A transparency stop is [offset, transparency]. All values are between 0 and 1\" , \"items\" : { \"type\" : \"number\" , \"minimum\" : 0 , \"maximum\" : 1 } } } } }","title":"JSON Schema"},{"location":"specs/schema/#json-schema","text":"This page shows a formatted version of the JSON schema, you can click on highlighted objects to get a link to that section of the schema. You can also click on $ref values to jump to the relevant section. If you want you can also view the raw schema file . { \"$schema\" : \"https://json-schema.org/draft/2020-12/schema\" , \"$id\" : \"https://lottie.github.io/lottie-spec/specs/schema/0.1.0\" , \"$ref\" : \"#/$defs/composition/animation\" , \"$version\" : 100 , \"$defs\" : { \"assets\" : { \"precomposition\" : { \"type\" : \"object\" , \"title\" : \"Precomposition\" , \"description\" : \"Asset containing a composition that can be referenced by layers.\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/assets/asset\" }, { \"$ref\" : \"#/$defs/composition/composition\" } ] }, \"asset\" : { \"type\" : \"object\" , \"title\" : \"Asset\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"id\" : { \"title\" : \"ID\" , \"description\" : \"Unique identifier used by layers when referencing this asset\" , \"type\" : \"string\" } }, \"required\" : [ \"id\" ] } ] }, \"image\" : { \"type\" : \"object\" , \"title\" : \"Image\" , \"description\" : \"Asset containing an image that can be referenced by layers.\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/assets/asset\" }, { \"$ref\" : \"#/$defs/helpers/slottable-object\" }, { \"type\" : \"object\" , \"properties\" : { \"w\" : { \"title\" : \"Width\" , \"description\" : \"Width of the image\" , \"type\" : \"number\" }, \"h\" : { \"title\" : \"Height\" , \"description\" : \"Height of the image\" , \"type\" : \"number\" }, \"p\" : { \"title\" : \"File Name\" , \"description\" : \"Name of the image file or a data url\" , \"type\" : \"string\" }, \"u\" : { \"title\" : \"File Path\" , \"description\" : \"Path to the image file\" , \"type\" : \"string\" }, \"e\" : { \"title\" : \"Embedded\" , \"description\" : \"If '1', 'p' is a Data URL\" , \"$ref\" : \"#/$defs/values/int-boolean\" } }, \"allOf\" : [ { \"if\" : { \"properties\" : { \"e\" : { \"const\" : 1 } }, \"required\" : [ \"e\" ] }, \"then\" : { \"properties\" : { \"p\" : { \"$ref\" : \"#/$defs/values/data-url\" } } } } ], \"if\" : { \"required\" : [ \"sid\" ] }, \"else\" : { \"required\" : [ \"w\" , \"h\" , \"p\" ] } } ] }, \"all-assets\" : { \"oneOf\" : [ { \"$ref\" : \"#/$defs/assets/precomposition\" }, { \"$ref\" : \"#/$defs/assets/image\" } ] } }, \"composition\" : { \"animation\" : { \"type\" : \"object\" , \"title\" : \"Animation\" , \"description\" : \"Top level object, describing the animation\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"ver\" : { \"title\" : \"Specification Version\" , \"description\" : \"Specification version this Lottie is targeting. This is a 6 digit number with version components encoded as MMmmpp , with MM being major version, mm being minor and pp being patch.\" , \"type\" : \"integer\" , \"minimum\" : 100 }, \"fr\" : { \"title\" : \"Framerate\" , \"description\" : \"Framerate in frames per second\" , \"type\" : \"number\" , \"exclusiveMinimum\" : 0 }, \"ip\" : { \"title\" : \"In Point\" , \"description\" : \"Frame the animation starts at (usually 0)\" , \"type\" : \"number\" }, \"op\" : { \"title\" : \"Out Point\" , \"description\" : \"Frame the animation stops/loops at, which makes this the duration in frames when ip is 0\" , \"type\" : \"number\" }, \"w\" : { \"title\" : \"Width\" , \"description\" : \"Width of the animation\" , \"type\" : \"integer\" , \"minimum\" : 0 }, \"h\" : { \"title\" : \"Height\" , \"description\" : \"Height of the animation\" , \"type\" : \"integer\" , \"minimum\" : 0 }, \"assets\" : { \"title\" : \"Assets\" , \"type\" : \"array\" , \"description\" : \"List of assets that can be referenced by layers\" , \"items\" : { \"$ref\" : \"#/$defs/assets/all-assets\" } }, \"markers\" : { \"title\" : \"Markers\" , \"description\" : \"Markers defining named sections of the composition.\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/helpers/marker\" } }, \"slots\" : { \"title\" : \"Slots\" , \"description\" : \"Dictionary of slot ids that will replace matching properties.\" , \"type\" : \"object\" , \"additionalProperties\" : { \"$ref\" : \"#/$defs/helpers/slot\" } } }, \"required\" : [ \"w\" , \"h\" , \"fr\" , \"op\" , \"ip\" ] }, { \"$ref\" : \"#/$defs/composition/composition\" } ] }, \"composition\" : { \"type\" : \"object\" , \"title\" : \"Composition\" , \"description\" : \"An object that contains a list of layers\" , \"properties\" : { \"layers\" : { \"title\" : \"Layers\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/layers/all-layers\" } } }, \"required\" : [ \"layers\" ] } }, \"constants\" : { \"gradient-type\" : { \"type\" : \"integer\" , \"title\" : \"Gradient Type\" , \"description\" : \"Whether a Gradient is a linear or radial.\" , \"oneOf\" : [ { \"title\" : \"Linear\" , \"description\" : \"Colors transition in a single linear direction.\" , \"const\" : 1 }, { \"title\" : \"Radial\" , \"description\" : \"Colors transition outward from a center point.\" , \"const\" : 2 } ] }, \"line-cap\" : { \"type\" : \"integer\" , \"title\" : \"Line Cap\" , \"description\" : \"Style at the end of a stoked line\" , \"oneOf\" : [ { \"title\" : \"Butt\" , \"const\" : 1 }, { \"title\" : \"Round\" , \"const\" : 2 }, { \"title\" : \"Square\" , \"const\" : 3 } ] }, \"fill-rule\" : { \"type\" : \"integer\" , \"title\" : \"Fill Rule\" , \"description\" : \"Rule used to handle multiple shapes rendered with the same fill object\" , \"oneOf\" : [ { \"title\" : \"Non Zero\" , \"description\" : \"Everything is colored (You can think of this as an OR)\" , \"const\" : 1 }, { \"title\" : \"Even Odd\" , \"description\" : \"Colored based on intersections and path direction, can be used to create \\\"holes\\\"\" , \"const\" : 2 } ] }, \"matte-mode\" : { \"type\" : \"integer\" , \"title\" : \"Matte Mode\" , \"description\" : \"How a layer should mask another layer\" , \"oneOf\" : [ { \"title\" : \"Normal\" , \"description\" : \"The layer is not used as a track matte\" , \"const\" : 0 }, { \"title\" : \"Alpha\" , \"description\" : \"The masked layer opacity is modulated by the track matte layer opacity\" , \"const\" : 1 }, { \"title\" : \"Inverted Alpha\" , \"description\" : \"The masked layer opacity is modulated by the inverted track matte layer opacity\" , \"const\" : 2 }, { \"title\" : \"Luma\" , \"description\" : \"The masked layer opacity is modulated by the track matte layer luminance\" , \"const\" : 3 }, { \"title\" : \"Inverted Luma\" , \"description\" : \"The masked layer opacity is modulated by the inverted track matte layer luminance\" , \"const\" : 4 } ] }, \"star-type\" : { \"type\" : \"integer\" , \"title\" : \"Star Type\" , \"description\" : \"Whether a PolyStar is a star or a polygon\" , \"oneOf\" : [ { \"title\" : \"Star\" , \"const\" : 1 }, { \"title\" : \"Polygon\" , \"const\" : 2 } ] }, \"trim-multiple-shapes\" : { \"type\" : \"integer\" , \"title\" : \"Trim Multiple Shapes\" , \"description\" : \"How to handle multiple shapes in trim path\" , \"oneOf\" : [ { \"title\" : \"Parallel\" , \"description\" : \"All shapes apply the trim at the same time\" , \"const\" : 1 }, { \"title\" : \"Sequential\" , \"description\" : \"Shapes are considered as a continuous sequence\" , \"const\" : 2 } ] }, \"mask-mode\" : { \"type\" : \"string\" , \"title\" : \"Mask Mode\" , \"description\" : \"Describes how a mask interacts (blends) with the preceding masks in the stack.\" , \"oneOf\" : [ { \"title\" : \"None\" , \"const\" : \"n\" , \"description\" : \"The mask is ignored.\" }, { \"title\" : \"Add\" , \"const\" : \"a\" , \"description\" : \"Mask coverage is added (Normal blending).\" }, { \"title\" : \"Subtract\" , \"const\" : \"s\" , \"description\" : \"Mask coverage is subtracted (Subtract blending).\" }, { \"title\" : \"Intersect\" , \"const\" : \"i\" , \"description\" : \"Mask coverage is intersected (Source-In blending).\" } ] }, \"line-join\" : { \"type\" : \"integer\" , \"title\" : \"Line Join\" , \"description\" : \"Style at a sharp corner of a stoked line\" , \"oneOf\" : [ { \"title\" : \"Miter\" , \"const\" : 1 }, { \"title\" : \"Round\" , \"const\" : 2 }, { \"title\" : \"Bevel\" , \"const\" : 3 } ] }, \"shape-direction\" : { \"type\" : \"integer\" , \"title\" : \"Shape Direction\" , \"description\" : \"Drawing direction of the shape curve, useful for trim path\" , \"oneOf\" : [ { \"title\" : \"Normal\" , \"description\" : \"Usually clockwise\" , \"const\" : 1 }, { \"title\" : \"Reversed\" , \"description\" : \"Usually counter clockwise\" , \"const\" : 3 } ] }, \"stroke-dash-type\" : { \"type\" : \"string\" , \"title\" : \"Stroke Dash Type\" , \"description\" : \"Type of a dash item in a stroked line\" , \"oneOf\" : [ { \"title\" : \"Dash\" , \"const\" : \"d\" }, { \"title\" : \"Gap\" , \"const\" : \"g\" }, { \"title\" : \"Offset\" , \"const\" : \"o\" } ] } }, \"helpers\" : { \"marker\" : { \"type\" : \"object\" , \"title\" : \"Marker\" , \"description\" : \"Defines named portions of the composition.\" , \"properties\" : { \"cm\" : { \"title\" : \"Comment\" , \"type\" : \"string\" }, \"tm\" : { \"title\" : \"Time\" , \"type\" : \"number\" }, \"dr\" : { \"title\" : \"Duration\" , \"type\" : \"number\" } } }, \"slottable-object\" : { \"type\" : \"object\" , \"title\" : \"Slottable Object\" , \"description\" : \"Object that may have its value replaced with a slot value\" , \"properties\" : { \"sid\" : { \"title\" : \"Slot Id\" , \"description\" : \"Identifier to look up the slot\" , \"type\" : \"string\" } } }, \"transform\" : { \"type\" : \"object\" , \"title\" : \"Transform\" , \"description\" : \"Layer transform\" , \"allOf\" : [ { \"properties\" : { \"a\" : { \"title\" : \"Anchor Point\" , \"description\" : \"Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale)\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"p\" : { \"title\" : \"Position\" , \"description\" : \"Position / Translation\" , \"$ref\" : \"#/$defs/properties/splittable-position-property\" }, \"r\" : { \"title\" : \"Rotation\" , \"description\" : \"Rotation in degrees, clockwise\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"s\" : { \"title\" : \"Scale\" , \"description\" : \"Scale factor, [100, 100] for no scaling\" , \"$ref\" : \"#/$defs/properties/vector-property\" }, \"o\" : { \"title\" : \"Opacity\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"sk\" : { \"title\" : \"Skew\" , \"description\" : \"Skew amount as an angle in degrees\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"sa\" : { \"title\" : \"Skew Axis\" , \"description\" : \"Direction along which skew is applied, in degrees ( 0 skews along the X axis, 90 along the Y axis)\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } } } ] }, \"mask\" : { \"type\" : \"object\" , \"title\" : \"Mask\" , \"description\" : \"Mask for layer content.\" , \"allOf\" : [ { \"properties\" : { \"mode\" : { \"title\" : \"Mode\" , \"$ref\" : \"#/$defs/constants/mask-mode\" , \"default\" : \"i\" }, \"o\" : { \"title\" : \"Opacity\" , \"description\" : \"Mask opacity, as a percentage [0..100].\" , \"$ref\" : \"#/$defs/properties/scalar-property\" , \"default\" : 100 }, \"pt\" : { \"title\" : \"Shape\" , \"description\" : \"Mask shape\" , \"$ref\" : \"#/$defs/properties/bezier-property\" } }, \"required\" : [ \"pt\" ] } ] }, \"slot\" : { \"type\" : \"object\" , \"title\" : \"Slot\" , \"description\" : \"Defines a property value that will be set to all matched properties\" , \"properties\" : { \"p\" : { \"title\" : \"Property Value\" , \"description\" : \"Property Value\" } }, \"required\" : [ \"p\" ] }, \"slottable-property\" : { \"type\" : \"object\" , \"title\" : \"Slottable Property\" , \"description\" : \"Property that may have its value replaced with a slot value\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-object\" } ], \"if\" : { \"required\" : [ \"sid\" ] }, \"else\" : { \"required\" : [ \"a\" , \"k\" ] } }, \"visual-object\" : { \"type\" : \"object\" , \"title\" : \"Visual Object\" , \"description\" : \"\" , \"allOf\" : [ { \"type\" : \"object\" , \"properties\" : { \"nm\" : { \"title\" : \"Name\" , \"description\" : \"Human readable name, as seen from editors and the like\" , \"type\" : \"string\" } }, \"required\" : [] } ] } }, \"layers\" : { \"solid-layer\" : { \"type\" : \"object\" , \"title\" : \"Solid Layer\" , \"description\" : \"Solid color, rectangle-shaped layer\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 1 }, \"sw\" : { \"title\" : \"Width\" , \"description\" : \"Solid rectangle width\" , \"type\" : \"integer\" }, \"sh\" : { \"title\" : \"Height\" , \"description\" : \"Solid rectangle height\" , \"type\" : \"integer\" }, \"sc\" : { \"title\" : \"Color\" , \"description\" : \"Solid fill color\" , \"$ref\" : \"#/$defs/values/hexcolor\" } }, \"required\" : [ \"ty\" , \"sw\" , \"sh\" , \"sc\" ] } ] }, \"image-layer\" : { \"type\" : \"object\" , \"title\" : \"Image Layer\" , \"description\" : \"Layer containing an image\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 2 }, \"refId\" : { \"title\" : \"Reference Id\" , \"description\" : \"ID of the image as specified in the assets\" , \"type\" : \"string\" } }, \"required\" : [ \"ty\" , \"refId\" ] } ] }, \"all-layers\" : { \"oneOf\" : [ { \"$ref\" : \"#/$defs/layers/precomposition-layer\" }, { \"$ref\" : \"#/$defs/layers/image-layer\" }, { \"$ref\" : \"#/$defs/layers/null-layer\" }, { \"$ref\" : \"#/$defs/layers/solid-layer\" }, { \"$ref\" : \"#/$defs/layers/shape-layer\" }, { \"$ref\" : \"#/$defs/layers/unknown-layer\" } ] }, \"precomposition-layer\" : { \"type\" : \"object\" , \"title\" : \"Precomposition Layer\" , \"description\" : \"Layer that renders a Precomposition asset\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 0 }, \"refId\" : { \"title\" : \"Reference Id\" , \"description\" : \"ID of the precomp as specified in the assets\" , \"type\" : \"string\" }, \"w\" : { \"title\" : \"Width\" , \"description\" : \"Width of the clipping rect\" , \"type\" : \"integer\" }, \"h\" : { \"title\" : \"Height\" , \"description\" : \"Height of the clipping rect\" , \"type\" : \"integer\" }, \"sr\" : { \"title\" : \"Time Stretch\" , \"type\" : \"number\" , \"default\" : 1 }, \"st\" : { \"title\" : \"Start Time\" , \"type\" : \"number\" , \"default\" : 0 }, \"tm\" : { \"title\" : \"Time Remap\" , \"description\" : \"Timeline remap function (frame index -> time in seconds)\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"ty\" , \"refId\" ] } ] }, \"null-layer\" : { \"type\" : \"object\" , \"title\" : \"Null Layer\" , \"description\" : \"Layer with no data, useful to group layers together\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 3 } }, \"required\" : [ \"ty\" ] } ] }, \"shape-layer\" : { \"type\" : \"object\" , \"title\" : \"Shape Layer\" , \"description\" : \"Layer containing Shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 4 }, \"shapes\" : { \"title\" : \"Shapes\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/shapes/all-graphic-elements\" } } }, \"required\" : [ \"ty\" , \"shapes\" ] } ] }, \"unknown-layer\" : { \"type\" : \"object\" , \"title\" : \"Unknown layer types\" , \"description\" : \"Unknown layer types. Types not defined by the specification are still allowed.\" , \"properties\" : { \"ty\" : { \"not\" : { \"$comment\" : \"enum list is dynamically generated\" , \"enum\" : [ 0 , 2 , 3 , 1 , 4 ] } } } }, \"visual-layer\" : { \"type\" : \"object\" , \"title\" : \"Visual Layer\" , \"description\" : \"Layer used to affect visual elements\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ks\" : { \"title\" : \"Transform\" , \"description\" : \"Layer transform\" , \"$ref\" : \"#/$defs/helpers/transform\" }, \"ao\" : { \"title\" : \"Auto Orient\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"default\" : 0 , \"description\" : \"If 1, the layer will rotate itself to match its animated position path\" }, \"tt\" : { \"title\" : \"Matte Mode\" , \"$ref\" : \"#/$defs/constants/matte-mode\" , \"description\" : \"Defines the track matte mode for the layer\" }, \"tp\" : { \"title\" : \"Matte Parent\" , \"type\" : \"integer\" , \"description\" : \"Index of the layer used as matte, if omitted assume the layer above the current one\" }, \"masksProperties\" : { \"title\" : \"Masks\" , \"description\" : \"Optional array of masks for the layer.\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/helpers/mask\" } } }, \"required\" : [ \"ks\" ] } ] }, \"layer\" : { \"type\" : \"object\" , \"title\" : \"Layer\" , \"description\" : \"Common properties for all layers\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"hd\" : { \"title\" : \"Hidden\" , \"description\" : \"Whether the layer is hidden\" , \"type\" : \"boolean\" }, \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer Type\" , \"type\" : \"integer\" }, \"ind\" : { \"title\" : \"Index\" , \"type\" : \"integer\" , \"description\" : \"Index that can be used for parenting and referenced in expressions\" }, \"parent\" : { \"title\" : \"Parent Index\" , \"description\" : \"Must be the ind property of another layer\" , \"type\" : \"integer\" }, \"ip\" : { \"title\" : \"In Point\" , \"description\" : \"Frame when the layer becomes visible\" , \"type\" : \"number\" }, \"op\" : { \"title\" : \"Out Point\" , \"description\" : \"Frame when the layer becomes invisible\" , \"type\" : \"number\" } }, \"required\" : [ \"ty\" , \"ip\" , \"op\" ] } ] } }, \"properties\" : { \"vector-property\" : { \"type\" : \"object\" , \"title\" : \"Vector Property\" , \"description\" : \"An animatable property that holds an array of numbers\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/vector\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/vector-keyframe\" } } } } ] }, \"vector-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Vector Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"$ref\" : \"#/$defs/values/vector\" } } } ], \"required\" : [ \"s\" ] }, \"gradient-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Gradient Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"$ref\" : \"#/$defs/values/gradient\" } } } ], \"required\" : [ \"s\" ] }, \"bezier-property\" : { \"type\" : \"object\" , \"title\" : \"Bezier Property\" , \"description\" : \"An animatable property that holds a Bezier shape\" , \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/bezier\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/bezier-keyframe\" } } } } ], \"required\" : [ \"a\" , \"k\" ] }, \"position-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Position Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/vector-keyframe\" }, { \"properties\" : { \"ti\" : { \"title\" : \"Value In Tangent\" , \"description\" : \"Tangent for values (eg: moving position around a curved path)\" , \"$ref\" : \"#/$defs/values/vector\" }, \"to\" : { \"title\" : \"Value Out Tangent\" , \"description\" : \"Tangent for values (eg: moving position around a curved path)\" , \"$ref\" : \"#/$defs/values/vector\" } } } ] }, \"color-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Color Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"$ref\" : \"#/$defs/values/color\" } } } ], \"required\" : [ \"s\" ] }, \"scalar-property\" : { \"type\" : \"object\" , \"title\" : \"Scalar Property\" , \"description\" : \"An animatable property that holds a float\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"type\" : \"number\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/vector-keyframe\" } } } } ] }, \"gradient-property\" : { \"type\" : \"object\" , \"title\" : \"Gradient Property\" , \"description\" : \"An animatable property that holds a Gradient\" , \"properties\" : { \"p\" : { \"title\" : \"Color stop count\" , \"type\" : \"number\" }, \"k\" : { \"type\" : \"object\" , \"title\" : \"Gradient stops\" , \"description\" : \"Animatable vector representing the gradient stops\" , \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/gradient\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/gradient-keyframe\" } } } } ], \"required\" : [ \"a\" , \"k\" ] } } }, \"easing-handle\" : { \"type\" : \"object\" , \"title\" : \"Keyframe Easing\" , \"description\" : \"Bezier handle for keyframe interpolation\" , \"properties\" : { \"x\" : { \"title\" : \"X\" , \"description\" : \"Time component:\\n0 means start time of the keyframe,\\n1 means time of the next keyframe.\" , \"oneOf\" : [ { \"type\" : \"array\" , \"$ref\" : \"#/$defs/values/vector\" , \"items\" : { \"type\" : \"number\" , \"default\" : 0 , \"minimum\" : 0 , \"maximum\" : 1 }, \"minItems\" : 1 }, { \"type\" : \"number\" , \"default\" : 0 , \"minimum\" : 0 , \"maximum\" : 1 } ] }, \"y\" : { \"title\" : \"Y\" , \"description\" : \"Value interpolation component:\\n0 means start value of the keyframe,\\n1 means value at the next keyframe.\" , \"oneOf\" : [ { \"type\" : \"array\" , \"$ref\" : \"#/$defs/values/vector\" , \"items\" : { \"type\" : \"number\" , \"default\" : 0 }, \"minItems\" : 1 }, { \"type\" : \"number\" , \"default\" : 0 } ] } }, \"required\" : [ \"x\" , \"y\" ] }, \"base-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Base Keyframe\" , \"description\" : \"A Keyframes specifies the value at a specific time and the interpolation function to reach the next keyframe.\" , \"allOf\" : [ { \"properties\" : { \"t\" : { \"title\" : \"Time\" , \"description\" : \"Frame number\" , \"type\" : \"number\" , \"default\" : 0 }, \"h\" : { \"title\" : \"Hold\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"default\" : 0 }, \"i\" : { \"title\" : \"In Tangent\" , \"description\" : \"Easing tangent going into the next keyframe\" , \"$ref\" : \"#/$defs/properties/easing-handle\" }, \"o\" : { \"title\" : \"Out Tangent\" , \"description\" : \"Easing tangent leaving the current keyframe\" , \"$ref\" : \"#/$defs/properties/easing-handle\" } } } ], \"required\" : [ \"t\" ] }, \"split-position\" : { \"type\" : \"object\" , \"title\" : \"Split Position\" , \"description\" : \"An animatable position where x and y are definied and animated separately.\" , \"properties\" : { \"s\" : { \"title\" : \"Split\" , \"description\" : \"Whether the position has split values\" , \"type\" : \"boolean\" , \"const\" : true }, \"x\" : { \"title\" : \"X Position\" , \"description\" : \"X Position\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"y\" : { \"title\" : \"Y Position\" , \"description\" : \"Y Position\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"s\" , \"x\" , \"y\" ] }, \"bezier-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Shape Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/values/bezier\" }, \"minItems\" : 1 , \"maxItems\" : 1 } } } ], \"required\" : [ \"s\" ] }, \"position-property\" : { \"type\" : \"object\" , \"title\" : \"Position Property\" , \"description\" : \"An animatable property to represent a position in space\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/vector\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/position-keyframe\" } } } } ], \"required\" : [ \"a\" , \"k\" ] }, \"color-property\" : { \"type\" : \"object\" , \"title\" : \"Color Property\" , \"description\" : \"An animatable property that holds a Color\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/color\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/color-keyframe\" } } } } ] }, \"splittable-position-property\" : { \"type\" : \"object\" , \"title\" : \"Splittable Position Property\" , \"description\" : \"An animatable position where position values may be defined and animated separately.\" , \"oneOf\" : [ { \"$comment\" : \"Grouped XY position coordinates\" , \"$ref\" : \"#/$defs/properties/position-property\" , \"properties\" : { \"s\" : { \"title\" : \"Split\" , \"description\" : \"Whether the position has split values\" , \"type\" : \"boolean\" , \"const\" : false } } }, { \"$comment\" : \"Split XY position coordinates\" , \"$ref\" : \"#/$defs/properties/split-position\" } ] } }, \"shapes\" : { \"all-graphic-elements\" : { \"$comment\" : \"List of valid shapes\" , \"oneOf\" : [ { \"$ref\" : \"#/$defs/shapes/ellipse\" }, { \"$ref\" : \"#/$defs/shapes/fill\" }, { \"$ref\" : \"#/$defs/shapes/gradient-fill\" }, { \"$ref\" : \"#/$defs/shapes/gradient-stroke\" }, { \"$ref\" : \"#/$defs/shapes/group\" }, { \"$ref\" : \"#/$defs/shapes/path\" }, { \"$ref\" : \"#/$defs/shapes/polystar\" }, { \"$ref\" : \"#/$defs/shapes/rectangle\" }, { \"$ref\" : \"#/$defs/shapes/stroke\" }, { \"$ref\" : \"#/$defs/shapes/transform\" }, { \"$ref\" : \"#/$defs/shapes/trim-path\" }, { \"$ref\" : \"#/$defs/shapes/unknown-shape\" } ] }, \"polystar\" : { \"type\" : \"object\" , \"title\" : \"PolyStar\" , \"description\" : \"Star or regular polygon\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"sr\" }, \"p\" : { \"title\" : \"Position\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"or\" : { \"title\" : \"Outer Radius\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"os\" : { \"title\" : \"Outer Roundness\" , \"description\" : \"Outer Roundness as a percentage\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"r\" : { \"title\" : \"Rotation\" , \"description\" : \"Rotation, clockwise in degrees\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"pt\" : { \"title\" : \"Points\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"sy\" : { \"title\" : \"Star Type\" , \"$ref\" : \"#/$defs/constants/star-type\" , \"default\" : 1 }, \"ir\" : { \"title\" : \"Inner Radius\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"is\" : { \"title\" : \"Inner Roundness\" , \"description\" : \"Inner Roundness as a percentage\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"ty\" , \"or\" , \"os\" , \"pt\" , \"p\" , \"r\" ] }, { \"if\" : { \"properties\" : { \"sy\" : { \"const\" : 1 } } }, \"then\" : { \"required\" : [ \"ir\" , \"is\" ] } } ] }, \"group\" : { \"type\" : \"object\" , \"title\" : \"Group\" , \"description\" : \"Shape Element that can contain other shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"gr\" }, \"np\" : { \"title\" : \"Number Of Properties\" , \"type\" : \"number\" }, \"it\" : { \"title\" : \"Shapes\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/shapes/all-graphic-elements\" } } }, \"required\" : [ \"ty\" ] } ] }, \"path\" : { \"type\" : \"object\" , \"title\" : \"Path\" , \"description\" : \"Custom Bezier shape\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"sh\" }, \"ks\" : { \"title\" : \"Shape\" , \"description\" : \"Bezier path\" , \"$ref\" : \"#/$defs/properties/bezier-property\" } }, \"required\" : [ \"ty\" , \"ks\" ] } ] }, \"shape-style\" : { \"type\" : \"object\" , \"title\" : \"Shape Style\" , \"description\" : \"Describes the visual appearance (like fill and stroke) of neighbouring shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"type\" : \"object\" , \"properties\" : { \"o\" : { \"title\" : \"Opacity\" , \"description\" : \"Opacity, 100 means fully opaque\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"o\" ] } ] }, \"shape\" : { \"type\" : \"object\" , \"title\" : \"Shape\" , \"description\" : \"Drawable shape, defines the actual shape but not the style\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"type\" : \"object\" , \"properties\" : { \"d\" : { \"title\" : \"Direction\" , \"description\" : \"Direction the shape is drawn as, mostly relevant when using trim path\" , \"$ref\" : \"#/$defs/constants/shape-direction\" } } } ] }, \"fill\" : { \"type\" : \"object\" , \"title\" : \"Fill\" , \"description\" : \"Solid fill color\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"fl\" }, \"c\" : { \"title\" : \"Color\" , \"$ref\" : \"#/$defs/properties/color-property\" }, \"r\" : { \"title\" : \"Fill Rule\" , \"$ref\" : \"#/$defs/constants/fill-rule\" } }, \"required\" : [ \"ty\" , \"c\" ] } ] }, \"gradient-stroke\" : { \"type\" : \"object\" , \"title\" : \"Gradient Stroke\" , \"description\" : \"Gradient stroke\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"$ref\" : \"#/$defs/shapes/base-stroke\" }, { \"$ref\" : \"#/$defs/shapes/base-gradient\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"gs\" } }, \"required\" : [ \"ty\" ] } ] }, \"trim-path\" : { \"type\" : \"object\" , \"title\" : \"Trim Path\" , \"description\" : \"Trims shapes into a segment\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/modifier\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"tm\" }, \"s\" : { \"title\" : \"Start\" , \"description\" : \"Segment start\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"e\" : { \"title\" : \"End\" , \"description\" : \"Segment end\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"o\" : { \"title\" : \"Offset\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"m\" : { \"title\" : \"Multiple\" , \"description\" : \"How to treat multiple copies\" , \"$ref\" : \"#/$defs/constants/trim-multiple-shapes\" } }, \"required\" : [ \"ty\" , \"o\" , \"s\" , \"e\" ] } ] }, \"transform\" : { \"type\" : \"object\" , \"title\" : \"Transform Shape\" , \"description\" : \"Group transform\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"$ref\" : \"#/$defs/helpers/transform\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"tr\" } }, \"required\" : [ \"ty\" ] } ] }, \"rectangle\" : { \"type\" : \"object\" , \"title\" : \"Rectangle\" , \"description\" : \"A simple rectangle shape\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"rc\" }, \"p\" : { \"title\" : \"Position\" , \"description\" : \"Center of the rectangle\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"s\" : { \"title\" : \"Size\" , \"$ref\" : \"#/$defs/properties/vector-property\" }, \"r\" : { \"title\" : \"Rounded\" , \"description\" : \"Rounded corners radius\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"ty\" , \"s\" , \"p\" ] } ] }, \"base-gradient\" : { \"type\" : \"object\" , \"title\" : \"Base Gradient\" , \"description\" : \"Common properties for gradients\" , \"allOf\" : [ { \"type\" : \"object\" , \"properties\" : { \"g\" : { \"title\" : \"Colors\" , \"description\" : \"Gradient colors\" , \"$ref\" : \"#/$defs/properties/gradient-property\" }, \"s\" : { \"title\" : \"Start Point\" , \"description\" : \"Starting point for the gradient\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"e\" : { \"title\" : \"End Point\" , \"description\" : \"End point for the gradient\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"t\" : { \"title\" : \"Gradient Type\" , \"description\" : \"Type of the gradient\" , \"$ref\" : \"#/$defs/constants/gradient-type\" }, \"h\" : { \"title\" : \"Highlight Length\" , \"description\" : \"Highlight Length, as a percentage between s and e \" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"a\" : { \"title\" : \"Highlight Angle\" , \"description\" : \"Highlight Angle in clockwise degrees, relative to the direction from s to e \" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"s\" , \"e\" , \"g\" , \"t\" ] } ] }, \"graphic-element\" : { \"type\" : \"object\" , \"title\" : \"Graphic Element\" , \"description\" : \"Element used to display vector data in a shape layer\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"hd\" : { \"title\" : \"Hidden\" , \"description\" : \"Whether the shape is hidden\" , \"type\" : \"boolean\" }, \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" } }, \"required\" : [ \"ty\" ] } ] }, \"stroke-dash\" : { \"type\" : \"object\" , \"title\" : \"Stroke Dash\" , \"description\" : \"An item used to described the dash pattern in a stroked path\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"n\" : { \"title\" : \"Dash Type\" , \"$ref\" : \"#/$defs/constants/stroke-dash-type\" , \"default\" : \"d\" }, \"v\" : { \"title\" : \"Length\" , \"description\" : \"Length of the dash\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [] } ] }, \"gradient-fill\" : { \"type\" : \"object\" , \"title\" : \"Gradient\" , \"description\" : \"Gradient fill color\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"$ref\" : \"#/$defs/shapes/base-gradient\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"gf\" }, \"r\" : { \"title\" : \"Fill Rule\" , \"$ref\" : \"#/$defs/constants/fill-rule\" } }, \"required\" : [ \"ty\" ] } ] }, \"base-stroke\" : { \"type\" : \"object\" , \"title\" : \"Base Stroke\" , \"description\" : \"Common properties for stroke styles\" , \"allOf\" : [ { \"type\" : \"object\" , \"properties\" : { \"lc\" : { \"title\" : \"Line Cap\" , \"$ref\" : \"#/$defs/constants/line-cap\" , \"default\" : 2 }, \"lj\" : { \"title\" : \"Line Join\" , \"$ref\" : \"#/$defs/constants/line-join\" , \"default\" : 2 }, \"ml\" : { \"title\" : \"Miter Limit\" , \"type\" : \"number\" , \"default\" : 0 }, \"ml2\" : { \"title\" : \"Miter Limit\" , \"description\" : \"Animatable alternative to ml\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"w\" : { \"title\" : \"Width\" , \"description\" : \"Stroke width\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"d\" : { \"title\" : \"Dashes\" , \"description\" : \"Dashed line definition\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/shapes/stroke-dash\" } } }, \"required\" : [ \"w\" ] } ] }, \"unknown-shape\" : { \"type\" : \"object\" , \"title\" : \"Unknown shape types\" , \"description\" : \"Unknown shape types. Types not defined by the specification are still allowed.\" , \"properties\" : { \"ty\" : { \"not\" : { \"$comment\" : \"enum list is dynamically generated\" , \"enum\" : [ \"el\" , \"fl\" , \"gf\" , \"gs\" , \"gr\" , \"sh\" , \"sr\" , \"rc\" , \"st\" , \"tr\" , \"tm\" ] } } } }, \"ellipse\" : { \"type\" : \"object\" , \"title\" : \"Ellipse\" , \"description\" : \"Ellipse shape\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"el\" }, \"p\" : { \"title\" : \"Position\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"s\" : { \"title\" : \"Size\" , \"$ref\" : \"#/$defs/properties/vector-property\" } }, \"required\" : [ \"ty\" , \"s\" , \"p\" ] } ] }, \"modifier\" : { \"type\" : \"object\" , \"title\" : \"Modifier\" , \"description\" : \"Modifiers change the bezier curves of neighbouring shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" } ] }, \"stroke\" : { \"type\" : \"object\" , \"title\" : \"Stroke\" , \"description\" : \"Solid stroke\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"$ref\" : \"#/$defs/shapes/base-stroke\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"st\" }, \"c\" : { \"title\" : \"Color\" , \"description\" : \"Stroke color\" , \"$ref\" : \"#/$defs/properties/color-property\" } }, \"required\" : [ \"ty\" , \"c\" ] } ] } }, \"values\" : { \"hexcolor\" : { \"type\" : \"string\" , \"title\" : \"Hex Color\" , \"description\" : \"Color value in hexadecimal format, with two digits per component ('#RRGGBB')\" , \"pattern\" : \"^#([a-fA-F0-9]{6})$\" , \"examples\" : [ \"#FF00AA\" ] }, \"bezier\" : { \"type\" : \"object\" , \"title\" : \"Bezier\" , \"description\" : \"Cubic polybezier\" , \"properties\" : { \"c\" : { \"title\" : \"Closed\" , \"type\" : \"boolean\" , \"default\" : false }, \"i\" : { \"title\" : \"In Tangents\" , \"type\" : \"array\" , \"description\" : \"Array of points, each point is an array of coordinates.\\nThese points are along the in tangents relative to the corresponding v .\" , \"items\" : { \"$ref\" : \"#/$defs/values/vector\" , \"default\" : [] } }, \"o\" : { \"title\" : \"Out Tangents\" , \"type\" : \"array\" , \"description\" : \"Array of points, each point is an array of coordinates.\\nThese points are along the out tangents relative to the corresponding v .\" , \"items\" : { \"$ref\" : \"#/$defs/values/vector\" , \"default\" : [] } }, \"v\" : { \"title\" : \"Vertices\" , \"description\" : \"Array of points, each point is an array of coordinates.\\nThese points are along the bezier path\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/values/vector\" , \"default\" : [] } } }, \"required\" : [ \"i\" , \"v\" , \"o\" ] }, \"data-url\" : { \"type\" : \"string\" , \"title\" : \"Data URL\" , \"description\" : \"An embedded data object\" , \"pattern\" : \"^data:([\\w/]+)(;base64)?,(.+)$\" }, \"color\" : { \"type\" : \"array\" , \"title\" : \"Color\" , \"description\" : \"Color as a [r, g, b] array with values in [0, 1]\" , \"items\" : { \"type\" : \"number\" , \"minimum\" : 0 , \"maximum\" : 1 }, \"minItems\" : 3 , \"maxItems\" : 4 }, \"int-boolean\" : { \"type\" : \"integer\" , \"title\" : \"Integer Boolean\" , \"description\" : \"Represents boolean values as an integer. 0 is false, 1 is true.\" , \"default\" : 0 , \"examples\" : [ 0 ], \"enum\" : [ 0 , 1 ], \"oneOf\" : [ { \"title\" : \"True\" , \"const\" : 1 }, { \"title\" : \"False\" , \"const\" : 0 } ] }, \"vector\" : { \"type\" : \"array\" , \"title\" : \"Vector\" , \"description\" : \"An array of numbers\" , \"items\" : { \"type\" : \"number\" } }, \"gradient\" : { \"type\" : \"array\" , \"title\" : \"Gradient\" , \"description\" : \"A flat list of color stops followed by optional transparency stops. A color stop is [offset, red, green, blue]. A transparency stop is [offset, transparency]. All values are between 0 and 1\" , \"items\" : { \"type\" : \"number\" , \"minimum\" : 0 , \"maximum\" : 1 } } } } }","title":"JSON Schema"},{"location":"specs/shapes/","text":"Shapes The graphical elements are divided in 4 categories: Shapes that define the actual curves but have no styling information Grouping , used to organize collections of graphic elements Styles , that define the visual appearance of shapes Modifiers alter the curves of the shapes Shape Rendering Model Grouping and Ordering Rules Shapes are rendered in reverse order, bottom->top. Shapes at the beginning of the array are rendered on top of shapes with larger indices. Groups offer a scoping mechanism for transforms, styles, modifiers, and shapes. All group children, including sub-groups and their children, are considered part of the group's scope. Transforms adjust the coordinate system for all elements within their group, and transitively for all other group-nested elements. Styles and modifiers apply to all preceding shapes within the current scope, including subgroup-nested shapes. When multiple styles apply to the same shape, the shape is rendered repeatedly for each style, in reverse order. When multiple modifiers apply to the same shape, they are composed in reverse order (e.g. T r i m ( T r i m ( s h a p e ) ) ). When multiple transforms apply to the same shape due to scope nesting, they compose in group nesting order (transforms are additive). Group opacity (property of the group transform) applies atomically to all elements in scope - i.e. opacity applies to the result of compositing all group content, and not to individual elements. More formally: for each ( s h a p e , s t y l e ) tuple, where I n d e x ( s h a p e ) < I n d e x ( s t y l e ) and s h a p e \u2208 S c o p e ( s t y l e ) : for each m o d i f i e r , in increasing index order, where I n d e x ( s h a p e ) < I n d e x ( m o d i f i e r ) and s h a p e \u2208 S c o p e ( m o d i f i e r ) : s h a p e = m o d i f i e r ( s h a p e ) compute the total shape transformation by composing all transforms within the shape scope chain: \u0002 k l z z w x h : 0433 \u0003 compute the total style transformation by composing all transforms within the style scope chain: \u0002 k l z z w x h : 0441 \u0003 R e n d e r ( s h a p e \u00d7 T s h a p e , s t y l e \u00d7 T s t y l e ) Notes Certain modifier operations (e.g. sequential T r i m ) may require information about shapes from different groups, thus R e n d e r ( ) calls cannot always be issued based on single-pass local knowledge. Transforms can affect both shapes and styles (e.g. stroke width). For a given ( s h a p e , s t y l e ) , the shape and style transforms are not necessarily equal. Shapes without an applicable style are not rendered. This rendering model is based on AfterEffects' Shape Layer semantics. Rendering Convention Shapes defined in this section contain rendering instructions. These instructions are used to generate the path as a bezier curve. Implementations MAY use different algorithms or primitives to render the shapes but the result MUST be equivalent to the paths defined here. Some instructions define named values for clarity and illustrative purposes, implementations are not required to have them explicitly defined in their rendering process. When referencing animated properties, the rendering instruction will use the same name as in the JSON but it's assumed they refer to their value at a given point in time rather than the property itself. For Vector values, v a l u e . x and v a l u e . y in the instructions are equivalent to value[0] and value[1] respectively. All paths MUST be closed unless specified otherwise in the rendering instructions. When instructions call for an equality comparison between two values, implementations MAY consider similar values to be equal to overcome numerical instability. Drawing Commands Drawing instructions will contain the following commands: add vertex : Adds a vertex to the bezier shape in global coordinates set in tangent : Sets the cubic tangent to the last added vertex, with coordinates relative to it. If omitted, tangents MUST be ( 0 , 0 ) . set out tangent : Sets the cubic tangent from the last added vertex, with coordinates relative to it. If omitted, tangents MUST be ( 0 , 0 ) . lerp : Linearly interpolates two points or scalars by a given amount. Approximating Ellipses with Cubic Bezier An elliptical quadrant can be approximated by a cubic bezier segment with tangents of length $radius \\cdot E_t. Where E t \u2248 0.5519150244935105707435627 See this article for the math behind it. When implementations render elliptical arcs using bezier curves, they SHOULD use this constant, a similar approximation, or elliptical arc drawing primitives. Graphic Element Element used to display vector data in a shape layer Composition Diagram for Graphic Element Graphic Element Visual Object Group Shape Style Fill Gradient Stroke Gradient Stroke Shape PolyStar Path Rectangle Ellipse Transform Shape Modifier Trim Path Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string Shape Type Shape Type The ty property defines the specific element type based on the following values: ty Type 'el' Ellipse 'fl' Fill 'gf' Gradient 'gs' Gradient Stroke 'gr' Group 'sh' Path 'sr' PolyStar 'rc' Rectangle 'st' Stroke 'tr' Transform Shape 'tm' Trim Path None Unknown shape types Hidden shapes ( hd: True ) are ignored, and do not contribute to rendering nor modifier operations. Shapes Drawable shape, defines the actual shape but not the style Composition Diagram for Shape Shape Graphic Element Visual Object PolyStar Path Rectangle Ellipse Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path Ellipse Ellipse shape Composition Diagram for Ellipse Ellipse Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'el' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Position s Vector Size Size Example Position x 256 Position y 256 Width 256 Height 256 var lottie_player_19 = new PlaygroundPlayer( 19, 'playground_19_5', 'lottie_target_19', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Group\", \"it\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [256, 256]}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[0].shapes[0].it[0].p.k = [ data[\"Position x\"], data[\"Position y\"] ]; lottie.layers[0].shapes[0].it[0].s.k = [ data[\"Width\"], data[\"Height\"] ]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); An ellipse is drawn from the top quandrant point going clockwise: r a d i u s = s 2 t a n g e n t = r a d i u s \u00b7 E t x = p . x y = p . y Add vertex ( x , y \u2212 r a d i u s . y ) Set in tangent ( \u2212 t a n g e n t . x , 0 ) Set out tangent ( t a n g e n t . x , 0 ) Add vertex ( x + r a d i u s . x , y ) Set in tangent ( 0 , \u2212 t a n g e n t . y ) Set out tangent ( 0 , t a n g e n t . y ) Add vertex ( x , y + r a d i u s . y ) Set in tangent ( t a n g e n t . x , 0 ) Set out tangent ( \u2212 t a n g e n t . x , 0 ) Add vertex ( x \u2212 r a d i u s . x , y ) Set in tangent ( 0 , t a n g e n t . y ) Set out tangent ( 0 , \u2212 t a n g e n t . y ) Implementations MAY use elliptical arcs to render an ellipse. Rectangle A simple rectangle shape Composition Diagram for Rectangle Rectangle Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'rc' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Center of the rectangle s Vector Size Size r Scalar Rounded Rounded corners radius Example Position x 256 Position y 256 Width 256 Height 256 Roundness 0 var lottie_player_20 = new PlaygroundPlayer( 20, 'playground_20_6', 'lottie_target_20', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Group\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [256, 256]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[0].shapes[0].it[0].p.k = [ data[\"Position x\"], data[\"Position y\"] ]; lottie.layers[0].shapes[0].it[0].s.k = [ data[\"Width\"], data[\"Height\"] ]; lottie.layers[0].shapes[0].it[0].r.k = data[\"Roundness\"]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); Definitions: l e f t = p . x \u2212 s . x 2 r i g h t = p . x + s . x 2 t o p = p . y \u2212 s . y 2 b o t t o m = p . y + s . y 2 If r = 0 , then the rectangle is rendered from the top-right going clockwise: Add vertex ( r i g h t , t o p ) Add vertex ( r i g h t , b o t t o m ) Add vertex ( l e f t , b o t t o m ) Add vertex ( l e f t , t o p ) If r > 0 , the rounded corners must be taken into account. r o u n d e d = min ( s . x 2 , s . y 2 , r ) t a n g e n t = r o u n d e d \u00b7 E t Add vertex ( r i g h t , t o p + r o u n d e d ) Set in tangent ( 0 , \u2212 t a n g e n t ) Add vertex ( r i g h t , b o t t o m \u2212 r o u n d e d ) Set out tangent ( 0 , t a n g e n t ) Add vertex ( r i g h t \u2212 r o u n d e d , b o t t o m ) Set in tangent ( t a n g e n t , 0 ) Add vertex ( l e f t + r o u n d e d , b o t t o m ) Set out tangent ( \u2212 t a n g e n t , 0 ) Add vertex ( l e f t , b o t t o m \u2212 r o u n d e d ) Set in tangent ( 0 , t a n g e n t ) Add vertex ( l e f t , t o p + r o u n d e d ) Set out tangent ( 0 , \u2212 t a n g e n t ) Add vertex ( l e f t + r o u n d e d , t o p ) Set in tangent ( \u2212 t a n g e n t , 0 ) Add vertex ( r i g h t \u2212 r o u n d e d , t o p ) Set out tangent ( t a n g e n t , 0 ) Path Custom Bezier shape Composition Diagram for Path Path Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'sh' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path ks Bezier Shape Bezier path Example Shape var lottie_player_21 = new PlaygroundPlayer( 21, 'playground_21_2', 'lottie_target_21', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"ao\": 0, \"ks\": {\"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ty\": \"sh\", \"d\": 1, \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[253, 147], [56, 153], [253, 409], [450, 153]], \"i\": [[12, -57], [42, -112], [-16, -18], [46, 123]], \"o\": [[-17, -61], [-46, 125], [16, -14], [-43, -115]]}}}, {\"ty\": \"st\", \"o\": {\"a\": 0, \"k\": 100}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}]}, function (lottie, data) { var shape = lottie.layers[0].shapes[0].it[0]; if ( data[\"Shape\"] ) shape.ks.k = data[\"Shape\"]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); var playground_21_1_playground = document.getElementById(\"playground_21_1_playground\"); playground_21_1_playground.name = playground_21_1_playground.getAttribute(\"name\"); var playground_21_1_playground_editor = BezierPreviewEditor.stand_alone( playground_21_1_playground, (lottie) => { playground_21_1_playground.value = lottie; lottie_player_21.reload(); }, null, 512, 512 ); PolyStar Star or regular polygon Composition Diagram for PolyStar PolyStar Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'sr' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Position or Scalar Outer Radius Outer Radius os Scalar Outer Roundness Outer Roundness as a percentage r Scalar Rotation Rotation, clockwise in degrees pt Scalar Points Points sy Star Type Star Type Star Type ir Scalar Inner Radius Inner Radius is Scalar Inner Roundness Inner Roundness as a percentage Example Position x 256 Position y 256 Points 5 Rotation 0 Outer Radius 200 Inner Radius 100 Outer Roundness 0 Inner Roundness 0 Star Type Star Polygon var lottie_player_22 = new PlaygroundPlayer( 22, 'playground_22_10', 'lottie_target_22', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"layers\": [{\"ty\": 4, \"ddd\": 0, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ip\": 0, \"op\": 180, \"ind\": 0, \"st\": 0, \"sr\": 1, \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{9199543e-3552-4e51-a802-623f2a4a2ca1}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.979995422293431, 0.28000305180437934]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var star = { \"ty\": \"sr\", \"nm\": \"PolyStar\", \"sy\": Number(data[\"Star Type\"]), \"p\": { \"a\": 0, \"k\": [data[\"Position x\"], data[\"Position y\"]] }, \"r\": { \"a\": 0, \"k\": data[\"Rotation\"] }, \"pt\": { \"a\": 0, \"k\": data[\"Points\"] }, \"or\": { \"a\": 0, \"k\": data[\"Outer Radius\"] }, \"os\": { \"a\": 0, \"k\": data[\"Outer Roundness\"] }, }; if ( data[\"Star Type\"] == \"1\" ) { star = { ...star, \"ir\": { \"a\": 0, \"k\": data[\"Inner Radius\"] }, \"is\": { \"a\": 0, \"k\": data[\"Inner Roundness\"] }, }; } lottie.layers[0].shapes[0].it[0] = star; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); Definitions: p o i n t s = \u230a p t \u2309 \u03b8 = \u03c0 p o i n t s \u03b1 = \u03c0 180 \u00b7 r t a n o u t = o s 100 \u00b7 o r \u00b7 2 \u03c0 p o i n t s \u00b7 4 t a n i n = i s 100 \u00b7 i r \u00b7 2 \u03c0 p o i n t s \u00b7 4 For i in [ 0 , p o i n t s ) Let \u03b2 = \u2212 \u03c0 2 + \u03b1 + i \u00b7 2 \u03b8 \u02d9 Let V o u t = ( o r \u00b7 cos ( \u03b2 ) , o r \u00b7 sin ( \u03b2 ) ) Add vertex p + V o u t If o r \u2260 0 , we need to add bezier tangent Let T o u t = ( V o u t \u00b7 t a n o u t o r ) Set in tangent V o u t Set out tangent \u2212 V o u t If s y = 1 , we need to add a vertex towards the inner radius to make a star Let V i n = ( i r \u00b7 cos ( \u03b2 + \u03b8 ) , o r \u00b7 sin ( \u03b2 + \u03b8 ) ) Add vertex p + V i n If i r \u2260 0 , we need to add bezier tangent Let T i n = ( V i n \u00b7 t a n i n o r ) Set in tangent V i n Set out tangent \u2212 V i n Grouping Group Shape Element that can contain other shapes Composition Diagram for Group Group Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'gr' Shape Type Shape Type np number Number Of Properties Number Of Properties it array of Graphic Element Shapes Shapes A group defines a render stack , elements within a group MUST be rendered in reverse order (the first object in the list will appear on top of elements further down). Apply the transform Render Styles and child groups in the transformed coordinate system . Transform Group transform Composition Diagram for Transform Shape Transform Shape Graphic Element Transform Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'tr' Shape Type Shape Type a Position Anchor Point Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale) p Splittable Position Position Position / Translation r Scalar Rotation Rotation in degrees, clockwise s Vector Scale Scale factor, [100, 100] for no scaling o Scalar Opacity Opacity sk Scalar Skew Skew amount as an angle in degrees sa Scalar Skew Axis Direction along which skew is applied, in degrees ( 0 skews along the X axis, 90 along the Y axis) Transform shapes MUST always be present in the group and they MUST be the last item in the it array. They modify the group's coordinate system the same way as Layer Transform . Style Describes the visual appearance (like fill and stroke) of neighbouring shapes Composition Diagram for Shape Style Shape Style Graphic Element Visual Object Fill Gradient Stroke Gradient Stroke Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque Shapes styles MUST apply their style to the collected shapes that come before them in stacking order . Fill Solid fill color Composition Diagram for Fill Fill Shape Style Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'fl' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque c Color Color Color r Fill Rule Fill Rule Fill Rule Example Red 1 Green 0.98 Blue 0.28 Opacity 100 Fill Rule Non Zero Even Odd var lottie_player_23 = new PlaygroundPlayer( 23, 'playground_23_6', 'lottie_target_23', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{f5d94f54-bb8f-4f07-be45-232ebd4b9eb1}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{4b0993ed-e35b-48a5-ab12-687dbc147c7c}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Path\", \"mn\": \"{29196ff2-0a65-48b4-a450-f9fbc3a3640d}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"Path\", \"mn\": \"{bb7e6c60-755e-4a21-a7ba-bd054feab5c7}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[125.51641791044776, 452.20298507462684], [240.71641791044777, 38.6865671641791], [435.8686567164179, 447.9044776119403], [42.125373134328356, 173.65970149253732], [460.8, 156.46567164179103]], \"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"p\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[0].it[1]; shape.c.k = [data[\"Red\"], data[\"Green\"], data[\"Blue\"]]; shape.o.k = data[\"Opacity\"]; shape.r = Number(data[\"Fill Rule\"]); this.json_viewer_contents = lottie.layers[0].shapes[0].it[1]; }, {} ); Stroke Solid stroke Composition Diagram for Stroke Stroke Shape Style Base Stroke Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'st' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque lc Line Cap Line Cap Line Cap lj Line Join Line Join Line Join ml number Miter Limit Miter Limit ml2 Scalar Miter Limit Animatable alternative to ml w Scalar Width Stroke width d array of Stroke Dash Dashes Dashed line definition c Color Color Stroke color Example Red 1 Green 0.98 Blue 0.28 Width 32 Opacity 100 Line Cap Butt Round Square Line Join Miter Round Bevel Miter Limit 3 var lottie_player_24 = new PlaygroundPlayer( 24, 'playground_24_9', 'lottie_target_24', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.c.k = [data[\"Red\"], data[\"Green\"], data[\"Blue\"]]; shape.o.k = data[\"Opacity\"]; shape.w.k = data[\"Width\"]; shape.lc = Number(data[\"Line Cap\"]); shape.lj = Number(data[\"Line Join\"]); shape.ml = data[\"Miter Limit\"]; shape.d = undefined; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} ); Stroke Dashes An item used to described the dash pattern in a stroked path Composition Diagram for Stroke Dash Stroke Dash Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like n Stroke Dash Type Dash Type Dash Type v Scalar Length Length of the dash Example Red 1 Green 0.98 Blue 0.28 Width 32 Opacity 100 Line Cap Butt Round Square Line Join Miter Round Bevel Miter Limit 3 Dash Offset 0 Dash Length 30 Dash Gap 50 var lottie_player_25 = new PlaygroundPlayer( 25, 'playground_25_12', 'lottie_target_25', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.c.k = [data[\"Red\"], data[\"Green\"], data[\"Blue\"]]; shape.o.k = data[\"Opacity\"]; shape.w.k = data[\"Width\"]; shape.lc = Number(data[\"Line Cap\"]); shape.lj = Number(data[\"Line Join\"]); shape.ml = data[\"Miter Limit\"]; shape.d[0].v.k = data[\"Dash Offset\"]; shape.d[1].v.k = data[\"Dash Length\"]; shape.d[2].v.k = data[\"Dash Gap\"]; var trim = lottie.layers[0].shapes[1]; trim.e.k = 100; trim.o.k = 0; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} ); Gradient Fill Gradient fill color Composition Diagram for Gradient Gradient Shape Style Base Gradient Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'gf' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque g Gradient Colors Gradient colors s Position Start Point Starting point for the gradient e Position End Point End point for the gradient t Gradient Type Gradient Type Type of the gradient h Scalar Highlight Length Highlight Length, as a percentage between s and e a Scalar Highlight Angle Highlight Angle in clockwise degrees, relative to the direction from s to e r Fill Rule Fill Rule Fill Rule Example Start X 256 Start Y 496 End X 256 End Y 16 Type Linear Radial Highlight 0 Highlight Angle 0 var lottie_player_26 = new PlaygroundPlayer( 26, 'playground_26_8', 'lottie_target_26', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{3da63a46-0ec5-45b8-90fb-d31c5614d5be}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Start/End markers\", \"mn\": \"{04a8ef87-75fd-451c-868b-7413969c8ad9}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{078a0bf7-08ce-49f7-9dca-c473ad9ff09d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{efb1ff36-fe2b-4939-97a5-d75a167d003b}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{759da60a-0439-496c-89a9-66e1d721ceb7}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"\", \"mn\": \"{b56ba91b-5ef9-40d2-a1da-27265d105c7a}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{020e377d-646e-45f6-830f-756cfff57aa9}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[3.7994567051676293, -7.097994637365934], [5.33994951436286, -6.707992504500113], [6.327946284594615, -5.609490432573314], [6.672442201680043, -3.952002315682892], [6.672442201680043, -3.262995246756169], [1.901449879997, -3.262995246756169], [2.505949758118953, -1.4624984765244131], [4.124444517362934, -0.8449957342683567], [5.300948539338484, -0.968496282719568], [6.360449636240906, -1.326002681317033], [6.360449636240906, -0.32500304695117377], [5.307446162716568, 0.019500487512187806], [4.072448295582389, 0.12999817182929574], [2.3239477471311782, -0.2729992077926948], [1.1409537191554788, -1.4755013406585165], [0.7184558520213006, -3.4319943936098403], [1.1019527441311032, -5.395000304695118], [2.1809543285457136, -6.655996282719569], [3.7994567051676293, -7.097994637365934]], \"i\": [[0, 0], [-0.4290005687642191, -0.2600014219105473], [-0.22966394472361795, -0.4723332927073187], [0, -0.6326587852196304], [0, 0], [0, 0], [-0.3856627665691641, -0.411668494837371], [-0.69333373959349, 0], [-0.34233512087802254, 0.08233369896747422], [-0.3639989437235931, 0.15600390009750242], [0, 0], [0.34666686979674477, -0.07366512287807196], [0.47666504162604095, 0], [0.506997440561014, 0.2686649197479937], [0.281665244756119, 0.5330031688292207], [0, 0.7713255331383286], [-0.25566459473986836, 0.5459984155853892], [-0.4636697948698716, 0.29466556976424485], [-0.6153317895447388, 0]], \"o\": [[0.5979946373659342, 0], [0.4290005687642182, 0.2600014219105473], [0.22966394472361795, 0.47233329270731783], [0, 0], [0, 0], [0.017337152178804383, 0.7886626853171328], [0.3856627665691641, 0.411668494837371], [0.4420008937723443, 0], [0.34233512087802165, -0.08233369896747411], [0, 0], [-0.35533544588614685, 0.15600390009750242], [-0.34666686979674477, 0.07366512287807195], [-0.6586695917397929, 0], [-0.5069974405610138, -0.26866491974799367], [-0.28166524475611887, -0.5330031688292207], [0, -0.7626721918047954], [0.2556645947398686, -0.5459984155853901], [0.46366979486987203, -0.29466556976424396], [0, 0]]}}}, {\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{b3f5759c-30aa-4352-a4ea-23b71ead28ad}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[3.7864462236555916, -6.162001706292657], [2.4929545113627842, -5.635496160841521], [1.9274556082652068, -4.172997684317108], [5.476452926948174, -4.172997684317108], [5.06045268319208, -5.609498049951249], [3.7864462236555916, -6.162001706292657]], \"i\": [[0, 0], [0.3163344708617717, -0.3510036969674246], [0.06066479786994661, -0.6239952873821846], [0, 0], [0.2686699979999494, 0.36833577089427205], [0.5806676416910426, 0]], \"o\": [[-0.5459933373334334, 0], [-0.3163344708617717, 0.3510036969674246], [0, 0], [-0.008663497837446243, -0.5893311395284879], [-0.2686699979999503, -0.36833577089427205], [0, 0]]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 16]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{e16b0057-203a-4dab-8e5b-495775987f85}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{07bcfe04-40c2-4636-807c-d64982f7a44d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{0de90988-3e53-4e7a-8a7d-cb147d0c42b5}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{22460e65-f67b-48b8-844b-e361867d003b}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[5.645452073801845, -1.923997318682967], [4.891453536338409, -0.39000213286582164], [2.8634485393384836, 0.12999817182929574], [1.608957802070052, 0.013002864134103353], [0.679454876996925, -0.311992565439136], [0.679454876996925, -1.3519931748293708], [1.6869521347408687, -0.968496282719568], [2.8894542676066903, -0.7929995124878122], [4.150450245631141, -1.0724963436585915], [4.540444761119028, -1.820004875121878], [4.3974513425335635, -2.2880013406585165], [3.8839562785944652, -2.7040015844146104], [2.824447564314108, -3.171998049951249], [1.6674516472286809, -3.6919983546463664], [0.9264559738993475, -4.315998720280507], [0.666459630240756, -5.251999268731718], [1.3879548160579016, -6.616995307695193], [3.2794487830945775, -7.097994637365934], [4.468948051826296, -6.9744940889147236], [5.502443420460512, -6.629998171829296], [5.1124489049726245, -5.719995734268357], [4.189443603277582, -6.031995917085427], [3.2014468330458263, -6.162001706292657], [2.128950489387235, -5.934501096902423], [1.7584564614115354, -5.316990737268432], [1.9274556082652068, -4.82950140159754], [2.4929545113627842, -4.439499268731718], [3.552455608265207, -3.9910032907072677], [4.683453414460362, -3.4839982327683194], [5.398450976899423, -2.853500243756094], [5.645452073801845, -1.923997318682967]], \"i\": [[0, 0], [0.5026656916422914, -0.346666869796745], [0.8493376396909924, 0], [0.35099861871546767, 0.07799687179679493], [0.26866999799995006, 0.13866674791869799], [0, 0], [-0.3943313426585666, -0.11699784682117054], [-0.4073367459186481, 0], [-0.2599963436585919, 0.18633122078051945], [0, 0.31200780019500485], [0.09532894572364281, 0.13866674791869782], [0.2470010969024221, 0.13866674791869782], [0.45933804595114847, 0.17333089577239447], [0.32066621978049437, 0.17333597402435075], [0.17333089577239413, 0.24266426973174227], [0, 0.38133609590239725], [-0.48099679054476374, 0.32066621978049437], [-0.779999187479687, 0], [-0.36833577089427294, -0.08233369896747345], [-0.32066114152853853, -0.14733024575614362], [0, 0], [0.32066621978049437, 0.08667052613815329], [0.3379982937073427, 0], [0.24699601865046583, -0.15166707292682258], [0, -0.2600065001625049], [-0.11266609790244764, -0.13433499899997603], [-0.26433317082927044, -0.12566642291057306], [-0.4420008937723443, -0.17333089577239447], [-0.3119976436910923, -0.1733359740243503], [-0.16466739793494867, -0.24699601865046628], [0, -0.3726725980649519]], \"o\": [[0, 0.6759965874146854], [-0.5026656916422914, 0.3466668697967449], [-0.4853285394634863, 0], [-0.3509986187154679, -0.07799687179679493], [0, 0], [0.27733349583739597, 0.13866674791869804], [0.3943313426585664, 0.11699784682117043], [0.5806676416910421, 0], [0.2599963436585915, -0.18633122078051967], [0, -0.17333089577239424], [-0.09532894572364281, -0.13866674791869826], [-0.24700109690242256, -0.13866674791869826], [-0.45066439160979055, -0.17333089577239447], [-0.3206662197804946, -0.1733359740243503], [-0.17333089577239436, -0.24266426973174315], [0, -0.5893311395284879], [0.4809967905447634, -0.3206662197804935], [0.4246637415935397, 0], [0.36833577089427205, 0.08233369896747433], [0, 0], [-0.2946706480162007, -0.12132959573989321], [-0.3206662197804948, -0.08667052613815329], [-0.4680015437885947, 0], [-0.2469960186504665, 0.15166707292682347], [0, 0.1906578914472865], [0.11266609790244786, 0.13433499899997514], [0.26433317082927044, 0.12566642291057306], [0.44200089377234475, 0.16466739793494822], [0.3119976436910914, 0.17333597402435075], [0.16466739793494867, 0.24699601865046583], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 496]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{a5276bb6-4d7c-4b4f-b371-a0e14a279176}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Gradient\", \"mn\": \"{9df3ba96-24a3-412e-abd4-e64e2e76e6df}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{20934ad0-1c22-4752-a5b1-be99889ea79a}\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [512, 512]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"gf\", \"nm\": \"Gradient Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"r\": 1, \"s\": {\"a\": 0, \"k\": [256, 496]}, \"e\": {\"a\": 0, \"k\": [256, 16]}, \"t\": 1, \"h\": {\"a\": 0, \"k\": 0}, \"a\": {\"a\": 0, \"k\": 0}, \"g\": {\"p\": 3, \"k\": {\"a\": 0, \"k\": [0, 0.7686274509803922, 0.8509803921568627, 0.9607843137254902, 0.5, 0.19600213626306554, 0.31400015259021896, 0.6899977111467155, 1, 0.16099794003204396, 0.18399328603036547, 0.45900663767452504, 0, 1, 0.5, 1, 1, 1]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"p\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var gradient = lottie.layers[1].shapes[0].it[1]; var start_marker = lottie.layers[0].shapes[1].it[1]; var end_marker = lottie.layers[0].shapes[0].it[1]; gradient.s.k = start_marker.p.k = [data[\"Start X\"], data[\"Start Y\"]]; gradient.e.k = end_marker.p.k = [data[\"End X\"], data[\"End Y\"]]; gradient.t = Number(data[\"Type\"]); if (gradient.t === 2) { gradient.h = { a: 0, k: data[\"Highlight\"] }; gradient.a = { a: 0, k: data[\"Highlight Angle\"] }; } else { delete gradient.h; delete gradient.a; } this.json_viewer_contents = lottie.layers[1].shapes[0].it[1]; }, {} ); Gradient Stroke Gradient stroke Composition Diagram for Gradient Stroke Gradient Stroke Shape Style Base Stroke Base Gradient Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'gs' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque lc Line Cap Line Cap Line Cap lj Line Join Line Join Line Join ml number Miter Limit Miter Limit ml2 Scalar Miter Limit Animatable alternative to ml w Scalar Width Stroke width d array of Stroke Dash Dashes Dashed line definition g Gradient Colors Gradient colors s Position Start Point Starting point for the gradient e Position End Point End point for the gradient t Gradient Type Gradient Type Type of the gradient h Scalar Highlight Length Highlight Length, as a percentage between s and e a Scalar Highlight Angle Highlight Angle in clockwise degrees, relative to the direction from s to e Example Start X 256 Start Y 496 End X 256 End Y 16 Type Linear Radial Highlight 0 Highlight Angle 0 var lottie_player_27 = new PlaygroundPlayer( 27, 'playground_27_8', 'lottie_target_27', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Start/End markers\", \"mn\": \"{04a8ef87-75fd-451c-868b-7413969c8ad9}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{078a0bf7-08ce-49f7-9dca-c473ad9ff09d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{efb1ff36-fe2b-4939-97a5-d75a167d003b}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{759da60a-0439-496c-89a9-66e1d721ceb7}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"\", \"mn\": \"{b56ba91b-5ef9-40d2-a1da-27265d105c7a}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{020e377d-646e-45f6-830f-756cfff57aa9}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[3.7994567051676293, -7.097994637365934], [5.33994951436286, -6.707992504500113], [6.327946284594615, -5.609490432573314], [6.672442201680043, -3.952002315682892], [6.672442201680043, -3.262995246756169], [1.901449879997, -3.262995246756169], [2.505949758118953, -1.4624984765244131], [4.124444517362934, -0.8449957342683567], [5.300948539338484, -0.968496282719568], [6.360449636240906, -1.326002681317033], [6.360449636240906, -0.32500304695117377], [5.307446162716568, 0.019500487512187806], [4.072448295582389, 0.12999817182929574], [2.3239477471311782, -0.2729992077926948], [1.1409537191554788, -1.4755013406585165], [0.7184558520213006, -3.4319943936098403], [1.1019527441311032, -5.395000304695118], [2.1809543285457136, -6.655996282719569], [3.7994567051676293, -7.097994637365934]], \"i\": [[0, 0], [-0.4290005687642191, -0.2600014219105473], [-0.22966394472361795, -0.4723332927073187], [0, -0.6326587852196304], [0, 0], [0, 0], [-0.3856627665691641, -0.411668494837371], [-0.69333373959349, 0], [-0.34233512087802254, 0.08233369896747422], [-0.3639989437235931, 0.15600390009750242], [0, 0], [0.34666686979674477, -0.07366512287807196], [0.47666504162604095, 0], [0.506997440561014, 0.2686649197479937], [0.281665244756119, 0.5330031688292207], [0, 0.7713255331383286], [-0.25566459473986836, 0.5459984155853892], [-0.4636697948698716, 0.29466556976424485], [-0.6153317895447388, 0]], \"o\": [[0.5979946373659342, 0], [0.4290005687642182, 0.2600014219105473], [0.22966394472361795, 0.47233329270731783], [0, 0], [0, 0], [0.017337152178804383, 0.7886626853171328], [0.3856627665691641, 0.411668494837371], [0.4420008937723443, 0], [0.34233512087802165, -0.08233369896747411], [0, 0], [-0.35533544588614685, 0.15600390009750242], [-0.34666686979674477, 0.07366512287807195], [-0.6586695917397929, 0], [-0.5069974405610138, -0.26866491974799367], [-0.28166524475611887, -0.5330031688292207], [0, -0.7626721918047954], [0.2556645947398686, -0.5459984155853901], [0.46366979486987203, -0.29466556976424396], [0, 0]]}}}, {\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{b3f5759c-30aa-4352-a4ea-23b71ead28ad}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[3.7864462236555916, -6.162001706292657], [2.4929545113627842, -5.635496160841521], [1.9274556082652068, -4.172997684317108], [5.476452926948174, -4.172997684317108], [5.06045268319208, -5.609498049951249], [3.7864462236555916, -6.162001706292657]], \"i\": [[0, 0], [0.3163344708617717, -0.3510036969674246], [0.06066479786994661, -0.6239952873821846], [0, 0], [0.2686699979999494, 0.36833577089427205], [0.5806676416910426, 0]], \"o\": [[-0.5459933373334334, 0], [-0.3163344708617717, 0.3510036969674246], [0, 0], [-0.008663497837446243, -0.5893311395284879], [-0.2686699979999503, -0.36833577089427205], [0, 0]]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 16]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{e16b0057-203a-4dab-8e5b-495775987f85}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{07bcfe04-40c2-4636-807c-d64982f7a44d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{0de90988-3e53-4e7a-8a7d-cb147d0c42b5}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{22460e65-f67b-48b8-844b-e361867d003b}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[5.645452073801845, -1.923997318682967], [4.891453536338409, -0.39000213286582164], [2.8634485393384836, 0.12999817182929574], [1.608957802070052, 0.013002864134103353], [0.679454876996925, -0.311992565439136], [0.679454876996925, -1.3519931748293708], [1.6869521347408687, -0.968496282719568], [2.8894542676066903, -0.7929995124878122], [4.150450245631141, -1.0724963436585915], [4.540444761119028, -1.820004875121878], [4.3974513425335635, -2.2880013406585165], [3.8839562785944652, -2.7040015844146104], [2.824447564314108, -3.171998049951249], [1.6674516472286809, -3.6919983546463664], [0.9264559738993475, -4.315998720280507], [0.666459630240756, -5.251999268731718], [1.3879548160579016, -6.616995307695193], [3.2794487830945775, -7.097994637365934], [4.468948051826296, -6.9744940889147236], [5.502443420460512, -6.629998171829296], [5.1124489049726245, -5.719995734268357], [4.189443603277582, -6.031995917085427], [3.2014468330458263, -6.162001706292657], [2.128950489387235, -5.934501096902423], [1.7584564614115354, -5.316990737268432], [1.9274556082652068, -4.82950140159754], [2.4929545113627842, -4.439499268731718], [3.552455608265207, -3.9910032907072677], [4.683453414460362, -3.4839982327683194], [5.398450976899423, -2.853500243756094], [5.645452073801845, -1.923997318682967]], \"i\": [[0, 0], [0.5026656916422914, -0.346666869796745], [0.8493376396909924, 0], [0.35099861871546767, 0.07799687179679493], [0.26866999799995006, 0.13866674791869799], [0, 0], [-0.3943313426585666, -0.11699784682117054], [-0.4073367459186481, 0], [-0.2599963436585919, 0.18633122078051945], [0, 0.31200780019500485], [0.09532894572364281, 0.13866674791869782], [0.2470010969024221, 0.13866674791869782], [0.45933804595114847, 0.17333089577239447], [0.32066621978049437, 0.17333597402435075], [0.17333089577239413, 0.24266426973174227], [0, 0.38133609590239725], [-0.48099679054476374, 0.32066621978049437], [-0.779999187479687, 0], [-0.36833577089427294, -0.08233369896747345], [-0.32066114152853853, -0.14733024575614362], [0, 0], [0.32066621978049437, 0.08667052613815329], [0.3379982937073427, 0], [0.24699601865046583, -0.15166707292682258], [0, -0.2600065001625049], [-0.11266609790244764, -0.13433499899997603], [-0.26433317082927044, -0.12566642291057306], [-0.4420008937723443, -0.17333089577239447], [-0.3119976436910923, -0.1733359740243503], [-0.16466739793494867, -0.24699601865046628], [0, -0.3726725980649519]], \"o\": [[0, 0.6759965874146854], [-0.5026656916422914, 0.3466668697967449], [-0.4853285394634863, 0], [-0.3509986187154679, -0.07799687179679493], [0, 0], [0.27733349583739597, 0.13866674791869804], [0.3943313426585664, 0.11699784682117043], [0.5806676416910421, 0], [0.2599963436585915, -0.18633122078051967], [0, -0.17333089577239424], [-0.09532894572364281, -0.13866674791869826], [-0.24700109690242256, -0.13866674791869826], [-0.45066439160979055, -0.17333089577239447], [-0.3206662197804946, -0.1733359740243503], [-0.17333089577239436, -0.24266426973174315], [0, -0.5893311395284879], [0.4809967905447634, -0.3206662197804935], [0.4246637415935397, 0], [0.36833577089427205, 0.08233369896747433], [0, 0], [-0.2946706480162007, -0.12132959573989321], [-0.3206662197804948, -0.08667052613815329], [-0.4680015437885947, 0], [-0.2469960186504665, 0.15166707292682347], [0, 0.1906578914472865], [0.11266609790244786, 0.13433499899997514], [0.26433317082927044, 0.12566642291057306], [0.44200089377234475, 0.16466739793494822], [0.3119976436910914, 0.17333597402435075], [0.16466739793494867, 0.24699601865046583], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 496]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"gs\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}], \"r\": 1, \"s\": {\"a\": 0, \"k\": [256, 496]}, \"e\": {\"a\": 0, \"k\": [256, 16]}, \"t\": 1, \"h\": {\"a\": 0, \"k\": 0}, \"a\": {\"a\": 0, \"k\": 0}, \"g\": {\"p\": 3, \"k\": {\"a\": 0, \"k\": [0, 0.7686274509803922, 0.8509803921568627, 0.9607843137254902, 0.5, 0.19600213626306554, 0.31400015259021896, 0.6899977111467155, 1, 0.16099794003204396, 0.18399328603036547, 0.45900663767452504, 0, 1, 0.5, 1, 1, 1]}}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var gradient = lottie.layers[1].shapes[1]; var start_marker = lottie.layers[0].shapes[1].it[1]; var end_marker = lottie.layers[0].shapes[0].it[1]; gradient.s.k = start_marker.p.k = [data[\"Start X\"], data[\"Start Y\"]]; gradient.e.k = end_marker.p.k = [data[\"End X\"], data[\"End Y\"]]; gradient.t = Number(data[\"Type\"]); if (gradient.t === 2) { gradient.h = { a: 0, k: data[\"Highlight\"] }; gradient.a = { a: 0, k: data[\"Highlight Angle\"] }; } else { delete gradient.h; delete gradient.a; } this.json_viewer_contents = lottie.layers[1].shapes[1]; }, {} ); Modifiers Modifiers change the bezier curves of neighbouring shapes Modifiers replace shapes in the render stack by applying operating on the bezier path of to the collected shapes that come before it in stacking order . Trim Path Trims shapes into a segment Composition Diagram for Trim Path Trim Path Modifier Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'tm' Shape Type Shape Type s Scalar Start Segment start e Scalar End Segment end o Scalar Offset Offset m Trim Multiple Shapes Multiple How to treat multiple copies Start 0 End 50 Offset 0 Multiple Shapes Parallel Sequential var lottie_player_28 = new PlaygroundPlayer( 28, 'playground_28_5', 'lottie_target_28', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [128, 128]}, \"or\": {\"a\": 0, \"k\": 100}, \"ir\": {\"a\": 0, \"k\": 50}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [384, 128]}, \"s\": {\"a\": 0, \"k\": [200, 200]}}, {\"ty\": \"rc\", \"nm\": \"Rect\", \"mn\": \"{0776f2df-2619-415c-b10d-f648f2edfa0f}\", \"d\": 1, \"p\": {\"a\": 0, \"k\": [128, 384]}, \"s\": {\"a\": 0, \"k\": [200, 200]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"sr\", \"nm\": \"Triangle\", \"mn\": \"{db373594-d0ae-44ff-9295-30ff72616af2}\", \"p\": {\"a\": 0, \"k\": [384, 384]}, \"or\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 3}, \"sy\": 2, \"os\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 50}, \"o\": {\"a\": 0, \"k\": 0}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 20}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { lottie.layers[0].shapes[4].s.k = data[\"Start\"]; lottie.layers[0].shapes[4].e.k = data[\"End\"]; lottie.layers[0].shapes[4].o.k = data[\"Offset\"]; lottie.layers[0].shapes[4].m = Number(data[\"Multiple Shapes\"]); this.json_viewer_contents = lottie.layers[0].shapes[4]; }, {} ); When rendering trim path, the order of bezier points MUST be the same as rendering instructions given for each shape in this section. Rendering trim path can be rather complex. Given o f f s e t = { o 360 \u2212 \u230a o 360 \u230b o \u2265 0 o 360 \u2212 \u2308 o 360 \u2309 o < 0 s t a r t = o f f s e t + min ( 1 , max ( 0 , min ( s , e ) 100 ) ) e n d = o f f s e t + min ( 1 , max ( 0 , max ( s , e ) 100 ) ) If s and e are equal, implementations MUST NOT render any shapes. If s = 0 and e = 1 , the input shape MUST be rendered as-is. To render trim path, implementations MUST consider the actual length of each shape (they MAY use approximations). Once the shapes are collected, the segment to render is given by the percentages s t a r t and e n d . When trim path is applied to multiple shapes, the m property MUST be considered when applying the modifier: When m has a value of 1 (Parallel), each shape MUST considered separately, s t a r t and e n d being applied to each shape. When m has a value of 2 (Sequential), all the shapes MUST be considered as following each other in render order. s t a r t and e n d refer to the whole length created by concatenating each shape.","title":"Shapes"},{"location":"specs/shapes/#shapes","text":"The graphical elements are divided in 4 categories: Shapes that define the actual curves but have no styling information Grouping , used to organize collections of graphic elements Styles , that define the visual appearance of shapes Modifiers alter the curves of the shapes","title":"Shapes"},{"location":"specs/shapes/#shape-rendering-model","text":"","title":"Shape Rendering Model"},{"location":"specs/shapes/#grouping-and-ordering-rules","text":"Shapes are rendered in reverse order, bottom->top. Shapes at the beginning of the array are rendered on top of shapes with larger indices. Groups offer a scoping mechanism for transforms, styles, modifiers, and shapes. All group children, including sub-groups and their children, are considered part of the group's scope. Transforms adjust the coordinate system for all elements within their group, and transitively for all other group-nested elements. Styles and modifiers apply to all preceding shapes within the current scope, including subgroup-nested shapes. When multiple styles apply to the same shape, the shape is rendered repeatedly for each style, in reverse order. When multiple modifiers apply to the same shape, they are composed in reverse order (e.g. T r i m ( T r i m ( s h a p e ) ) ). When multiple transforms apply to the same shape due to scope nesting, they compose in group nesting order (transforms are additive). Group opacity (property of the group transform) applies atomically to all elements in scope - i.e. opacity applies to the result of compositing all group content, and not to individual elements. More formally: for each ( s h a p e , s t y l e ) tuple, where I n d e x ( s h a p e ) < I n d e x ( s t y l e ) and s h a p e \u2208 S c o p e ( s t y l e ) : for each m o d i f i e r , in increasing index order, where I n d e x ( s h a p e ) < I n d e x ( m o d i f i e r ) and s h a p e \u2208 S c o p e ( m o d i f i e r ) : s h a p e = m o d i f i e r ( s h a p e ) compute the total shape transformation by composing all transforms within the shape scope chain: \u0002 k l z z w x h : 0433 \u0003 compute the total style transformation by composing all transforms within the style scope chain: \u0002 k l z z w x h : 0441 \u0003 R e n d e r ( s h a p e \u00d7 T s h a p e , s t y l e \u00d7 T s t y l e )","title":"Grouping and Ordering Rules"},{"location":"specs/shapes/#notes","text":"Certain modifier operations (e.g. sequential T r i m ) may require information about shapes from different groups, thus R e n d e r ( ) calls cannot always be issued based on single-pass local knowledge. Transforms can affect both shapes and styles (e.g. stroke width). For a given ( s h a p e , s t y l e ) , the shape and style transforms are not necessarily equal. Shapes without an applicable style are not rendered. This rendering model is based on AfterEffects' Shape Layer semantics.","title":"Notes"},{"location":"specs/shapes/#rendering-convention","text":"Shapes defined in this section contain rendering instructions. These instructions are used to generate the path as a bezier curve. Implementations MAY use different algorithms or primitives to render the shapes but the result MUST be equivalent to the paths defined here. Some instructions define named values for clarity and illustrative purposes, implementations are not required to have them explicitly defined in their rendering process. When referencing animated properties, the rendering instruction will use the same name as in the JSON but it's assumed they refer to their value at a given point in time rather than the property itself. For Vector values, v a l u e . x and v a l u e . y in the instructions are equivalent to value[0] and value[1] respectively. All paths MUST be closed unless specified otherwise in the rendering instructions. When instructions call for an equality comparison between two values, implementations MAY consider similar values to be equal to overcome numerical instability.","title":"Rendering Convention"},{"location":"specs/shapes/#drawing-commands","text":"Drawing instructions will contain the following commands: add vertex : Adds a vertex to the bezier shape in global coordinates set in tangent : Sets the cubic tangent to the last added vertex, with coordinates relative to it. If omitted, tangents MUST be ( 0 , 0 ) . set out tangent : Sets the cubic tangent from the last added vertex, with coordinates relative to it. If omitted, tangents MUST be ( 0 , 0 ) . lerp : Linearly interpolates two points or scalars by a given amount.","title":"Drawing Commands"},{"location":"specs/shapes/#approximating-ellipses-with-cubic-bezier","text":"An elliptical quadrant can be approximated by a cubic bezier segment with tangents of length $radius \\cdot E_t. Where E t \u2248 0.5519150244935105707435627 See this article for the math behind it. When implementations render elliptical arcs using bezier curves, they SHOULD use this constant, a similar approximation, or elliptical arc drawing primitives.","title":"Approximating Ellipses with Cubic Bezier"},{"location":"specs/shapes/#graphic-element","text":"Element used to display vector data in a shape layer Composition Diagram for Graphic Element Graphic Element Visual Object Group Shape Style Fill Gradient Stroke Gradient Stroke Shape PolyStar Path Rectangle Ellipse Transform Shape Modifier Trim Path Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string Shape Type Shape Type The ty property defines the specific element type based on the following values: ty Type 'el' Ellipse 'fl' Fill 'gf' Gradient 'gs' Gradient Stroke 'gr' Group 'sh' Path 'sr' PolyStar 'rc' Rectangle 'st' Stroke 'tr' Transform Shape 'tm' Trim Path None Unknown shape types Hidden shapes ( hd: True ) are ignored, and do not contribute to rendering nor modifier operations.","title":"Graphic Element"},{"location":"specs/shapes/#shape","text":"Drawable shape, defines the actual shape but not the style Composition Diagram for Shape Shape Graphic Element Visual Object PolyStar Path Rectangle Ellipse Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path","title":"Shapes"},{"location":"specs/shapes/#ellipse","text":"Ellipse shape Composition Diagram for Ellipse Ellipse Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'el' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Position s Vector Size Size Example Position x 256 Position y 256 Width 256 Height 256 var lottie_player_19 = new PlaygroundPlayer( 19, 'playground_19_5', 'lottie_target_19', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Group\", \"it\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [256, 256]}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[0].shapes[0].it[0].p.k = [ data[\"Position x\"], data[\"Position y\"] ]; lottie.layers[0].shapes[0].it[0].s.k = [ data[\"Width\"], data[\"Height\"] ]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); An ellipse is drawn from the top quandrant point going clockwise: r a d i u s = s 2 t a n g e n t = r a d i u s \u00b7 E t x = p . x y = p . y Add vertex ( x , y \u2212 r a d i u s . y ) Set in tangent ( \u2212 t a n g e n t . x , 0 ) Set out tangent ( t a n g e n t . x , 0 ) Add vertex ( x + r a d i u s . x , y ) Set in tangent ( 0 , \u2212 t a n g e n t . y ) Set out tangent ( 0 , t a n g e n t . y ) Add vertex ( x , y + r a d i u s . y ) Set in tangent ( t a n g e n t . x , 0 ) Set out tangent ( \u2212 t a n g e n t . x , 0 ) Add vertex ( x \u2212 r a d i u s . x , y ) Set in tangent ( 0 , t a n g e n t . y ) Set out tangent ( 0 , \u2212 t a n g e n t . y ) Implementations MAY use elliptical arcs to render an ellipse.","title":"Ellipse"},{"location":"specs/shapes/#rectangle","text":"A simple rectangle shape Composition Diagram for Rectangle Rectangle Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'rc' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Center of the rectangle s Vector Size Size r Scalar Rounded Rounded corners radius Example Position x 256 Position y 256 Width 256 Height 256 Roundness 0 var lottie_player_20 = new PlaygroundPlayer( 20, 'playground_20_6', 'lottie_target_20', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Group\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [256, 256]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[0].shapes[0].it[0].p.k = [ data[\"Position x\"], data[\"Position y\"] ]; lottie.layers[0].shapes[0].it[0].s.k = [ data[\"Width\"], data[\"Height\"] ]; lottie.layers[0].shapes[0].it[0].r.k = data[\"Roundness\"]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); Definitions: l e f t = p . x \u2212 s . x 2 r i g h t = p . x + s . x 2 t o p = p . y \u2212 s . y 2 b o t t o m = p . y + s . y 2 If r = 0 , then the rectangle is rendered from the top-right going clockwise: Add vertex ( r i g h t , t o p ) Add vertex ( r i g h t , b o t t o m ) Add vertex ( l e f t , b o t t o m ) Add vertex ( l e f t , t o p ) If r > 0 , the rounded corners must be taken into account. r o u n d e d = min ( s . x 2 , s . y 2 , r ) t a n g e n t = r o u n d e d \u00b7 E t Add vertex ( r i g h t , t o p + r o u n d e d ) Set in tangent ( 0 , \u2212 t a n g e n t ) Add vertex ( r i g h t , b o t t o m \u2212 r o u n d e d ) Set out tangent ( 0 , t a n g e n t ) Add vertex ( r i g h t \u2212 r o u n d e d , b o t t o m ) Set in tangent ( t a n g e n t , 0 ) Add vertex ( l e f t + r o u n d e d , b o t t o m ) Set out tangent ( \u2212 t a n g e n t , 0 ) Add vertex ( l e f t , b o t t o m \u2212 r o u n d e d ) Set in tangent ( 0 , t a n g e n t ) Add vertex ( l e f t , t o p + r o u n d e d ) Set out tangent ( 0 , \u2212 t a n g e n t ) Add vertex ( l e f t + r o u n d e d , t o p ) Set in tangent ( \u2212 t a n g e n t , 0 ) Add vertex ( r i g h t \u2212 r o u n d e d , t o p ) Set out tangent ( t a n g e n t , 0 )","title":"Rectangle"},{"location":"specs/shapes/#path","text":"Custom Bezier shape Composition Diagram for Path Path Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'sh' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path ks Bezier Shape Bezier path Example Shape var lottie_player_21 = new PlaygroundPlayer( 21, 'playground_21_2', 'lottie_target_21', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"ao\": 0, \"ks\": {\"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ty\": \"sh\", \"d\": 1, \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[253, 147], [56, 153], [253, 409], [450, 153]], \"i\": [[12, -57], [42, -112], [-16, -18], [46, 123]], \"o\": [[-17, -61], [-46, 125], [16, -14], [-43, -115]]}}}, {\"ty\": \"st\", \"o\": {\"a\": 0, \"k\": 100}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}]}, function (lottie, data) { var shape = lottie.layers[0].shapes[0].it[0]; if ( data[\"Shape\"] ) shape.ks.k = data[\"Shape\"]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); var playground_21_1_playground = document.getElementById(\"playground_21_1_playground\"); playground_21_1_playground.name = playground_21_1_playground.getAttribute(\"name\"); var playground_21_1_playground_editor = BezierPreviewEditor.stand_alone( playground_21_1_playground, (lottie) => { playground_21_1_playground.value = lottie; lottie_player_21.reload(); }, null, 512, 512 );","title":"Path"},{"location":"specs/shapes/#polystar","text":"Star or regular polygon Composition Diagram for PolyStar PolyStar Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'sr' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Position or Scalar Outer Radius Outer Radius os Scalar Outer Roundness Outer Roundness as a percentage r Scalar Rotation Rotation, clockwise in degrees pt Scalar Points Points sy Star Type Star Type Star Type ir Scalar Inner Radius Inner Radius is Scalar Inner Roundness Inner Roundness as a percentage Example Position x 256 Position y 256 Points 5 Rotation 0 Outer Radius 200 Inner Radius 100 Outer Roundness 0 Inner Roundness 0 Star Type Star Polygon var lottie_player_22 = new PlaygroundPlayer( 22, 'playground_22_10', 'lottie_target_22', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"layers\": [{\"ty\": 4, \"ddd\": 0, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ip\": 0, \"op\": 180, \"ind\": 0, \"st\": 0, \"sr\": 1, \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{9199543e-3552-4e51-a802-623f2a4a2ca1}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.979995422293431, 0.28000305180437934]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var star = { \"ty\": \"sr\", \"nm\": \"PolyStar\", \"sy\": Number(data[\"Star Type\"]), \"p\": { \"a\": 0, \"k\": [data[\"Position x\"], data[\"Position y\"]] }, \"r\": { \"a\": 0, \"k\": data[\"Rotation\"] }, \"pt\": { \"a\": 0, \"k\": data[\"Points\"] }, \"or\": { \"a\": 0, \"k\": data[\"Outer Radius\"] }, \"os\": { \"a\": 0, \"k\": data[\"Outer Roundness\"] }, }; if ( data[\"Star Type\"] == \"1\" ) { star = { ...star, \"ir\": { \"a\": 0, \"k\": data[\"Inner Radius\"] }, \"is\": { \"a\": 0, \"k\": data[\"Inner Roundness\"] }, }; } lottie.layers[0].shapes[0].it[0] = star; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); Definitions: p o i n t s = \u230a p t \u2309 \u03b8 = \u03c0 p o i n t s \u03b1 = \u03c0 180 \u00b7 r t a n o u t = o s 100 \u00b7 o r \u00b7 2 \u03c0 p o i n t s \u00b7 4 t a n i n = i s 100 \u00b7 i r \u00b7 2 \u03c0 p o i n t s \u00b7 4 For i in [ 0 , p o i n t s ) Let \u03b2 = \u2212 \u03c0 2 + \u03b1 + i \u00b7 2 \u03b8 \u02d9 Let V o u t = ( o r \u00b7 cos ( \u03b2 ) , o r \u00b7 sin ( \u03b2 ) ) Add vertex p + V o u t If o r \u2260 0 , we need to add bezier tangent Let T o u t = ( V o u t \u00b7 t a n o u t o r ) Set in tangent V o u t Set out tangent \u2212 V o u t If s y = 1 , we need to add a vertex towards the inner radius to make a star Let V i n = ( i r \u00b7 cos ( \u03b2 + \u03b8 ) , o r \u00b7 sin ( \u03b2 + \u03b8 ) ) Add vertex p + V i n If i r \u2260 0 , we need to add bezier tangent Let T i n = ( V i n \u00b7 t a n i n o r ) Set in tangent V i n Set out tangent \u2212 V i n","title":"PolyStar"},{"location":"specs/shapes/#grouping","text":"","title":"Grouping"},{"location":"specs/shapes/#group","text":"Shape Element that can contain other shapes Composition Diagram for Group Group Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'gr' Shape Type Shape Type np number Number Of Properties Number Of Properties it array of Graphic Element Shapes Shapes A group defines a render stack , elements within a group MUST be rendered in reverse order (the first object in the list will appear on top of elements further down). Apply the transform Render Styles and child groups in the transformed coordinate system .","title":"Group"},{"location":"specs/shapes/#transform","text":"Group transform Composition Diagram for Transform Shape Transform Shape Graphic Element Transform Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'tr' Shape Type Shape Type a Position Anchor Point Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale) p Splittable Position Position Position / Translation r Scalar Rotation Rotation in degrees, clockwise s Vector Scale Scale factor, [100, 100] for no scaling o Scalar Opacity Opacity sk Scalar Skew Skew amount as an angle in degrees sa Scalar Skew Axis Direction along which skew is applied, in degrees ( 0 skews along the X axis, 90 along the Y axis) Transform shapes MUST always be present in the group and they MUST be the last item in the it array. They modify the group's coordinate system the same way as Layer Transform .","title":"Transform"},{"location":"specs/shapes/#shape-style","text":"Describes the visual appearance (like fill and stroke) of neighbouring shapes Composition Diagram for Shape Style Shape Style Graphic Element Visual Object Fill Gradient Stroke Gradient Stroke Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque Shapes styles MUST apply their style to the collected shapes that come before them in stacking order .","title":"Style"},{"location":"specs/shapes/#fill","text":"Solid fill color Composition Diagram for Fill Fill Shape Style Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'fl' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque c Color Color Color r Fill Rule Fill Rule Fill Rule Example Red 1 Green 0.98 Blue 0.28 Opacity 100 Fill Rule Non Zero Even Odd var lottie_player_23 = new PlaygroundPlayer( 23, 'playground_23_6', 'lottie_target_23', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{f5d94f54-bb8f-4f07-be45-232ebd4b9eb1}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{4b0993ed-e35b-48a5-ab12-687dbc147c7c}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Path\", \"mn\": \"{29196ff2-0a65-48b4-a450-f9fbc3a3640d}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"Path\", \"mn\": \"{bb7e6c60-755e-4a21-a7ba-bd054feab5c7}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[125.51641791044776, 452.20298507462684], [240.71641791044777, 38.6865671641791], [435.8686567164179, 447.9044776119403], [42.125373134328356, 173.65970149253732], [460.8, 156.46567164179103]], \"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"p\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[0].it[1]; shape.c.k = [data[\"Red\"], data[\"Green\"], data[\"Blue\"]]; shape.o.k = data[\"Opacity\"]; shape.r = Number(data[\"Fill Rule\"]); this.json_viewer_contents = lottie.layers[0].shapes[0].it[1]; }, {} );","title":"Fill"},{"location":"specs/shapes/#stroke","text":"Solid stroke Composition Diagram for Stroke Stroke Shape Style Base Stroke Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'st' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque lc Line Cap Line Cap Line Cap lj Line Join Line Join Line Join ml number Miter Limit Miter Limit ml2 Scalar Miter Limit Animatable alternative to ml w Scalar Width Stroke width d array of Stroke Dash Dashes Dashed line definition c Color Color Stroke color Example Red 1 Green 0.98 Blue 0.28 Width 32 Opacity 100 Line Cap Butt Round Square Line Join Miter Round Bevel Miter Limit 3 var lottie_player_24 = new PlaygroundPlayer( 24, 'playground_24_9', 'lottie_target_24', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.c.k = [data[\"Red\"], data[\"Green\"], data[\"Blue\"]]; shape.o.k = data[\"Opacity\"]; shape.w.k = data[\"Width\"]; shape.lc = Number(data[\"Line Cap\"]); shape.lj = Number(data[\"Line Join\"]); shape.ml = data[\"Miter Limit\"]; shape.d = undefined; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} );","title":"Stroke"},{"location":"specs/shapes/#stroke-dash","text":"An item used to described the dash pattern in a stroked path Composition Diagram for Stroke Dash Stroke Dash Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like n Stroke Dash Type Dash Type Dash Type v Scalar Length Length of the dash Example Red 1 Green 0.98 Blue 0.28 Width 32 Opacity 100 Line Cap Butt Round Square Line Join Miter Round Bevel Miter Limit 3 Dash Offset 0 Dash Length 30 Dash Gap 50 var lottie_player_25 = new PlaygroundPlayer( 25, 'playground_25_12', 'lottie_target_25', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.c.k = [data[\"Red\"], data[\"Green\"], data[\"Blue\"]]; shape.o.k = data[\"Opacity\"]; shape.w.k = data[\"Width\"]; shape.lc = Number(data[\"Line Cap\"]); shape.lj = Number(data[\"Line Join\"]); shape.ml = data[\"Miter Limit\"]; shape.d[0].v.k = data[\"Dash Offset\"]; shape.d[1].v.k = data[\"Dash Length\"]; shape.d[2].v.k = data[\"Dash Gap\"]; var trim = lottie.layers[0].shapes[1]; trim.e.k = 100; trim.o.k = 0; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} );","title":"Stroke Dashes"},{"location":"specs/shapes/#gradient-fill","text":"Gradient fill color Composition Diagram for Gradient Gradient Shape Style Base Gradient Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'gf' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque g Gradient Colors Gradient colors s Position Start Point Starting point for the gradient e Position End Point End point for the gradient t Gradient Type Gradient Type Type of the gradient h Scalar Highlight Length Highlight Length, as a percentage between s and e a Scalar Highlight Angle Highlight Angle in clockwise degrees, relative to the direction from s to e r Fill Rule Fill Rule Fill Rule Example Start X 256 Start Y 496 End X 256 End Y 16 Type Linear Radial Highlight 0 Highlight Angle 0 var lottie_player_26 = new PlaygroundPlayer( 26, 'playground_26_8', 'lottie_target_26', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{3da63a46-0ec5-45b8-90fb-d31c5614d5be}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Start/End markers\", \"mn\": \"{04a8ef87-75fd-451c-868b-7413969c8ad9}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{078a0bf7-08ce-49f7-9dca-c473ad9ff09d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{efb1ff36-fe2b-4939-97a5-d75a167d003b}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{759da60a-0439-496c-89a9-66e1d721ceb7}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"\", \"mn\": \"{b56ba91b-5ef9-40d2-a1da-27265d105c7a}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{020e377d-646e-45f6-830f-756cfff57aa9}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[3.7994567051676293, -7.097994637365934], [5.33994951436286, -6.707992504500113], [6.327946284594615, -5.609490432573314], [6.672442201680043, -3.952002315682892], [6.672442201680043, -3.262995246756169], [1.901449879997, -3.262995246756169], [2.505949758118953, -1.4624984765244131], [4.124444517362934, -0.8449957342683567], [5.300948539338484, -0.968496282719568], [6.360449636240906, -1.326002681317033], [6.360449636240906, -0.32500304695117377], [5.307446162716568, 0.019500487512187806], [4.072448295582389, 0.12999817182929574], [2.3239477471311782, -0.2729992077926948], [1.1409537191554788, -1.4755013406585165], [0.7184558520213006, -3.4319943936098403], [1.1019527441311032, -5.395000304695118], [2.1809543285457136, -6.655996282719569], [3.7994567051676293, -7.097994637365934]], \"i\": [[0, 0], [-0.4290005687642191, -0.2600014219105473], [-0.22966394472361795, -0.4723332927073187], [0, -0.6326587852196304], [0, 0], [0, 0], [-0.3856627665691641, -0.411668494837371], [-0.69333373959349, 0], [-0.34233512087802254, 0.08233369896747422], [-0.3639989437235931, 0.15600390009750242], [0, 0], [0.34666686979674477, -0.07366512287807196], [0.47666504162604095, 0], [0.506997440561014, 0.2686649197479937], [0.281665244756119, 0.5330031688292207], [0, 0.7713255331383286], [-0.25566459473986836, 0.5459984155853892], [-0.4636697948698716, 0.29466556976424485], [-0.6153317895447388, 0]], \"o\": [[0.5979946373659342, 0], [0.4290005687642182, 0.2600014219105473], [0.22966394472361795, 0.47233329270731783], [0, 0], [0, 0], [0.017337152178804383, 0.7886626853171328], [0.3856627665691641, 0.411668494837371], [0.4420008937723443, 0], [0.34233512087802165, -0.08233369896747411], [0, 0], [-0.35533544588614685, 0.15600390009750242], [-0.34666686979674477, 0.07366512287807195], [-0.6586695917397929, 0], [-0.5069974405610138, -0.26866491974799367], [-0.28166524475611887, -0.5330031688292207], [0, -0.7626721918047954], [0.2556645947398686, -0.5459984155853901], [0.46366979486987203, -0.29466556976424396], [0, 0]]}}}, {\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{b3f5759c-30aa-4352-a4ea-23b71ead28ad}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[3.7864462236555916, -6.162001706292657], [2.4929545113627842, -5.635496160841521], [1.9274556082652068, -4.172997684317108], [5.476452926948174, -4.172997684317108], [5.06045268319208, -5.609498049951249], [3.7864462236555916, -6.162001706292657]], \"i\": [[0, 0], [0.3163344708617717, -0.3510036969674246], [0.06066479786994661, -0.6239952873821846], [0, 0], [0.2686699979999494, 0.36833577089427205], [0.5806676416910426, 0]], \"o\": [[-0.5459933373334334, 0], [-0.3163344708617717, 0.3510036969674246], [0, 0], [-0.008663497837446243, -0.5893311395284879], [-0.2686699979999503, -0.36833577089427205], [0, 0]]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 16]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{e16b0057-203a-4dab-8e5b-495775987f85}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{07bcfe04-40c2-4636-807c-d64982f7a44d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{0de90988-3e53-4e7a-8a7d-cb147d0c42b5}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{22460e65-f67b-48b8-844b-e361867d003b}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[5.645452073801845, -1.923997318682967], [4.891453536338409, -0.39000213286582164], [2.8634485393384836, 0.12999817182929574], [1.608957802070052, 0.013002864134103353], [0.679454876996925, -0.311992565439136], [0.679454876996925, -1.3519931748293708], [1.6869521347408687, -0.968496282719568], [2.8894542676066903, -0.7929995124878122], [4.150450245631141, -1.0724963436585915], [4.540444761119028, -1.820004875121878], [4.3974513425335635, -2.2880013406585165], [3.8839562785944652, -2.7040015844146104], [2.824447564314108, -3.171998049951249], [1.6674516472286809, -3.6919983546463664], [0.9264559738993475, -4.315998720280507], [0.666459630240756, -5.251999268731718], [1.3879548160579016, -6.616995307695193], [3.2794487830945775, -7.097994637365934], [4.468948051826296, -6.9744940889147236], [5.502443420460512, -6.629998171829296], [5.1124489049726245, -5.719995734268357], [4.189443603277582, -6.031995917085427], [3.2014468330458263, -6.162001706292657], [2.128950489387235, -5.934501096902423], [1.7584564614115354, -5.316990737268432], [1.9274556082652068, -4.82950140159754], [2.4929545113627842, -4.439499268731718], [3.552455608265207, -3.9910032907072677], [4.683453414460362, -3.4839982327683194], [5.398450976899423, -2.853500243756094], [5.645452073801845, -1.923997318682967]], \"i\": [[0, 0], [0.5026656916422914, -0.346666869796745], [0.8493376396909924, 0], [0.35099861871546767, 0.07799687179679493], [0.26866999799995006, 0.13866674791869799], [0, 0], [-0.3943313426585666, -0.11699784682117054], [-0.4073367459186481, 0], [-0.2599963436585919, 0.18633122078051945], [0, 0.31200780019500485], [0.09532894572364281, 0.13866674791869782], [0.2470010969024221, 0.13866674791869782], [0.45933804595114847, 0.17333089577239447], [0.32066621978049437, 0.17333597402435075], [0.17333089577239413, 0.24266426973174227], [0, 0.38133609590239725], [-0.48099679054476374, 0.32066621978049437], [-0.779999187479687, 0], [-0.36833577089427294, -0.08233369896747345], [-0.32066114152853853, -0.14733024575614362], [0, 0], [0.32066621978049437, 0.08667052613815329], [0.3379982937073427, 0], [0.24699601865046583, -0.15166707292682258], [0, -0.2600065001625049], [-0.11266609790244764, -0.13433499899997603], [-0.26433317082927044, -0.12566642291057306], [-0.4420008937723443, -0.17333089577239447], [-0.3119976436910923, -0.1733359740243503], [-0.16466739793494867, -0.24699601865046628], [0, -0.3726725980649519]], \"o\": [[0, 0.6759965874146854], [-0.5026656916422914, 0.3466668697967449], [-0.4853285394634863, 0], [-0.3509986187154679, -0.07799687179679493], [0, 0], [0.27733349583739597, 0.13866674791869804], [0.3943313426585664, 0.11699784682117043], [0.5806676416910421, 0], [0.2599963436585915, -0.18633122078051967], [0, -0.17333089577239424], [-0.09532894572364281, -0.13866674791869826], [-0.24700109690242256, -0.13866674791869826], [-0.45066439160979055, -0.17333089577239447], [-0.3206662197804946, -0.1733359740243503], [-0.17333089577239436, -0.24266426973174315], [0, -0.5893311395284879], [0.4809967905447634, -0.3206662197804935], [0.4246637415935397, 0], [0.36833577089427205, 0.08233369896747433], [0, 0], [-0.2946706480162007, -0.12132959573989321], [-0.3206662197804948, -0.08667052613815329], [-0.4680015437885947, 0], [-0.2469960186504665, 0.15166707292682347], [0, 0.1906578914472865], [0.11266609790244786, 0.13433499899997514], [0.26433317082927044, 0.12566642291057306], [0.44200089377234475, 0.16466739793494822], [0.3119976436910914, 0.17333597402435075], [0.16466739793494867, 0.24699601865046583], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 496]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{a5276bb6-4d7c-4b4f-b371-a0e14a279176}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Gradient\", \"mn\": \"{9df3ba96-24a3-412e-abd4-e64e2e76e6df}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{20934ad0-1c22-4752-a5b1-be99889ea79a}\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [512, 512]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"gf\", \"nm\": \"Gradient Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"r\": 1, \"s\": {\"a\": 0, \"k\": [256, 496]}, \"e\": {\"a\": 0, \"k\": [256, 16]}, \"t\": 1, \"h\": {\"a\": 0, \"k\": 0}, \"a\": {\"a\": 0, \"k\": 0}, \"g\": {\"p\": 3, \"k\": {\"a\": 0, \"k\": [0, 0.7686274509803922, 0.8509803921568627, 0.9607843137254902, 0.5, 0.19600213626306554, 0.31400015259021896, 0.6899977111467155, 1, 0.16099794003204396, 0.18399328603036547, 0.45900663767452504, 0, 1, 0.5, 1, 1, 1]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"p\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var gradient = lottie.layers[1].shapes[0].it[1]; var start_marker = lottie.layers[0].shapes[1].it[1]; var end_marker = lottie.layers[0].shapes[0].it[1]; gradient.s.k = start_marker.p.k = [data[\"Start X\"], data[\"Start Y\"]]; gradient.e.k = end_marker.p.k = [data[\"End X\"], data[\"End Y\"]]; gradient.t = Number(data[\"Type\"]); if (gradient.t === 2) { gradient.h = { a: 0, k: data[\"Highlight\"] }; gradient.a = { a: 0, k: data[\"Highlight Angle\"] }; } else { delete gradient.h; delete gradient.a; } this.json_viewer_contents = lottie.layers[1].shapes[0].it[1]; }, {} );","title":"Gradient Fill"},{"location":"specs/shapes/#gradient-stroke","text":"Gradient stroke Composition Diagram for Gradient Stroke Gradient Stroke Shape Style Base Stroke Base Gradient Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'gs' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque lc Line Cap Line Cap Line Cap lj Line Join Line Join Line Join ml number Miter Limit Miter Limit ml2 Scalar Miter Limit Animatable alternative to ml w Scalar Width Stroke width d array of Stroke Dash Dashes Dashed line definition g Gradient Colors Gradient colors s Position Start Point Starting point for the gradient e Position End Point End point for the gradient t Gradient Type Gradient Type Type of the gradient h Scalar Highlight Length Highlight Length, as a percentage between s and e a Scalar Highlight Angle Highlight Angle in clockwise degrees, relative to the direction from s to e Example Start X 256 Start Y 496 End X 256 End Y 16 Type Linear Radial Highlight 0 Highlight Angle 0 var lottie_player_27 = new PlaygroundPlayer( 27, 'playground_27_8', 'lottie_target_27', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Start/End markers\", \"mn\": \"{04a8ef87-75fd-451c-868b-7413969c8ad9}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{078a0bf7-08ce-49f7-9dca-c473ad9ff09d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{efb1ff36-fe2b-4939-97a5-d75a167d003b}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{759da60a-0439-496c-89a9-66e1d721ceb7}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"\", \"mn\": \"{b56ba91b-5ef9-40d2-a1da-27265d105c7a}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{020e377d-646e-45f6-830f-756cfff57aa9}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[3.7994567051676293, -7.097994637365934], [5.33994951436286, -6.707992504500113], [6.327946284594615, -5.609490432573314], [6.672442201680043, -3.952002315682892], [6.672442201680043, -3.262995246756169], [1.901449879997, -3.262995246756169], [2.505949758118953, -1.4624984765244131], [4.124444517362934, -0.8449957342683567], [5.300948539338484, -0.968496282719568], [6.360449636240906, -1.326002681317033], [6.360449636240906, -0.32500304695117377], [5.307446162716568, 0.019500487512187806], [4.072448295582389, 0.12999817182929574], [2.3239477471311782, -0.2729992077926948], [1.1409537191554788, -1.4755013406585165], [0.7184558520213006, -3.4319943936098403], [1.1019527441311032, -5.395000304695118], [2.1809543285457136, -6.655996282719569], [3.7994567051676293, -7.097994637365934]], \"i\": [[0, 0], [-0.4290005687642191, -0.2600014219105473], [-0.22966394472361795, -0.4723332927073187], [0, -0.6326587852196304], [0, 0], [0, 0], [-0.3856627665691641, -0.411668494837371], [-0.69333373959349, 0], [-0.34233512087802254, 0.08233369896747422], [-0.3639989437235931, 0.15600390009750242], [0, 0], [0.34666686979674477, -0.07366512287807196], [0.47666504162604095, 0], [0.506997440561014, 0.2686649197479937], [0.281665244756119, 0.5330031688292207], [0, 0.7713255331383286], [-0.25566459473986836, 0.5459984155853892], [-0.4636697948698716, 0.29466556976424485], [-0.6153317895447388, 0]], \"o\": [[0.5979946373659342, 0], [0.4290005687642182, 0.2600014219105473], [0.22966394472361795, 0.47233329270731783], [0, 0], [0, 0], [0.017337152178804383, 0.7886626853171328], [0.3856627665691641, 0.411668494837371], [0.4420008937723443, 0], [0.34233512087802165, -0.08233369896747411], [0, 0], [-0.35533544588614685, 0.15600390009750242], [-0.34666686979674477, 0.07366512287807195], [-0.6586695917397929, 0], [-0.5069974405610138, -0.26866491974799367], [-0.28166524475611887, -0.5330031688292207], [0, -0.7626721918047954], [0.2556645947398686, -0.5459984155853901], [0.46366979486987203, -0.29466556976424396], [0, 0]]}}}, {\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{b3f5759c-30aa-4352-a4ea-23b71ead28ad}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[3.7864462236555916, -6.162001706292657], [2.4929545113627842, -5.635496160841521], [1.9274556082652068, -4.172997684317108], [5.476452926948174, -4.172997684317108], [5.06045268319208, -5.609498049951249], [3.7864462236555916, -6.162001706292657]], \"i\": [[0, 0], [0.3163344708617717, -0.3510036969674246], [0.06066479786994661, -0.6239952873821846], [0, 0], [0.2686699979999494, 0.36833577089427205], [0.5806676416910426, 0]], \"o\": [[-0.5459933373334334, 0], [-0.3163344708617717, 0.3510036969674246], [0, 0], [-0.008663497837446243, -0.5893311395284879], [-0.2686699979999503, -0.36833577089427205], [0, 0]]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 16]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{e16b0057-203a-4dab-8e5b-495775987f85}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{07bcfe04-40c2-4636-807c-d64982f7a44d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{0de90988-3e53-4e7a-8a7d-cb147d0c42b5}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{22460e65-f67b-48b8-844b-e361867d003b}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[5.645452073801845, -1.923997318682967], [4.891453536338409, -0.39000213286582164], [2.8634485393384836, 0.12999817182929574], [1.608957802070052, 0.013002864134103353], [0.679454876996925, -0.311992565439136], [0.679454876996925, -1.3519931748293708], [1.6869521347408687, -0.968496282719568], [2.8894542676066903, -0.7929995124878122], [4.150450245631141, -1.0724963436585915], [4.540444761119028, -1.820004875121878], [4.3974513425335635, -2.2880013406585165], [3.8839562785944652, -2.7040015844146104], [2.824447564314108, -3.171998049951249], [1.6674516472286809, -3.6919983546463664], [0.9264559738993475, -4.315998720280507], [0.666459630240756, -5.251999268731718], [1.3879548160579016, -6.616995307695193], [3.2794487830945775, -7.097994637365934], [4.468948051826296, -6.9744940889147236], [5.502443420460512, -6.629998171829296], [5.1124489049726245, -5.719995734268357], [4.189443603277582, -6.031995917085427], [3.2014468330458263, -6.162001706292657], [2.128950489387235, -5.934501096902423], [1.7584564614115354, -5.316990737268432], [1.9274556082652068, -4.82950140159754], [2.4929545113627842, -4.439499268731718], [3.552455608265207, -3.9910032907072677], [4.683453414460362, -3.4839982327683194], [5.398450976899423, -2.853500243756094], [5.645452073801845, -1.923997318682967]], \"i\": [[0, 0], [0.5026656916422914, -0.346666869796745], [0.8493376396909924, 0], [0.35099861871546767, 0.07799687179679493], [0.26866999799995006, 0.13866674791869799], [0, 0], [-0.3943313426585666, -0.11699784682117054], [-0.4073367459186481, 0], [-0.2599963436585919, 0.18633122078051945], [0, 0.31200780019500485], [0.09532894572364281, 0.13866674791869782], [0.2470010969024221, 0.13866674791869782], [0.45933804595114847, 0.17333089577239447], [0.32066621978049437, 0.17333597402435075], [0.17333089577239413, 0.24266426973174227], [0, 0.38133609590239725], [-0.48099679054476374, 0.32066621978049437], [-0.779999187479687, 0], [-0.36833577089427294, -0.08233369896747345], [-0.32066114152853853, -0.14733024575614362], [0, 0], [0.32066621978049437, 0.08667052613815329], [0.3379982937073427, 0], [0.24699601865046583, -0.15166707292682258], [0, -0.2600065001625049], [-0.11266609790244764, -0.13433499899997603], [-0.26433317082927044, -0.12566642291057306], [-0.4420008937723443, -0.17333089577239447], [-0.3119976436910923, -0.1733359740243503], [-0.16466739793494867, -0.24699601865046628], [0, -0.3726725980649519]], \"o\": [[0, 0.6759965874146854], [-0.5026656916422914, 0.3466668697967449], [-0.4853285394634863, 0], [-0.3509986187154679, -0.07799687179679493], [0, 0], [0.27733349583739597, 0.13866674791869804], [0.3943313426585664, 0.11699784682117043], [0.5806676416910421, 0], [0.2599963436585915, -0.18633122078051967], [0, -0.17333089577239424], [-0.09532894572364281, -0.13866674791869826], [-0.24700109690242256, -0.13866674791869826], [-0.45066439160979055, -0.17333089577239447], [-0.3206662197804946, -0.1733359740243503], [-0.17333089577239436, -0.24266426973174315], [0, -0.5893311395284879], [0.4809967905447634, -0.3206662197804935], [0.4246637415935397, 0], [0.36833577089427205, 0.08233369896747433], [0, 0], [-0.2946706480162007, -0.12132959573989321], [-0.3206662197804948, -0.08667052613815329], [-0.4680015437885947, 0], [-0.2469960186504665, 0.15166707292682347], [0, 0.1906578914472865], [0.11266609790244786, 0.13433499899997514], [0.26433317082927044, 0.12566642291057306], [0.44200089377234475, 0.16466739793494822], [0.3119976436910914, 0.17333597402435075], [0.16466739793494867, 0.24699601865046583], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 496]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"gs\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}], \"r\": 1, \"s\": {\"a\": 0, \"k\": [256, 496]}, \"e\": {\"a\": 0, \"k\": [256, 16]}, \"t\": 1, \"h\": {\"a\": 0, \"k\": 0}, \"a\": {\"a\": 0, \"k\": 0}, \"g\": {\"p\": 3, \"k\": {\"a\": 0, \"k\": [0, 0.7686274509803922, 0.8509803921568627, 0.9607843137254902, 0.5, 0.19600213626306554, 0.31400015259021896, 0.6899977111467155, 1, 0.16099794003204396, 0.18399328603036547, 0.45900663767452504, 0, 1, 0.5, 1, 1, 1]}}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var gradient = lottie.layers[1].shapes[1]; var start_marker = lottie.layers[0].shapes[1].it[1]; var end_marker = lottie.layers[0].shapes[0].it[1]; gradient.s.k = start_marker.p.k = [data[\"Start X\"], data[\"Start Y\"]]; gradient.e.k = end_marker.p.k = [data[\"End X\"], data[\"End Y\"]]; gradient.t = Number(data[\"Type\"]); if (gradient.t === 2) { gradient.h = { a: 0, k: data[\"Highlight\"] }; gradient.a = { a: 0, k: data[\"Highlight Angle\"] }; } else { delete gradient.h; delete gradient.a; } this.json_viewer_contents = lottie.layers[1].shapes[1]; }, {} );","title":"Gradient Stroke"},{"location":"specs/shapes/#modifier","text":"Modifiers change the bezier curves of neighbouring shapes Modifiers replace shapes in the render stack by applying operating on the bezier path of to the collected shapes that come before it in stacking order .","title":"Modifiers"},{"location":"specs/shapes/#trim-path","text":"Trims shapes into a segment Composition Diagram for Trim Path Trim Path Modifier Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'tm' Shape Type Shape Type s Scalar Start Segment start e Scalar End Segment end o Scalar Offset Offset m Trim Multiple Shapes Multiple How to treat multiple copies Start 0 End 50 Offset 0 Multiple Shapes Parallel Sequential var lottie_player_28 = new PlaygroundPlayer( 28, 'playground_28_5', 'lottie_target_28', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [128, 128]}, \"or\": {\"a\": 0, \"k\": 100}, \"ir\": {\"a\": 0, \"k\": 50}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [384, 128]}, \"s\": {\"a\": 0, \"k\": [200, 200]}}, {\"ty\": \"rc\", \"nm\": \"Rect\", \"mn\": \"{0776f2df-2619-415c-b10d-f648f2edfa0f}\", \"d\": 1, \"p\": {\"a\": 0, \"k\": [128, 384]}, \"s\": {\"a\": 0, \"k\": [200, 200]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"sr\", \"nm\": \"Triangle\", \"mn\": \"{db373594-d0ae-44ff-9295-30ff72616af2}\", \"p\": {\"a\": 0, \"k\": [384, 384]}, \"or\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 3}, \"sy\": 2, \"os\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 50}, \"o\": {\"a\": 0, \"k\": 0}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 20}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { lottie.layers[0].shapes[4].s.k = data[\"Start\"]; lottie.layers[0].shapes[4].e.k = data[\"End\"]; lottie.layers[0].shapes[4].o.k = data[\"Offset\"]; lottie.layers[0].shapes[4].m = Number(data[\"Multiple Shapes\"]); this.json_viewer_contents = lottie.layers[0].shapes[4]; }, {} ); When rendering trim path, the order of bezier points MUST be the same as rendering instructions given for each shape in this section. Rendering trim path can be rather complex. Given o f f s e t = { o 360 \u2212 \u230a o 360 \u230b o \u2265 0 o 360 \u2212 \u2308 o 360 \u2309 o < 0 s t a r t = o f f s e t + min ( 1 , max ( 0 , min ( s , e ) 100 ) ) e n d = o f f s e t + min ( 1 , max ( 0 , max ( s , e ) 100 ) ) If s and e are equal, implementations MUST NOT render any shapes. If s = 0 and e = 1 , the input shape MUST be rendered as-is. To render trim path, implementations MUST consider the actual length of each shape (they MAY use approximations). Once the shapes are collected, the segment to render is given by the percentages s t a r t and e n d . When trim path is applied to multiple shapes, the m property MUST be considered when applying the modifier: When m has a value of 1 (Parallel), each shape MUST considered separately, s t a r t and e n d being applied to each shape. When m has a value of 2 (Sequential), all the shapes MUST be considered as following each other in render order. s t a r t and e n d refer to the whole length created by concatenating each shape.","title":"Trim Path"},{"location":"specs/values/","text":"Values Integer Boolean Represents boolean values as an integer. `0` is false, `1` is true. Vector Vector data is represented by an array of numbers. This is used any time a property with multiple components is needed. An example would be a position, which would be represented as an array with two numbers, the first corresponding to the X coordinate and the second corresponding to the Y . Color Colors are Vectors with values between 0 and 1 for the RGB components. For example: [1, 0, 0] [1, 0.5, 0] Note: sometimes you might find color values with 4 components (the 4th being alpha) but most players ignore the last component. Hex Color Colors represented as a \"#\"-prefixed string, with two hexadecimal digits per RGB component. #FF8000 Gradient The gradient appearance is specified in terms of color stops and opacity stops. Color stops are defined as (position, color) tuples, where the position is a normalized [0..1] value along the gradient axis [startpoint -> endpoint] , and the color is 3 floats representing the RGB components. Transparency (opacity) stops are defined as (position, color) tuples, where position is similar to color stops' position. All color and opacity stops are stored sequentially by ascending offsets in a flattened float array (color stops followed by opacity stops), with 4 floats per color stop and 2 floats per opacity stops. Thus, given color stops and opacity stops, the expected size for the gradient data array is 4 * Nc + 2 * No . The color stop count is typically specified in a separate field from the gradient values, while the count of opacity stops can be inferred from the data array length: No = (length - 4 * Nc)/2 . Gradient without transparency So let's say you want these colors: [0.16, 0.18, 0.46] [0.2, 0.31, 0.69] [0.77, 0.85, 0.96] the array will look like the following: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96] Value Description 0 Offset of the 1st color ( 0 means at the start) 0.16 Red component for the 1st color 0.18 Green component for the 1st color 0.46 Blue component for the 1st color 0.5 Offset of the 2nd color ( 0.5 means half way) 0.2 Red component for the 2nd color 0.31 Green component for the 2nd color 0.69 Blue component for the 2nd color 1 Offset of the 3rd color ( 1 means at the end) 0.77 Red component for the 3rd color 0.85 Green component for the 3rd color 0.96 Blue component for the 3rd color Gradient with transparency Transparency stops are added at the end. Transparency stops may or may not match the count and offset of color stops. So assume the same colors as before, but opacity of 80% for the first color and 100% for the other two. The array will look like this: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1] It's the same array as the case without transparency but with the following values added at the end: Value Description 0 Offset of the 1st color ( 0 means at the start) 0.8 Alpha component for the 1st color 0.5 Offset of the 2nd color ( 0.5 means half way) 0.2 Alpha component for the 2nd color 1 Offset of the 3rd color ( 1 means at the end) 1 Alpha component for the 3rd color Gradient Example GradientPreviewEditor.stand_alone(document.getElementById(\"editor_29\"), (lottie) => { var raw_json = JSON.stringify(lottie, undefined, 4); var pretty_json = hljs.highlight(\"json\", raw_json).value; document.getElementById(\"json_viewer_29\").innerHTML = pretty_json; }, ); Bezier Shape Cubic polybezier Attribute Type Title Description c boolean Closed Closed i array of Vector In Tangents Array of points, each point is an array of coordinates. These points are along the in tangents relative to the corresponding v . o array of Vector Out Tangents Array of points, each point is an array of coordinates. These points are along the out tangents relative to the corresponding v . v array of Vector Vertices Array of points, each point is an array of coordinates. These points are along the bezier path BezierPreviewEditor.stand_alone(document.getElementById(\"editor_30\"), (lottie) => { var raw_json = JSON.stringify(lottie, undefined, 4); var pretty_json = hljs.highlight(\"json\", raw_json).value; document.getElementById(\"json_viewer_30\").innerHTML = pretty_json; }, ); Data URL Data URLs are embedded files (such as images) as defined in [ RFC2397 ] .","title":"Values"},{"location":"specs/values/#values","text":"","title":"Values"},{"location":"specs/values/#int-boolean","text":"Represents boolean values as an integer. `0` is false, `1` is true.","title":"Integer Boolean"},{"location":"specs/values/#vector","text":"Vector data is represented by an array of numbers. This is used any time a property with multiple components is needed. An example would be a position, which would be represented as an array with two numbers, the first corresponding to the X coordinate and the second corresponding to the Y .","title":"Vector"},{"location":"specs/values/#color","text":"Colors are Vectors with values between 0 and 1 for the RGB components. For example: [1, 0, 0] [1, 0.5, 0] Note: sometimes you might find color values with 4 components (the 4th being alpha) but most players ignore the last component.","title":"Color"},{"location":"specs/values/#hexcolor","text":"Colors represented as a \"#\"-prefixed string, with two hexadecimal digits per RGB component. #FF8000","title":"Hex Color"},{"location":"specs/values/#gradient","text":"The gradient appearance is specified in terms of color stops and opacity stops. Color stops are defined as (position, color) tuples, where the position is a normalized [0..1] value along the gradient axis [startpoint -> endpoint] , and the color is 3 floats representing the RGB components. Transparency (opacity) stops are defined as (position, color) tuples, where position is similar to color stops' position. All color and opacity stops are stored sequentially by ascending offsets in a flattened float array (color stops followed by opacity stops), with 4 floats per color stop and 2 floats per opacity stops. Thus, given color stops and opacity stops, the expected size for the gradient data array is 4 * Nc + 2 * No . The color stop count is typically specified in a separate field from the gradient values, while the count of opacity stops can be inferred from the data array length: No = (length - 4 * Nc)/2 .","title":"Gradient"},{"location":"specs/values/#gradient-without-transparency","text":"So let's say you want these colors: [0.16, 0.18, 0.46] [0.2, 0.31, 0.69] [0.77, 0.85, 0.96] the array will look like the following: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96] Value Description 0 Offset of the 1st color ( 0 means at the start) 0.16 Red component for the 1st color 0.18 Green component for the 1st color 0.46 Blue component for the 1st color 0.5 Offset of the 2nd color ( 0.5 means half way) 0.2 Red component for the 2nd color 0.31 Green component for the 2nd color 0.69 Blue component for the 2nd color 1 Offset of the 3rd color ( 1 means at the end) 0.77 Red component for the 3rd color 0.85 Green component for the 3rd color 0.96 Blue component for the 3rd color","title":"Gradient without transparency"},{"location":"specs/values/#gradient-with-transparency","text":"Transparency stops are added at the end. Transparency stops may or may not match the count and offset of color stops. So assume the same colors as before, but opacity of 80% for the first color and 100% for the other two. The array will look like this: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1] It's the same array as the case without transparency but with the following values added at the end: Value Description 0 Offset of the 1st color ( 0 means at the start) 0.8 Alpha component for the 1st color 0.5 Offset of the 2nd color ( 0.5 means half way) 0.2 Alpha component for the 2nd color 1 Offset of the 3rd color ( 1 means at the end) 1 Alpha component for the 3rd color","title":"Gradient with transparency"},{"location":"specs/values/#gradient-example","text":"GradientPreviewEditor.stand_alone(document.getElementById(\"editor_29\"), (lottie) => { var raw_json = JSON.stringify(lottie, undefined, 4); var pretty_json = hljs.highlight(\"json\", raw_json).value; document.getElementById(\"json_viewer_29\").innerHTML = pretty_json; }, );","title":"Gradient Example"},{"location":"specs/values/#bezier","text":"Cubic polybezier Attribute Type Title Description c boolean Closed Closed i array of Vector In Tangents Array of points, each point is an array of coordinates. These points are along the in tangents relative to the corresponding v . o array of Vector Out Tangents Array of points, each point is an array of coordinates. These points are along the out tangents relative to the corresponding v . v array of Vector Vertices Array of points, each point is an array of coordinates. These points are along the bezier path BezierPreviewEditor.stand_alone(document.getElementById(\"editor_30\"), (lottie) => { var raw_json = JSON.stringify(lottie, undefined, 4); var pretty_json = hljs.highlight(\"json\", raw_json).value; document.getElementById(\"json_viewer_30\").innerHTML = pretty_json; }, );","title":"Bezier Shape"},{"location":"specs/values/#data-url","text":"Data URLs are embedded files (such as images) as defined in [ RFC2397 ] .","title":"Data URL"},{"location":"validator/","text":"Lottie Validator .hidden { display: none !important; } textarea { display: block; width: 100%; min-height: 500px; font-family: monospace; tab-size: 4; } #error-out td:first-child { font-family: monospace; } .tabs { display: flex; gap: 5px; padding: 0; margin: 0; list-style: none; } .tabs li { display: flex; } .tabs a { border-radius: 5px 5px 0 0; padding: 10px; text-decoration: none !important; background-color: #ccc; } .tabs a:not(.active) { cursor: pointer; } .tabs a.active, .tab-content { background-color: #eee; } .tab-content { padding: 1em; } .tab-content input:not([type=\"checkbox\"]) { width: 100%; } .tab-content label { display: block; } .validate-button { margin: 1em auto 0; display: block; } #tab-content-upload { border: 1px solid black; margin: 20px auto; padding: 60px; box-sizing: border-box; text-align: center; border-radius: 5px; position: relative; background: #fff; } #tab-content-upload input { position: absolute; width: 100%; height: 100%; opacity: 0; left: 0px; top: 0px; cursor: pointer; } #error-out.hide-warning-property .warning-property, #error-out.hide-warning-type .warning-type { display: none; } Loading the JSON schema... Could not load the JSON schema. Validate by URL Validate by File Upload Validate by Direct Input Options Validate Drop a JSON file or click to browse Validate Warn about unknown object types Warn about unknown properties Path Named Path Severity Message Docs function show_element(element) { element.classList.remove(\"hidden\") } function hide_element(element) { element.classList.add(\"hidden\") } function on_load_error(err) { hide_element(document.getElementById(\"system-loading\")); show_element(document.getElementById(\"system-error\")); console.error(err); } function on_load_ok(schema_obj) { validator = new Validator(ajv2020.Ajv2020, schema_obj, base_url); hide_element(document.getElementById(\"system-loading\")); show_element(document.getElementById(\"validator-container\")); } function show_errors(errors) { var container = document.getElementById(\"error-out\"); container.classList.remove(\"table-striped\"); if ( errors.length == 0 ) { hide_element(container); return; } show_element(container); var body = container.querySelector(\"tbody\"); body.innerHTML = \"\"; for ( let error of errors ) { let tr = body.appendChild(document.createElement(\"tr\")); tr.classList.add(error.type == \"error\" ? \"danger\" : error.type); if ( error.type == \"warning\" ) tr.classList.add(\"warning-\" + error.warning); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.path ?? \"\")); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.path_names ? error.path_names.map(n => n ?? \"(unnamed)\").join(' > ') : \"\")); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.type)); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.message)); let td = tr.appendChild(document.createElement(\"td\")); if ( error.docs ) { let link = td.appendChild(document.createElement(\"a\")); link.setAttribute(\"href\", error.docs); link.appendChild(document.createTextNode(error.name)); } } } function validate_string(value) { var errors = validator.validate(value); if ( !errors.some(e => e.type == \"error\") ) errors.unshift({ type: \"success\", message: \"Validation successful with no errors\" }); show_errors(errors); } function on_file_input(ev) { const files = ev.target.files; if ( files.length > 0 ) { show_errors([]); validate_file(files[0]); } else { show_errors([{ \"type\": \"error\", \"message\": \"No file selected\" }]); } } function validate_file(file) { const reader = new FileReader(); reader.onload = function (e) { validate_string(e.target.result); }; reader.onerror = e => show_errors([{ \"type\": \"error\", \"message\": \"Could not load file\" }]) reader.readAsText(file); } function validate_url(url) { fetch(url).then(r => r.text()).then(validate_string).catch(e => show_errors([{ type: \"error\", message: \"Failed to load from URL\", }])); } function initialize() { fetch(base_url + \"/lottie.schema.json\").then(response => { if ( !response.ok ) throw new Error(\"Request failed\"); return response.json(); }).then(json => on_load_ok(json)).catch(e => on_load_error(e)); update_filters(); } function tab_click(tab) { let id = tab.id.replace(\"head\", \"content\"); document.querySelectorAll(\"#tab-content > div\").forEach(element => { if ( element.id == id ) show_element(element); else hide_element(element); }); document.querySelectorAll(\".tabs a\").forEach(element => { if ( element !== tab ) element.classList.remove(\"active\"); else element.classList.add(\"active\"); }) } function update_filters() { let container = document.getElementById(\"error-out\"); for ( let type of [\"property\", \"type\"] ) { if ( document.getElementById(\"check-warning-\" + type).checked ) container.classList.remove(\"hide-warning-\" + type) else container.classList.add(\"hide-warning-\" + type) } } var validator; initialize();","title":"Lottie Validator"},{"location":"validator/#lottie-validator","text":".hidden { display: none !important; } textarea { display: block; width: 100%; min-height: 500px; font-family: monospace; tab-size: 4; } #error-out td:first-child { font-family: monospace; } .tabs { display: flex; gap: 5px; padding: 0; margin: 0; list-style: none; } .tabs li { display: flex; } .tabs a { border-radius: 5px 5px 0 0; padding: 10px; text-decoration: none !important; background-color: #ccc; } .tabs a:not(.active) { cursor: pointer; } .tabs a.active, .tab-content { background-color: #eee; } .tab-content { padding: 1em; } .tab-content input:not([type=\"checkbox\"]) { width: 100%; } .tab-content label { display: block; } .validate-button { margin: 1em auto 0; display: block; } #tab-content-upload { border: 1px solid black; margin: 20px auto; padding: 60px; box-sizing: border-box; text-align: center; border-radius: 5px; position: relative; background: #fff; } #tab-content-upload input { position: absolute; width: 100%; height: 100%; opacity: 0; left: 0px; top: 0px; cursor: pointer; } #error-out.hide-warning-property .warning-property, #error-out.hide-warning-type .warning-type { display: none; } Loading the JSON schema... Could not load the JSON schema. Validate by URL Validate by File Upload Validate by Direct Input Options Validate Drop a JSON file or click to browse Validate Warn about unknown object types Warn about unknown properties Path Named Path Severity Message Docs function show_element(element) { element.classList.remove(\"hidden\") } function hide_element(element) { element.classList.add(\"hidden\") } function on_load_error(err) { hide_element(document.getElementById(\"system-loading\")); show_element(document.getElementById(\"system-error\")); console.error(err); } function on_load_ok(schema_obj) { validator = new Validator(ajv2020.Ajv2020, schema_obj, base_url); hide_element(document.getElementById(\"system-loading\")); show_element(document.getElementById(\"validator-container\")); } function show_errors(errors) { var container = document.getElementById(\"error-out\"); container.classList.remove(\"table-striped\"); if ( errors.length == 0 ) { hide_element(container); return; } show_element(container); var body = container.querySelector(\"tbody\"); body.innerHTML = \"\"; for ( let error of errors ) { let tr = body.appendChild(document.createElement(\"tr\")); tr.classList.add(error.type == \"error\" ? \"danger\" : error.type); if ( error.type == \"warning\" ) tr.classList.add(\"warning-\" + error.warning); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.path ?? \"\")); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.path_names ? error.path_names.map(n => n ?? \"(unnamed)\").join(' > ') : \"\")); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.type)); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.message)); let td = tr.appendChild(document.createElement(\"td\")); if ( error.docs ) { let link = td.appendChild(document.createElement(\"a\")); link.setAttribute(\"href\", error.docs); link.appendChild(document.createTextNode(error.name)); } } } function validate_string(value) { var errors = validator.validate(value); if ( !errors.some(e => e.type == \"error\") ) errors.unshift({ type: \"success\", message: \"Validation successful with no errors\" }); show_errors(errors); } function on_file_input(ev) { const files = ev.target.files; if ( files.length > 0 ) { show_errors([]); validate_file(files[0]); } else { show_errors([{ \"type\": \"error\", \"message\": \"No file selected\" }]); } } function validate_file(file) { const reader = new FileReader(); reader.onload = function (e) { validate_string(e.target.result); }; reader.onerror = e => show_errors([{ \"type\": \"error\", \"message\": \"Could not load file\" }]) reader.readAsText(file); } function validate_url(url) { fetch(url).then(r => r.text()).then(validate_string).catch(e => show_errors([{ type: \"error\", message: \"Failed to load from URL\", }])); } function initialize() { fetch(base_url + \"/lottie.schema.json\").then(response => { if ( !response.ok ) throw new Error(\"Request failed\"); return response.json(); }).then(json => on_load_ok(json)).catch(e => on_load_error(e)); update_filters(); } function tab_click(tab) { let id = tab.id.replace(\"head\", \"content\"); document.querySelectorAll(\"#tab-content > div\").forEach(element => { if ( element.id == id ) show_element(element); else hide_element(element); }); document.querySelectorAll(\".tabs a\").forEach(element => { if ( element !== tab ) element.classList.remove(\"active\"); else element.classList.add(\"active\"); }) } function update_filters() { let container = document.getElementById(\"error-out\"); for ( let type of [\"property\", \"type\"] ) { if ( document.getElementById(\"check-warning-\" + type).checked ) container.classList.remove(\"hide-warning-\" + type) else container.classList.add(\"hide-warning-\" + type) } } var validator; initialize();","title":"Lottie Validator"}]} \ No newline at end of file +{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Lottie Animation Format Welcome to the official documentation for Lottie, a JSON-based format for animated vector graphics. This manual contains formal specification and documentation for the Lottie file format, offering insights into its structure and features. The main target audience for this manual are developers that want to create tools within the Lottie ecosystem as it provides details about the JSON internals. Status of this manual The Lottie specification is still a work in progress, this document contains a subset of features that have been approved by the Lottie Animation Community. The documentation and specs will be expanded as more of the Lottie format becomes standardized. Once the draft is complete, there will be an announcement by the Lottie Animation Community. Conventions The key words \" MUST \", \" MUST NOT \", \" REQUIRED \", \" SHALL \", \" SHALL NOT \", \" SHOULD \", \" SHOULD NOT \", \" RECOMMENDED \", \" NOT RECOMMENDED \", \" MAY \", and \" OPTIONAL \" in this document are to be interpreted as described in BCP 14 [ RFC2119 ] [ RFC8174 ] when, and only when, they appear in all capitals, as shown here. Document Structure Lottie documents MUST use JSON [ RFC8259 ] to structure their data. The top-level object in a Lottie document MUST be an Animation object. Implementation MAY store additional data in the JSON objects. A machine-readable specification of the JSON structure is available as JSON Schema . Where to start Since Lottie uses JSON, basic JSON knowledge is required to understand the specification. To understand Lottie data, it's useful to start learning about basic values and animated properties . The root object of any Lottie animation is the Animation object. A printable single-page version of the specification is available here . var lottie_player_0 = new LottiePlayer( 'lottie_target_0', 'static/logo.json', true, {\"loop\": \"false\"} );","title":"Home"},{"location":"#lottie-animation-format","text":"Welcome to the official documentation for Lottie, a JSON-based format for animated vector graphics. This manual contains formal specification and documentation for the Lottie file format, offering insights into its structure and features. The main target audience for this manual are developers that want to create tools within the Lottie ecosystem as it provides details about the JSON internals.","title":"Lottie Animation Format"},{"location":"#status-of-this-manual","text":"The Lottie specification is still a work in progress, this document contains a subset of features that have been approved by the Lottie Animation Community. The documentation and specs will be expanded as more of the Lottie format becomes standardized. Once the draft is complete, there will be an announcement by the Lottie Animation Community.","title":"Status of this manual"},{"location":"#conventions","text":"The key words \" MUST \", \" MUST NOT \", \" REQUIRED \", \" SHALL \", \" SHALL NOT \", \" SHOULD \", \" SHOULD NOT \", \" RECOMMENDED \", \" NOT RECOMMENDED \", \" MAY \", and \" OPTIONAL \" in this document are to be interpreted as described in BCP 14 [ RFC2119 ] [ RFC8174 ] when, and only when, they appear in all capitals, as shown here.","title":"Conventions"},{"location":"#document-structure","text":"Lottie documents MUST use JSON [ RFC8259 ] to structure their data. The top-level object in a Lottie document MUST be an Animation object. Implementation MAY store additional data in the JSON objects. A machine-readable specification of the JSON structure is available as JSON Schema .","title":"Document Structure"},{"location":"#where-to-start","text":"Since Lottie uses JSON, basic JSON knowledge is required to understand the specification. To understand Lottie data, it's useful to start learning about basic values and animated properties . The root object of any Lottie animation is the Animation object. A printable single-page version of the specification is available here . var lottie_player_0 = new LottiePlayer( 'lottie_target_0', 'static/logo.json', true, {\"loop\": \"false\"} );","title":"Where to start"},{"location":"editing/extensions/","text":"Markdown Extensions This documentation comes with several markdown extensions that allow interactive elements and data pulled from the schema. Schema Integration schema_string Using a reference to a value in the JSON schema (without $defs ) will embed that string into the markdown text. Example: {schema_string:shapes/graphic-element/description} Output: Element used to display vector data in a shape layer link Links to the relevant section in the specs. Example: {link:shapes/ellipse} Output: View Schema schema_link Link to the relevant section in the formatted schema. Example: {schema_link:shapes/ellipse} Output: View Schema schema_subtype_table Used to list all the ty values for Layer / Shape etc. Example: {schema_subtype_table:layers/all-layers:ty} Output: ty Type 0 Precomposition Layer 2 Image Layer 3 Null Layer 1 Solid Layer 4 Shape Layer None Unknown layer types schema_object Embeds a property table from the schema. Example: {schema_object:shapes/ellipse} Output: Composition Diagram for Ellipse Ellipse Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'el' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Position s Vector Size Size schema_enum Same as schema_object but for enumerations. Example: {schema_enum:fill-rule} Output: Value Name Description 1 Non Zero Everything is colored (You can think of this as an OR) 2 Even Odd Colored based on intersections and path direction, can be used to create \"holes\" schema_inheritance Shows the inheritance diagram for an object type. Example: {schema_inheritance:shapes/ellipse} Output: Ellipse Shape Graphic Element Visual Object json_file Embed a JSON file into markdown, including syntax highlighting and reference links for JSON schema. Example: {json_file:lottie.schema.json} Lottie Player Embeds a lottie into the document Example: Output: var lottie_player_1 = new LottiePlayer( 'lottie_target_1', '../../static/logo.json', true, {} ); lottie-playground Embeds a player side by side to a JSON snipped and controls to tweak the animation Example: Example
lottie.layers[0].shapes[0].it[0] Output: Example Position x 256 Position y 256 Width 256 Height 256 Roundness 0 var lottie_player_2 = new PlaygroundPlayer( 2, 'playground_2_6', 'lottie_target_2', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Group\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [256, 256]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[0].shapes[0].it[0].p.k = [ data[\"Position x\"], data[\"Position y\"] ]; lottie.layers[0].shapes[0].it[0].s.k = [ data[\"Width\"], data[\"Height\"] ]; lottie.layers[0].shapes[0].it[0].r.k = data[\"Roundness\"]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); Miscellaneous [RFC] Links to a IETF RFC. Example: [RFC9402] Output: [ RFC9402 ] BCP14 Automatically highlights keywords from BCP 14 ( [ RFC2119 ] [ RFC8174 ] ). Example: MUST Output: MUST Math Input You can embed L A T E X math mode code. Example: Normal text with inline $\\LaTeX$: $\\frac{1}{x}$. $$\\sum\\limits_{i=1}^n{n\\choose i}t^i(1-t)^{n-1}P_i$$ Output: Normal text with inline L A T E X : 1 x . \u2211 i = 1 n ( n i ) t i ( 1 \u2212 t ) n \u2212 1 P i lottie_color Shows an inline preview of a lottie color array. Example: {lottie_color:1, 0.5, 0} Output: [1, 0.5, 0] lottie_hexcolor Shows an inline preview of a color from hex code. Example: {lottie_hexcolor:#FF8000} Output: #FF8000 lottie_gradient Shows an inline preview of a lottie gradient (without alpha). Example: {lottie_gradient:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96} Output: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96] lottie_gradient_alpha Shows an inline preview of a lottie gradient (with alpha). Alpha stop offsets need to match the color stop offsets. Example: {lottie_gradient_alpha:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1} Output: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1] Glossary Terms Glossary terms can be linked to using Mediawiki-style syntax: Example: [[local coordinates]] or [[local coordinates|coordinate system]] Output: local coordinates or coordinate system","title":"Markdown Extensions"},{"location":"editing/extensions/#markdown-extensions","text":"This documentation comes with several markdown extensions that allow interactive elements and data pulled from the schema.","title":"Markdown Extensions"},{"location":"editing/extensions/#schema-integration","text":"","title":"Schema Integration"},{"location":"editing/extensions/#schema_string","text":"Using a reference to a value in the JSON schema (without $defs ) will embed that string into the markdown text. Example: {schema_string:shapes/graphic-element/description} Output: Element used to display vector data in a shape layer","title":"schema_string"},{"location":"editing/extensions/#link","text":"Links to the relevant section in the specs. Example: {link:shapes/ellipse} Output: View Schema","title":"link"},{"location":"editing/extensions/#schema_link","text":"Link to the relevant section in the formatted schema. Example: {schema_link:shapes/ellipse} Output: View Schema","title":"schema_link"},{"location":"editing/extensions/#schema_subtype_table","text":"Used to list all the ty values for Layer / Shape etc. Example: {schema_subtype_table:layers/all-layers:ty} Output: ty Type 0 Precomposition Layer 2 Image Layer 3 Null Layer 1 Solid Layer 4 Shape Layer None Unknown layer types","title":"schema_subtype_table"},{"location":"editing/extensions/#schema_object","text":"Embeds a property table from the schema. Example: {schema_object:shapes/ellipse} Output: Composition Diagram for Ellipse Ellipse Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'el' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Position s Vector Size Size","title":"schema_object"},{"location":"editing/extensions/#schema_enum","text":"Same as schema_object but for enumerations. Example: {schema_enum:fill-rule} Output: Value Name Description 1 Non Zero Everything is colored (You can think of this as an OR) 2 Even Odd Colored based on intersections and path direction, can be used to create \"holes\"","title":"schema_enum"},{"location":"editing/extensions/#schema_inheritance","text":"Shows the inheritance diagram for an object type. Example: {schema_inheritance:shapes/ellipse} Output: Ellipse Shape Graphic Element Visual Object","title":"schema_inheritance"},{"location":"editing/extensions/#json_file","text":"Embed a JSON file into markdown, including syntax highlighting and reference links for JSON schema. Example: {json_file:lottie.schema.json}","title":"json_file"},{"location":"editing/extensions/#lottie-player","text":"","title":"Lottie Player"},{"location":"editing/extensions/#lottie","text":"Embeds a lottie into the document Example: Output: var lottie_player_1 = new LottiePlayer( 'lottie_target_1', '../../static/logo.json', true, {} );","title":"<lottie>"},{"location":"editing/extensions/#lottie-playground","text":"Embeds a player side by side to a JSON snipped and controls to tweak the animation Example: Example
lottie.layers[0].shapes[0].it[0] Output: Example Position x 256 Position y 256 Width 256 Height 256 Roundness 0 var lottie_player_2 = new PlaygroundPlayer( 2, 'playground_2_6', 'lottie_target_2', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Group\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [256, 256]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[0].shapes[0].it[0].p.k = [ data[\"Position x\"], data[\"Position y\"] ]; lottie.layers[0].shapes[0].it[0].s.k = [ data[\"Width\"], data[\"Height\"] ]; lottie.layers[0].shapes[0].it[0].r.k = data[\"Roundness\"]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} );","title":"lottie-playground"},{"location":"editing/extensions/#miscellaneous","text":"","title":"Miscellaneous"},{"location":"editing/extensions/#rfc","text":"Links to a IETF RFC. Example: [RFC9402] Output: [ RFC9402 ]","title":"[RFC]"},{"location":"editing/extensions/#bcp14","text":"Automatically highlights keywords from BCP 14 ( [ RFC2119 ] [ RFC8174 ] ). Example: MUST Output: MUST","title":"BCP14"},{"location":"editing/extensions/#math-input","text":"You can embed L A T E X math mode code. Example: Normal text with inline $\\LaTeX$: $\\frac{1}{x}$. $$\\sum\\limits_{i=1}^n{n\\choose i}t^i(1-t)^{n-1}P_i$$ Output: Normal text with inline L A T E X : 1 x . \u2211 i = 1 n ( n i ) t i ( 1 \u2212 t ) n \u2212 1 P i","title":"Math Input"},{"location":"editing/extensions/#lottie_color","text":"Shows an inline preview of a lottie color array. Example: {lottie_color:1, 0.5, 0} Output: [1, 0.5, 0]","title":"lottie_color"},{"location":"editing/extensions/#lottie_hexcolor","text":"Shows an inline preview of a color from hex code. Example: {lottie_hexcolor:#FF8000} Output: #FF8000","title":"lottie_hexcolor"},{"location":"editing/extensions/#lottie_gradient","text":"Shows an inline preview of a lottie gradient (without alpha). Example: {lottie_gradient:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96} Output: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96]","title":"lottie_gradient"},{"location":"editing/extensions/#lottie_gradient_alpha","text":"Shows an inline preview of a lottie gradient (with alpha). Alpha stop offsets need to match the color stop offsets. Example: {lottie_gradient_alpha:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1} Output: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1]","title":"lottie_gradient_alpha"},{"location":"editing/extensions/#glossary-terms","text":"Glossary terms can be linked to using Mediawiki-style syntax: Example: [[local coordinates]] or [[local coordinates|coordinate system]] Output: local coordinates or coordinate system","title":"Glossary Terms"},{"location":"editing/schema/","text":"Adding to the Schema The Lottie specification has a machine-readable definitions which uses JSON Schema . There are many different ways of formatting the schema so here are some guidelines to ensure consistency. Guidelines Object Model Approach Objects in the schema are organized in a way that simulates an object model. This allows for implementation to have a (non-binding) foundation for their internal structure and provides easy organization of the human-readable documentation. This means there can be some \"abstract\" type definitions, which will contain the common properties and descriptions of concrete sub-types. Object inheritance is simulated using allOf , with $ref items referring to \"base\" definitions. Split Files Each object or significant data type is split in its own file under /schema . These files are grouped together within a shallow list of directories. The files will be joined together into a single schema using /tools/schema-merge.py . Required Properties Each type defined by the schema must have a type , as well as title and description . title should consist of a couple words that can be used to name the described object. description should contain a concise description that gives an idea of the purpose of that object. Enumerations Enumerations are defined in a file under /schema/constants have oneOf defining, title , description , and const for every possible value of the enumeration. all Files Some types have several sub-types in the schema, and properties might want to accept a value to any of the concrete sub-types. To ensure references to these types are consistent, you can create an additional schema file with the list of acceptable values. For example if you have an abstract type in item.json , the file will be all-items.json , and contain oneOf with $ref s to the acceptable types. Writing Documentation Every type defined in the documentation must be documented. Schema documentation files go under /docs/specs , and there must be a file for each directory under /schema , with anchors for every type defined in that schema directory. Pulling Data from the Schema There are several Markdown extensions available, every object and enumeration must have the relevant table to show its structure and an example playground should be provided for every visual element. Building the Documentation There are several Python scripts that are used in the build process, ensure the requirements listed under /tools/requirements.txt are installed in your Python environment. The graphviz system package needs to be installed as well. The first step is to build the combined schema: tools/schema-merge.py It's important to call this after every schema change as the markdown extensions pull the data from this, and internal links are updated based on the combined file. To run the documentation locally you can use: tools/mkdocs serve This will create a local server that renders the documentation and it will reload if anything under /docs changes. To build a static HTML site run the following: ./tools/mkdocs build -d site The output will be in /site . Makefile To simplify the build process, there is a makefile that allows you to run all the commands above with a single make invocation`. Follows a list of useful make targets: # Installs Python packages make install_dependencies # Builds the schema and docs into HTML make # Equivalent to mkdocs serve make docs_serve # Builds only the combined schema make lottie.schema.json # Runs basic schema validation (without rebuilding the HTML) make validate # Runs the full validation, including building the HTML pages make validate_full Schema Validation You can validate schema syntax and internal references using ./tools/schema-validate.py To validate that each section is documented, you can pass the path to the built site: ./tools/schema-validate.py --html site/specs/","title":"Adding to the Schema"},{"location":"editing/schema/#adding-to-the-schema","text":"The Lottie specification has a machine-readable definitions which uses JSON Schema . There are many different ways of formatting the schema so here are some guidelines to ensure consistency.","title":"Adding to the Schema"},{"location":"editing/schema/#guidelines","text":"","title":"Guidelines"},{"location":"editing/schema/#object-model-approach","text":"Objects in the schema are organized in a way that simulates an object model. This allows for implementation to have a (non-binding) foundation for their internal structure and provides easy organization of the human-readable documentation. This means there can be some \"abstract\" type definitions, which will contain the common properties and descriptions of concrete sub-types. Object inheritance is simulated using allOf , with $ref items referring to \"base\" definitions.","title":"Object Model Approach"},{"location":"editing/schema/#split-files","text":"Each object or significant data type is split in its own file under /schema . These files are grouped together within a shallow list of directories. The files will be joined together into a single schema using /tools/schema-merge.py .","title":"Split Files"},{"location":"editing/schema/#required-properties","text":"Each type defined by the schema must have a type , as well as title and description . title should consist of a couple words that can be used to name the described object. description should contain a concise description that gives an idea of the purpose of that object.","title":"Required Properties"},{"location":"editing/schema/#enumerations","text":"Enumerations are defined in a file under /schema/constants have oneOf defining, title , description , and const for every possible value of the enumeration.","title":"Enumerations"},{"location":"editing/schema/#all-files","text":"Some types have several sub-types in the schema, and properties might want to accept a value to any of the concrete sub-types. To ensure references to these types are consistent, you can create an additional schema file with the list of acceptable values. For example if you have an abstract type in item.json , the file will be all-items.json , and contain oneOf with $ref s to the acceptable types.","title":"all Files"},{"location":"editing/schema/#writing-documentation","text":"Every type defined in the documentation must be documented. Schema documentation files go under /docs/specs , and there must be a file for each directory under /schema , with anchors for every type defined in that schema directory.","title":"Writing Documentation"},{"location":"editing/schema/#pulling-data-from-the-schema","text":"There are several Markdown extensions available, every object and enumeration must have the relevant table to show its structure and an example playground should be provided for every visual element.","title":"Pulling Data from the Schema"},{"location":"editing/schema/#building-the-documentation","text":"There are several Python scripts that are used in the build process, ensure the requirements listed under /tools/requirements.txt are installed in your Python environment. The graphviz system package needs to be installed as well. The first step is to build the combined schema: tools/schema-merge.py It's important to call this after every schema change as the markdown extensions pull the data from this, and internal links are updated based on the combined file. To run the documentation locally you can use: tools/mkdocs serve This will create a local server that renders the documentation and it will reload if anything under /docs changes. To build a static HTML site run the following: ./tools/mkdocs build -d site The output will be in /site .","title":"Building the Documentation"},{"location":"editing/schema/#makefile","text":"To simplify the build process, there is a makefile that allows you to run all the commands above with a single make invocation`. Follows a list of useful make targets: # Installs Python packages make install_dependencies # Builds the schema and docs into HTML make # Equivalent to mkdocs serve make docs_serve # Builds only the combined schema make lottie.schema.json # Runs basic schema validation (without rebuilding the HTML) make validate # Runs the full validation, including building the HTML pages make validate_full","title":"Makefile"},{"location":"editing/schema/#schema-validation","text":"You can validate schema syntax and internal references using ./tools/schema-validate.py To validate that each section is documented, you can pass the path to the built site: ./tools/schema-validate.py --html site/specs/","title":"Schema Validation"},{"location":"governance/","text":"Lottie Animation Format Documentation This repository is for the development of the Lottie Animation Format. All work here is guided by the Community Specification License . Scope The scope of this Working Group is to specify the format of the Lottie Animation Format, both the allowed JSON structure, the semantics of that structure, and how such Lottie files are to be rendered. The definition of the correct rendering will be specified by a combination of verbiage in the written specification and by exemplar Lottie files and their desired renderings. CLA Participation in this group requires signing the Contributor License Agreement , which you can do by creating a pull request that adds your name, email address, and Community Specification License version that you agree to be bound by. Here is an example of what that pull request should look like .","title":"Lottie Animation Format Documentation"},{"location":"governance/#lottie-animation-format-documentation","text":"This repository is for the development of the Lottie Animation Format. All work here is guided by the Community Specification License .","title":"Lottie Animation Format Documentation"},{"location":"governance/#scope","text":"The scope of this Working Group is to specify the format of the Lottie Animation Format, both the allowed JSON structure, the semantics of that structure, and how such Lottie files are to be rendered. The definition of the correct rendering will be specified by a combination of verbiage in the written specification and by exemplar Lottie files and their desired renderings.","title":"Scope"},{"location":"governance/#cla","text":"Participation in this group requires signing the Contributor License Agreement , which you can do by creating a pull request that adds your name, email address, and Community Specification License version that you agree to be bound by. Here is an example of what that pull request should look like .","title":"CLA"},{"location":"governance/CONTRIBUTING/","text":"Lottie Format Specification Contribution Guide This repository contains the specification text as well as Pull Requests with suggested improvements and contributions. When proposing or weighing-in on any issue or pull request, consider the Code of Conduct to better understand expected and unacceptable behavior. Workflow The primary workflow is centered around the main repository , utilizing the following features: Pull Requests Issues Discussions Regular, documented meetings of the LAC working group, to review and progress proposals through the various stages as outlined below. Members of the community, who are interested in participating in discussions and other work around the Lottie format, be it the format itself, documentation, libraries, tools or other services built around the format can do so around the repository. In doing so, members can put forth proposals for the format, which are well reasoned formal recommendations or suggestions put toward consideration by the community and working group, aimed at fixing or enhancing the Lottie format. Proposals can be initiated either via issues or pull requests (as detailed below). Any issue raised is considered an RFC, subject to review, comments and deliberation by both community and working group. An RFC may begin as an issue or PR, and may not initially be reasoned out enough to be considered a formal proposal (see below). However, it will eventually have to be detailed enough to be considered a proposal. Definitions Lottie Animation Community Lottie Animation Community (or LAC) is a non-profit open source project hosted by The Linux Foundation, dedicated to establishing the Lottie File Format as an efficient, scalable and cross-platform animated vector graphics technology and open file format. Lottie Animation Working Group A working group, put together by the LAC, is responsible for guiding the process, moderating discussions, and so forth. The working group will conduct regular meetings to review proposals, and either advance them through the process or put forward recommendations/suggestions for the same. Relevant details of the working group, its members and tenure shall be published on the main repository. Sponsors Individuals or organizations who are recognised by LAC are responsible for taking on proposals and guiding them through the process. Every proposal must have a sponsor attached to it, in order to progress through the process. A proposal may have multiple sponsors. Sponsor organizations shall be transparently documented on the main repository. Editors Either working group members or selected contributors responsible to repository maintenance. to the main repository. Consensus Consensus is defined as approval of two thirds of the Working Group. Proposals that require the introduction or changes of core features, will require unanimous approval of the entire working group. Proposals Proposals can come in the form of issues or pull requests. Discussions may be used for general discussion and brainstorming before it is put forth as a proposal and subsequently into the RFC process. Submissions fall into one of two categories: Contributions that do not change the specifications, or their interpretation These are issues and PRs largely aimed at improving legibility, fixing editorial errors, clearing up ambiguities, adding examples to existing specifications, or updating the tooling that generates the documentation. These may be progressed and merged without much process and typically only require one approval from a member of the LAC working group. Contributions that do meaningfully change the specifications These must progress through the stages of RFC, guided by a sponsor until they are ultimately accepted or rejected. Once a proposal is raised either via issues or pull request, it is considered to be an RFC. RFCs are guided by a sponsor through a series of stages: explainer, proposal, draft, and accepted (or rejected) , each of which has suggested entrance criteria and next steps detailed below. RFCs typically advance one stage at a time but may advance multiple stages at a time. Stage advancements typically occur during Working Group meetings, but may also occur on GitHub. In general, it's preferable to start with a pull request so that we can best evaluate the RFC in detail. However, starting with an issue is also permitted if the full details are not worked out. All RFCs start as either an explainer or a proposal. They will be tagged with the appropriate tag on GitHub as it progresses. Explainer An RFC in the Explainer stage captures a described problem or partially-considered solutions. An explainer does not need to meet any entrance criteria. An Explainer may be an issue or a pull request (though an illustrative pull request is preferable). Entrance criteria A well defined problem or use case. Identification of potential concerns, challenges, and drawbacks. As implied by the name, the goal at the Explainer stage is to capture the issue, and from there, reject it by considering other possible solutions or that it is not aligned with the guiding principles, or to move forwards with the next stage. Once determined that the explainer is compelling, it should seek the entrance criteria for proposal. Proposal An RFC in the Proposal stage is a solution to a problem with enough detail to be discussed further. It must be backed by a willing Sponsor. A Proposal's goal is to make a compelling case for acceptance by describing the problem and formalizing the solution. A proposal should be a pull request. Entrance criteria Identified sponsor Identified target profile for the proposal A proposal may not add features to the core profile immediately, but rather pick an extension or module (or be a module of its own). Core specifications may only change when an extension or module is migrated into core via a separate proposal. Clear explanation of the problem and solution Illustrative examples .json Files for testing Initial draft of the specification changes A Proposal is subject to the same discussion as an Explainer: ensuring that it is well aligned with the guiding principles,a problem worth solving, and the preferred solution to that problem. A Sponsor is not expected to have confidence in every detail at this stage and should instead focus on identifying and resolving issues and edge-cases. To better understand the technical ramifications of the proposal, a sponsor is encouraged to implement it in a Lottie library. Most Proposals are expected to evolve or change and may be rejected. Therefore, it is unwise to rely on a Proposal in a production Lottie Library. Lottie libraries may implement proposals, though are encouraged to not enable the proposed feature without explicit opt-in. Draft An RFC in the Draft stage is a fully formed solution. There is Consensus that the RFC is a good candidate for inclusion in the official specifications. A Draft's goal is to formally describe the solution and resolve any potential concerns. A Draft must be submitted as a pull request. Entrance criteria Consensus within the Working Group Resolution of identified concerns and challenges Relevant changes to the specifications, including the JSON schema when applicable Relevant tests and test .json files Compliant implementation in an established library or tool of their choosing A Proposal becomes a Draft when the set of problems or drawbacks have been fully considered and accepted or resolved, and the solution is deemed desirable. A Draft's goal is to complete final specification edits that are ready to be merged and implement the draft in Lottie libraries along with tests to gain confidence that the description is sufficient. Drafts may continue to evolve and change, occasionally dramatically, and are not guaranteed to be accepted. Therefore, it is unwise to rely on a draft in a production Lottie Service. Lottie libraries should implement drafts to provide valuable feedback, though are encouraged not to enable the draft feature without explicit opt-in when possible. Accepted An RFC at the accepted stage is a completed solution. According to an Editor it is ready to be merged into the main repository. The RFC is ready to be implemented by Lottie libraries. Entrance criteria Consensus that the solution is complete 3 Approvals given by members of the LAC on the merge request Complete specification edits, including schema, examples, and/or prose Compliant implementation in a lottie library (fully tested and merged or ready to merge) A Draft is accepted when the working group or editor (in the case of non-invasive edits as outlined before) has been convinced via implementations and tests that it appropriately handles all edge cases; that the specification changes not only precisely describe the new syntax and semantics but include sufficient documentation and examples; and that the RFC includes edits to any other affected areas of the specifications. An accepted RFC is merged into the Lottie specification's main repository by an Editor and will be included in the next released revision. Blocked At any stage of the process, any member of the Working Group may raise an objection, sending the RFC to the Blocked stage. The submitter can amend the RFC to resolve the issue raised in the objection. If the objecting Working Group member is satisfied with the amendment, the RFC can go back to its previous stage. If the proposal can be progressed after amendments, this avenue should be explored first. Should the submitter be unwilling or unable to make amendments, the proposal may be Rejected. Rejected An RFC may be rejected at any point. The reason for rejection should be clearly specified. Most rejections occur when an Explainer is proven to be unnecessary or fails to meet the entrance criteria to become a Proposal. A Proposal may become rejected for similar reasons, if it fails to reach Consensus, or loses the confidence of its Sponsor. Likewise, a Draft may encounter unforeseen issues during the process which cause it to lose Consensus or the confidence of its Sponsor. RFCs which have lost a Sponsor will not be rejected immediately, but may become rejected if they fail to attract a new Sponsor. Contributing to Lottie Libraries Should a new addition be made to the Lottie specifications or a Lottie library first? Libraries seek to be compliant, which means they might discourage changes that cause them to behave differently from the specifications. However, they also encourage pull requests for changes that accompany an RFC Proposal or Draft . Proposals won't be Accepted until it has experience being implemented in a Lottie library. To allow a library to remain compliant to the specifications while also implementing Proposals and Drafts , the library's maintainers may request that these new features are disabled by default with opt-in options, or they may simply wait to merge a well-tested pull request until the Proposal is Accepted . Specification Release Process The file format specifications are published using a semantic versioning system. Each published version of the specifications is identified by a unique sequence of major, minor, and patch numbers, following these guidelines: Increasing the major version number signals the possibility of breaking changes and significant incompatibilities. Increasing the minor version number happens when new features are introduced, but existing features should not be changed in an incompatible way. The patch version is used to publish minor changes that improve the clarity of the specifications without introducing new functionality. Each version through a release process consisting of multiple stages to ensure all stakeholders have a say before a new version of the specification is published. Different versions of the specification might be in different release stages at any given time. Active Development This is the initial stage, new features and proposals are welcome. Whether or not backwards-incompatible changes are accepted depends on the target version as described above. Requesting Comments Once the LAC working group has reached a consensus that the specification is ready to start the publishing process, it will request comments on the draft specification from stakeholders. New features and changed can be introduced based on the feedback but most new contributions should target a following version. When the target version is an increase in the major version, LAC guarantees that this stage will last a minimum of 3 weeks before moving forward to the next stage. Feature freeze After all the comments have been addressed and accepted into the specifications, the draft version goes into feature freeze where no new features should be introduced. The LAC working group will still accept fixes that clarify ambiguities, correct mistakes, or otherwise don't change compliance requirements. When the target version is an increase in the major version, LAC guarantees that this stage will last a minimum of one week before publishing the specifications. Published When the LAC working group is confident no more work is needed to release a version of the specifications, a final vote is performed to approve the specifications for publishing. If consensus is reached, then the version is published and can no longer be changed in any way. Any further work should target a higher version number. Errata should be published as a new version of the specifications with increased patch number. If consensus is not reached, the version goes back to the Active Development stage.","title":"Lottie Format Specification Contribution Guide"},{"location":"governance/CONTRIBUTING/#lottie-format-specification-contribution-guide","text":"This repository contains the specification text as well as Pull Requests with suggested improvements and contributions. When proposing or weighing-in on any issue or pull request, consider the Code of Conduct to better understand expected and unacceptable behavior.","title":"Lottie Format Specification Contribution Guide"},{"location":"governance/CONTRIBUTING/#workflow","text":"The primary workflow is centered around the main repository , utilizing the following features: Pull Requests Issues Discussions Regular, documented meetings of the LAC working group, to review and progress proposals through the various stages as outlined below. Members of the community, who are interested in participating in discussions and other work around the Lottie format, be it the format itself, documentation, libraries, tools or other services built around the format can do so around the repository. In doing so, members can put forth proposals for the format, which are well reasoned formal recommendations or suggestions put toward consideration by the community and working group, aimed at fixing or enhancing the Lottie format. Proposals can be initiated either via issues or pull requests (as detailed below). Any issue raised is considered an RFC, subject to review, comments and deliberation by both community and working group. An RFC may begin as an issue or PR, and may not initially be reasoned out enough to be considered a formal proposal (see below). However, it will eventually have to be detailed enough to be considered a proposal.","title":"Workflow"},{"location":"governance/CONTRIBUTING/#definitions","text":"","title":"Definitions"},{"location":"governance/CONTRIBUTING/#lottie-animation-community","text":"Lottie Animation Community (or LAC) is a non-profit open source project hosted by The Linux Foundation, dedicated to establishing the Lottie File Format as an efficient, scalable and cross-platform animated vector graphics technology and open file format.","title":"Lottie Animation Community"},{"location":"governance/CONTRIBUTING/#lottie-animation-working-group","text":"A working group, put together by the LAC, is responsible for guiding the process, moderating discussions, and so forth. The working group will conduct regular meetings to review proposals, and either advance them through the process or put forward recommendations/suggestions for the same. Relevant details of the working group, its members and tenure shall be published on the main repository.","title":"Lottie Animation Working Group"},{"location":"governance/CONTRIBUTING/#sponsors","text":"Individuals or organizations who are recognised by LAC are responsible for taking on proposals and guiding them through the process. Every proposal must have a sponsor attached to it, in order to progress through the process. A proposal may have multiple sponsors. Sponsor organizations shall be transparently documented on the main repository.","title":"Sponsors"},{"location":"governance/CONTRIBUTING/#editors","text":"Either working group members or selected contributors responsible to repository maintenance. to the main repository.","title":"Editors"},{"location":"governance/CONTRIBUTING/#consensus","text":"Consensus is defined as approval of two thirds of the Working Group. Proposals that require the introduction or changes of core features, will require unanimous approval of the entire working group.","title":"Consensus"},{"location":"governance/CONTRIBUTING/#proposals","text":"Proposals can come in the form of issues or pull requests. Discussions may be used for general discussion and brainstorming before it is put forth as a proposal and subsequently into the RFC process. Submissions fall into one of two categories: Contributions that do not change the specifications, or their interpretation These are issues and PRs largely aimed at improving legibility, fixing editorial errors, clearing up ambiguities, adding examples to existing specifications, or updating the tooling that generates the documentation. These may be progressed and merged without much process and typically only require one approval from a member of the LAC working group. Contributions that do meaningfully change the specifications These must progress through the stages of RFC, guided by a sponsor until they are ultimately accepted or rejected. Once a proposal is raised either via issues or pull request, it is considered to be an RFC. RFCs are guided by a sponsor through a series of stages: explainer, proposal, draft, and accepted (or rejected) , each of which has suggested entrance criteria and next steps detailed below. RFCs typically advance one stage at a time but may advance multiple stages at a time. Stage advancements typically occur during Working Group meetings, but may also occur on GitHub. In general, it's preferable to start with a pull request so that we can best evaluate the RFC in detail. However, starting with an issue is also permitted if the full details are not worked out. All RFCs start as either an explainer or a proposal. They will be tagged with the appropriate tag on GitHub as it progresses.","title":"Proposals"},{"location":"governance/CONTRIBUTING/#explainer","text":"An RFC in the Explainer stage captures a described problem or partially-considered solutions. An explainer does not need to meet any entrance criteria. An Explainer may be an issue or a pull request (though an illustrative pull request is preferable).","title":"Explainer"},{"location":"governance/CONTRIBUTING/#entrance-criteria","text":"A well defined problem or use case. Identification of potential concerns, challenges, and drawbacks. As implied by the name, the goal at the Explainer stage is to capture the issue, and from there, reject it by considering other possible solutions or that it is not aligned with the guiding principles, or to move forwards with the next stage. Once determined that the explainer is compelling, it should seek the entrance criteria for proposal.","title":"Entrance criteria"},{"location":"governance/CONTRIBUTING/#proposal","text":"An RFC in the Proposal stage is a solution to a problem with enough detail to be discussed further. It must be backed by a willing Sponsor. A Proposal's goal is to make a compelling case for acceptance by describing the problem and formalizing the solution. A proposal should be a pull request.","title":"Proposal"},{"location":"governance/CONTRIBUTING/#entrance-criteria_1","text":"Identified sponsor Identified target profile for the proposal A proposal may not add features to the core profile immediately, but rather pick an extension or module (or be a module of its own). Core specifications may only change when an extension or module is migrated into core via a separate proposal. Clear explanation of the problem and solution Illustrative examples .json Files for testing Initial draft of the specification changes A Proposal is subject to the same discussion as an Explainer: ensuring that it is well aligned with the guiding principles,a problem worth solving, and the preferred solution to that problem. A Sponsor is not expected to have confidence in every detail at this stage and should instead focus on identifying and resolving issues and edge-cases. To better understand the technical ramifications of the proposal, a sponsor is encouraged to implement it in a Lottie library. Most Proposals are expected to evolve or change and may be rejected. Therefore, it is unwise to rely on a Proposal in a production Lottie Library. Lottie libraries may implement proposals, though are encouraged to not enable the proposed feature without explicit opt-in.","title":"Entrance criteria"},{"location":"governance/CONTRIBUTING/#draft","text":"An RFC in the Draft stage is a fully formed solution. There is Consensus that the RFC is a good candidate for inclusion in the official specifications. A Draft's goal is to formally describe the solution and resolve any potential concerns. A Draft must be submitted as a pull request.","title":"Draft"},{"location":"governance/CONTRIBUTING/#entrance-criteria_2","text":"Consensus within the Working Group Resolution of identified concerns and challenges Relevant changes to the specifications, including the JSON schema when applicable Relevant tests and test .json files Compliant implementation in an established library or tool of their choosing A Proposal becomes a Draft when the set of problems or drawbacks have been fully considered and accepted or resolved, and the solution is deemed desirable. A Draft's goal is to complete final specification edits that are ready to be merged and implement the draft in Lottie libraries along with tests to gain confidence that the description is sufficient. Drafts may continue to evolve and change, occasionally dramatically, and are not guaranteed to be accepted. Therefore, it is unwise to rely on a draft in a production Lottie Service. Lottie libraries should implement drafts to provide valuable feedback, though are encouraged not to enable the draft feature without explicit opt-in when possible.","title":"Entrance criteria"},{"location":"governance/CONTRIBUTING/#accepted","text":"An RFC at the accepted stage is a completed solution. According to an Editor it is ready to be merged into the main repository. The RFC is ready to be implemented by Lottie libraries.","title":"Accepted"},{"location":"governance/CONTRIBUTING/#entrance-criteria_3","text":"Consensus that the solution is complete 3 Approvals given by members of the LAC on the merge request Complete specification edits, including schema, examples, and/or prose Compliant implementation in a lottie library (fully tested and merged or ready to merge) A Draft is accepted when the working group or editor (in the case of non-invasive edits as outlined before) has been convinced via implementations and tests that it appropriately handles all edge cases; that the specification changes not only precisely describe the new syntax and semantics but include sufficient documentation and examples; and that the RFC includes edits to any other affected areas of the specifications. An accepted RFC is merged into the Lottie specification's main repository by an Editor and will be included in the next released revision.","title":"Entrance criteria"},{"location":"governance/CONTRIBUTING/#blocked","text":"At any stage of the process, any member of the Working Group may raise an objection, sending the RFC to the Blocked stage. The submitter can amend the RFC to resolve the issue raised in the objection. If the objecting Working Group member is satisfied with the amendment, the RFC can go back to its previous stage. If the proposal can be progressed after amendments, this avenue should be explored first. Should the submitter be unwilling or unable to make amendments, the proposal may be Rejected.","title":"Blocked"},{"location":"governance/CONTRIBUTING/#rejected","text":"An RFC may be rejected at any point. The reason for rejection should be clearly specified. Most rejections occur when an Explainer is proven to be unnecessary or fails to meet the entrance criteria to become a Proposal. A Proposal may become rejected for similar reasons, if it fails to reach Consensus, or loses the confidence of its Sponsor. Likewise, a Draft may encounter unforeseen issues during the process which cause it to lose Consensus or the confidence of its Sponsor. RFCs which have lost a Sponsor will not be rejected immediately, but may become rejected if they fail to attract a new Sponsor.","title":"Rejected"},{"location":"governance/CONTRIBUTING/#contributing-to-lottie-libraries","text":"Should a new addition be made to the Lottie specifications or a Lottie library first? Libraries seek to be compliant, which means they might discourage changes that cause them to behave differently from the specifications. However, they also encourage pull requests for changes that accompany an RFC Proposal or Draft . Proposals won't be Accepted until it has experience being implemented in a Lottie library. To allow a library to remain compliant to the specifications while also implementing Proposals and Drafts , the library's maintainers may request that these new features are disabled by default with opt-in options, or they may simply wait to merge a well-tested pull request until the Proposal is Accepted .","title":"Contributing to Lottie Libraries"},{"location":"governance/CONTRIBUTING/#specification-release-process","text":"The file format specifications are published using a semantic versioning system. Each published version of the specifications is identified by a unique sequence of major, minor, and patch numbers, following these guidelines: Increasing the major version number signals the possibility of breaking changes and significant incompatibilities. Increasing the minor version number happens when new features are introduced, but existing features should not be changed in an incompatible way. The patch version is used to publish minor changes that improve the clarity of the specifications without introducing new functionality. Each version through a release process consisting of multiple stages to ensure all stakeholders have a say before a new version of the specification is published. Different versions of the specification might be in different release stages at any given time.","title":"Specification Release Process"},{"location":"governance/CONTRIBUTING/#active-development","text":"This is the initial stage, new features and proposals are welcome. Whether or not backwards-incompatible changes are accepted depends on the target version as described above.","title":"Active Development"},{"location":"governance/CONTRIBUTING/#requesting-comments","text":"Once the LAC working group has reached a consensus that the specification is ready to start the publishing process, it will request comments on the draft specification from stakeholders. New features and changed can be introduced based on the feedback but most new contributions should target a following version. When the target version is an increase in the major version, LAC guarantees that this stage will last a minimum of 3 weeks before moving forward to the next stage.","title":"Requesting Comments"},{"location":"governance/CONTRIBUTING/#feature-freeze","text":"After all the comments have been addressed and accepted into the specifications, the draft version goes into feature freeze where no new features should be introduced. The LAC working group will still accept fixes that clarify ambiguities, correct mistakes, or otherwise don't change compliance requirements. When the target version is an increase in the major version, LAC guarantees that this stage will last a minimum of one week before publishing the specifications.","title":"Feature freeze"},{"location":"governance/CONTRIBUTING/#published","text":"When the LAC working group is confident no more work is needed to release a version of the specifications, a final vote is performed to approve the specifications for publishing. If consensus is reached, then the version is published and can no longer be changed in any way. Any further work should target a higher version number. Errata should be published as a new version of the specifications with increased patch number. If consensus is not reached, the version goes back to the Active Development stage.","title":"Published"},{"location":"governance/Code_of_Conduct/","text":"Contributor Covenant Code of Conduct Our Pledge We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. Our Standards Examples of behavior that contributes to a positive environment for our community include: Demonstrating empathy and kindness toward other people Being respectful of differing opinions, viewpoints, and experiences Giving and gracefully accepting constructive feedback Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: The use of sexualized language or imagery, and sexual attention or advances of any kind Trolling, insulting or derogatory comments, and personal or political attacks Public or private harassment Publishing others' private information, such as a physical or email address, without their explicit permission Other conduct which could reasonably be considered inappropriate in a professional setting Enforcement Responsibilities Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. Scope This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement as set forth in the repository's Notice.md file. All complaints will be reviewed and investigated promptly and fairly. All community leaders are obligated to respect the privacy and security of the reporter of any incident. Enforcement Guidelines Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: 1. Correction Community Impact : Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. Consequence : A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. 2. Warning Community Impact : A violation through a single incident or series of actions. Consequence : A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. 3. Temporary Ban Community Impact : A serious violation of community standards, including sustained inappropriate behavior. Consequence : A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. 4. Permanent Ban Community Impact : Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. Consequence : A permanent ban from any sort of public interaction within the project community. Attribution This Code of Conduct is adapted from the Contributor Covenant , version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. Community Impact Guidelines were inspired by Mozilla's code of conduct enforcement ladder . For answers to common questions about this code of conduct, see the FAQ at https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.","title":"Contributor Covenant Code of Conduct"},{"location":"governance/Code_of_Conduct/#contributor-covenant-code-of-conduct","text":"","title":"Contributor Covenant Code of Conduct"},{"location":"governance/Code_of_Conduct/#our-pledge","text":"We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.","title":"Our Pledge"},{"location":"governance/Code_of_Conduct/#our-standards","text":"Examples of behavior that contributes to a positive environment for our community include: Demonstrating empathy and kindness toward other people Being respectful of differing opinions, viewpoints, and experiences Giving and gracefully accepting constructive feedback Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: The use of sexualized language or imagery, and sexual attention or advances of any kind Trolling, insulting or derogatory comments, and personal or political attacks Public or private harassment Publishing others' private information, such as a physical or email address, without their explicit permission Other conduct which could reasonably be considered inappropriate in a professional setting","title":"Our Standards"},{"location":"governance/Code_of_Conduct/#enforcement-responsibilities","text":"Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.","title":"Enforcement Responsibilities"},{"location":"governance/Code_of_Conduct/#scope","text":"This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.","title":"Scope"},{"location":"governance/Code_of_Conduct/#enforcement","text":"Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement as set forth in the repository's Notice.md file. All complaints will be reviewed and investigated promptly and fairly. All community leaders are obligated to respect the privacy and security of the reporter of any incident.","title":"Enforcement"},{"location":"governance/Code_of_Conduct/#enforcement-guidelines","text":"Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:","title":"Enforcement Guidelines"},{"location":"governance/Code_of_Conduct/#1-correction","text":"Community Impact : Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. Consequence : A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.","title":"1. Correction"},{"location":"governance/Code_of_Conduct/#2-warning","text":"Community Impact : A violation through a single incident or series of actions. Consequence : A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.","title":"2. Warning"},{"location":"governance/Code_of_Conduct/#3-temporary-ban","text":"Community Impact : A serious violation of community standards, including sustained inappropriate behavior. Consequence : A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.","title":"3. Temporary Ban"},{"location":"governance/Code_of_Conduct/#4-permanent-ban","text":"Community Impact : Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. Consequence : A permanent ban from any sort of public interaction within the project community.","title":"4. Permanent Ban"},{"location":"governance/Code_of_Conduct/#attribution","text":"This Code of Conduct is adapted from the Contributor Covenant , version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. Community Impact Guidelines were inspired by Mozilla's code of conduct enforcement ladder . For answers to common questions about this code of conduct, see the FAQ at https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.","title":"Attribution"},{"location":"governance/Community_Specification_License-v1/","text":"Community Specification License 1.0 The Purpose of this License. This License sets forth the terms under which 1) Contributor will participate in and contribute to the development of specifications, standards, best practices, guidelines, and other similar materials under this Working Group, and 2) how the materials developed under this License may be used. It is not intended for source code. Capitalized terms are defined in the License\u2019s last section. 1. Copyright. 1.1. Copyright License. Contributor grants everyone a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) copyright license, without any obligation for accounting, to reproduce, prepare derivative works of, publicly display, publicly perform, and distribute any materials it submits to the full extent of its copyright interest in those materials. Contributor also acknowledges that the Working Group may exercise copyright rights in the Specification, including the rights to submit the Specification to another standards organization. 1.2. Copyright Attribution. As a condition, anyone exercising this copyright license must include attribution to the Working Group in any derivative work based on materials developed by the Working Group. That attribution must include, at minimum, the material\u2019s name, version number, and source from where the materials were retrieved. Attribution is not required for implementations of the Specification. 2. Patents. 2.1. Patent License. 2.1.1. As a Result of Contributions. 2.1.1.1. As a Result of Contributions to Draft Specifications. Contributor grants Licensee a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) license to its Necessary Claims in 1) Contributor\u2019s Contributions and 2) to the Draft Specification that is within Scope as of the date of that Contribution, in both cases for Licensee\u2019s Implementation of the Draft Specification, except for those patent claims excluded by Contributor under Section 3. 2.1.1.2. For Approved Specifications. Contributor grants Licensee a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) license to its Necessary Claims included the Approved Specification that are within Scope for Licensee\u2019s Implementation of the Approved Specification, except for those patent claims excluded by Contributor under Section 3. 2.1.2. Patent Grant from Licensee. Licensee grants each other Licensee a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) license to its Necessary Claims for its Implementation, except for those patent claims excluded under Section 3. 2.1.3. Licensee Acceptance. The patent grants set forth in Section 2.1 extend only to Licensees that have indicated their agreement to this License as follows: 2.1.3.1. Source Code Distributions. For distribution in source code, by including this License in the root directory of the source code with the Implementation; 2.1.3.2. Non-Source Code Distributions. For distribution in any form other than source code, by including this License in the documentation, legal notices, via notice in the software, and/or other written materials provided with the Implementation; or 2.1.3.3. Via Notices.md. By issuing pull request or commit to the Specification\u2019s repository\u2019s Notices.md file by the Implementer\u2019s authorized representative, including the Implementer\u2019s name, authorized individual and system identifier, and Specification version. 2.1.4. Defensive Termination. If any Licensee files or maintains a claim in a court asserting that a Necessary Claim is infringed by an Implementation, any licenses granted under this License to the Licensee are immediately terminated unless 1) that claim is directly in response to a claim against Licensee regarding an Implementation, or 2) that claim was brought to enforce the terms of this License, including intervention in a third-party action by a Licensee. 2.1.5. Additional Conditions. This License is not an assurance (i) that any of Contributor\u2019s copyrights or issued patent claims cover an Implementation of the Specification or are enforceable or (ii) that an Implementation of the Specification would not infringe intellectual property rights of any third party. 2.2. Patent Licensing Commitment. In addition to the rights granted in Section 2.1, Contributor agrees to grant everyone a no charge, royalty-free license on reasonable and non-discriminatory terms to Contributor\u2019s Necessary Claims that are within Scope for: Implementations of a Draft Specification, where such license applies only to those Necessary Claims infringed by implementing Contributor's Contribution(s) included in that Draft Specification, and Implementations of the Approved Specification. This patent licensing commitment does not apply to those claims subject to Contributor\u2019s Exclusion Notice under Section 3. 2.3. Effect of Withdrawal. Contributor may withdraw from the Working Group by issuing a pull request or commit providing notice of withdrawal to the Working Group repository\u2019s Notices.md file. All of Contributor\u2019s existing commitments and obligations with respect to the Working Group up to the date of that withdrawal notice will remain in effect, but no new obligations will be incurred. 2.4. Binding Encumbrance. This License is binding on any future owner, assignee, or party who has been given the right to enforce any Necessary Claims against third parties. 3. Patent Exclusion. 3.1. As a Result of Contributions. Contributor may exclude Necessary Claims from its licensing commitments incurred under Section 2.1.1 by issuing an Exclusion Notice within 45 days of the date of that Contribution. Contributor may not issue an Exclusion Notice for any material that has been included in a Draft Deliverable for more than 45 days prior to the date of that Contribution. 3.2. As a Result of a Draft Specification Becoming an Approved Specification. Prior to the adoption of a Draft Specification as an Approved Specification, Contributor may exclude Necessary Claims from its licensing commitments under this Agreement by issuing an Exclusion Notice. Contributor may not issue an Exclusion Notice for patents that were eligible to have been excluded pursuant to Section 3.1. 4. Source Code License. Any source code developed by the Working Group is solely subject the source code license included in the Working Group\u2019s repository for that code. If no source code license is included, the source code will be subject to the MIT License. 5. No Other Rights. Except as specifically set forth in this License, no other express or implied patent, trademark, copyright, or other rights are granted under this License, including by implication, waiver, or estoppel. 6. Antitrust Compliance. Contributor acknowledge that it may compete with other participants in various lines of business and that it is therefore imperative that they and their respective representatives act in a manner that does not violate any applicable antitrust laws and regulations. This License does not restrict any Contributor from engaging in similar specification development projects. Each Contributor may design, develop, manufacture, acquire or market competitive deliverables, products, and services, and conduct its business, in whatever way it chooses. No Contributor is obligated to announce or market any products or services. Without limiting the generality of the foregoing, the Contributors agree not to have any discussion relating to any product pricing, methods or channels of product distribution, division of markets, allocation of customers or any other topic that should not be discussed among competitors under the auspices of the Working Group. 7. Non-Circumvention. Contributor agrees that it will not intentionally take or willfully assist any third party to take any action for the purpose of circumventing any obligations under this License. 8. Representations, Warranties and Disclaimers. 8.1. Representations, Warranties and Disclaimers. Contributor and Licensee represents and warrants that 1) it is legally entitled to grant the rights set forth in this License and 2) it will not intentionally include any third party materials in any Contribution unless those materials are available under terms that do not conflict with this License. IN ALL OTHER RESPECTS ITS CONTRIBUTIONS ARE PROVIDED \"AS IS.\" The entire risk as to implementing or otherwise using the Contribution or the Specification is assumed by the implementer and user. Except as stated herein, CONTRIBUTOR AND LICENSEE EXPRESSLY DISCLAIM ANY WARRANTIES (EXPRESS, IMPLIED, OR OTHERWISE), INCLUDING IMPLIED WARRANTIES OF MERCHANTABILITY, NON-INFRINGEMENT, FITNESS FOR A PARTICULAR PURPOSE, CONDITIONS OF QUALITY, OR TITLE, RELATED TO THE CONTRIBUTION OR THE SPECIFICATION. IN NO EVENT WILL ANY PARTY BE LIABLE TO ANY OTHER PARTY FOR LOST PROFITS OR ANY FORM OF INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER FROM ANY CAUSES OF ACTION OF ANY KIND WITH RESPECT TO THIS AGREEMENT, WHETHER BASED ON BREACH OF CONTRACT, TORT (INCLUDING NEGLIGENCE), OR OTHERWISE, AND WHETHER OR NOT THE OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. Any obligations regarding the transfer, successors in interest, or assignment of Necessary Claims will be satisfied if Contributor or Licensee notifies the transferee or assignee of any patent that it knows contains Necessary Claims or necessary claims under this License. Nothing in this License requires Contributor to undertake a patent search. If Contributor is 1) employed by or acting on behalf of an employer, 2) is making a Contribution under the direction or control of a third party, or 3) is making the Contribution as a consultant, contractor, or under another similar relationship with a third party, Contributor represents that they have been authorized by that party to enter into this License on its behalf. 8.2. Distribution Disclaimer. Any distributions of technical information to third parties must include a notice materially similar to the following: \u201cTHESE MATERIALS ARE PROVIDED \u201cAS IS.\u201d The Contributors and Licensees expressly disclaim any warranties (express, implied, or otherwise), including implied warranties of merchantability, non-infringement, fitness for a particular purpose, or title, related to the materials. The entire risk as to implementing or otherwise using the materials is assumed by the implementer and user. IN NO EVENT WILL THE CONTRIBUTORS OR LICENSEES BE LIABLE TO ANY OTHER PARTY FOR LOST PROFITS OR ANY FORM OF INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER FROM ANY CAUSES OF ACTION OF ANY KIND WITH RESPECT TO THIS DELIVERABLE OR ITS GOVERNING AGREEMENT, WHETHER BASED ON BREACH OF CONTRACT, TORT (INCLUDING NEGLIGENCE), OR OTHERWISE, AND WHETHER OR NOT THE OTHER MEMBER HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\u201d 9. Definitions. 9.1. Affiliate. \u201cAffiliate\u201d means an entity that directly or indirectly Controls, is Controlled by, or is under common Control of that party. 9.2. Approved Specification. \u201cApproved Specification\u201d means the final version and contents of any Draft Specification designated as an Approved Specification as set forth in the accompanying Governance.md file. 9.3. Contribution. \u201cContribution\u201d means any original work of authorship, including any modifications or additions to an existing work, that Contributor submits for inclusion in a Draft Specification, which is included in a Draft Specification or Approved Specification. 9.4. Contributor. \u201cContributor\u201d means any person or entity that has indicated its acceptance of the License 1) by making a Contribution to the Specification, or 2) by entering into the Community Specification Contributor License Agreement for the Specification. Contributor includes its Affiliates, assigns, agents, and successors in interest. 9.5. Control. \u201cControl\u201d means direct or indirect control of more than 50% of the voting power to elect directors of that corporation, or for any other entity, the power to direct management of such entity. 9.6. Draft Specification. \u201cDraft Specification\u201d means all versions of the material (except an Approved Specification) developed by this Working Group for the purpose of creating, commenting on, revising, updating, modifying, or adding to any document that is to be considered for inclusion in the Approved Specification. 9.7. Exclusion Notice. \u201cExclusion Notice\u201d means a written notice made by making a pull request or commit to the repository\u2019s Notices.md file that identifies patents that Contributor is excluding from its patent licensing commitments under this License. The Exclusion Notice for issued patents and published applications must include the Draft Specification\u2019s name, patent number(s) or title and application number(s), as the case may be, for each of the issued patent(s) or pending patent application(s) that the Contributor is excluding from the royalty-free licensing commitment set forth in this License. If an issued patent or pending patent application that may contain Necessary Claims is not set forth in the Exclusion Notice, those Necessary Claims shall continue to be subject to the licensing commitments under this License. The Exclusion Notice for unpublished patent applications must provide either: (i) the text of the filed application; or (ii) identification of the specific part(s) of the Draft Specification whose implementation makes the excluded claim a Necessary Claim. If (ii) is chosen, the effect of the exclusion will be limited to the identified part(s) of the Draft Specification. 9.8. Implementation. \u201cImplementation\u201d means making, using, selling, offering for sale, importing or distributing any implementation of the Specification 1) only to the extent it implements the Specification and 2) so long as all required portions of the Specification are implemented. 9.9. License. \u201cLicense\u201d means this Community Specification License. 9.10. Licensee. \u201cLicensee\u201d means any person or entity that has indicated its acceptance of the License as set forth in Section 2.1.3. Licensee includes its Affiliates, assigns, agents, and successors in interest. 9.11. Necessary Claims. \u201cNecessary Claims\u201d are those patent claims, if any, that a party owns or controls, including those claims later acquired, that are necessary to implement the required portions (including the required elements of optional portions) of the Specification that are described in detail and not merely referenced in the Specification. 9.12. Specification. \u201cSpecification\u201d means a Draft Specification or Approved Specification included in the Working Group\u2019s repository subject to this License, and the version of the Specification implemented by the Licensee. 9.13. Scope. \u201cScope\u201d has the meaning as set forth in the accompanying Scope.md file included in this Specification\u2019s repository. Changes to Scope do not apply retroactively. If no Scope is provided, each Contributor\u2019s Necessary Claims are limited to that Contributor\u2019s Contributions. 9.14. Working Group. \u201cWorking Group\u201d means this project to develop specifications, standards, best practices, guidelines, and other similar materials under this License. The text of this Community Specification License is Copyright 2020 Joint Development Foundation and is licensed under the Creative Commons Attribution 4.0 International License available at https://creativecommons.org/licenses/by/4.0/. SPDX-License-Identifier: CC-BY-4.0","title":"Community Specification License 1.0"},{"location":"governance/Community_Specification_License-v1/#community-specification-license-10","text":"The Purpose of this License. This License sets forth the terms under which 1) Contributor will participate in and contribute to the development of specifications, standards, best practices, guidelines, and other similar materials under this Working Group, and 2) how the materials developed under this License may be used. It is not intended for source code. Capitalized terms are defined in the License\u2019s last section. 1. Copyright. 1.1. Copyright License. Contributor grants everyone a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) copyright license, without any obligation for accounting, to reproduce, prepare derivative works of, publicly display, publicly perform, and distribute any materials it submits to the full extent of its copyright interest in those materials. Contributor also acknowledges that the Working Group may exercise copyright rights in the Specification, including the rights to submit the Specification to another standards organization. 1.2. Copyright Attribution. As a condition, anyone exercising this copyright license must include attribution to the Working Group in any derivative work based on materials developed by the Working Group. That attribution must include, at minimum, the material\u2019s name, version number, and source from where the materials were retrieved. Attribution is not required for implementations of the Specification. 2. Patents. 2.1. Patent License. 2.1.1. As a Result of Contributions. 2.1.1.1. As a Result of Contributions to Draft Specifications. Contributor grants Licensee a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) license to its Necessary Claims in 1) Contributor\u2019s Contributions and 2) to the Draft Specification that is within Scope as of the date of that Contribution, in both cases for Licensee\u2019s Implementation of the Draft Specification, except for those patent claims excluded by Contributor under Section 3. 2.1.1.2. For Approved Specifications. Contributor grants Licensee a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) license to its Necessary Claims included the Approved Specification that are within Scope for Licensee\u2019s Implementation of the Approved Specification, except for those patent claims excluded by Contributor under Section 3. 2.1.2. Patent Grant from Licensee. Licensee grants each other Licensee a non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as expressly stated in this License) license to its Necessary Claims for its Implementation, except for those patent claims excluded under Section 3. 2.1.3. Licensee Acceptance. The patent grants set forth in Section 2.1 extend only to Licensees that have indicated their agreement to this License as follows: 2.1.3.1. Source Code Distributions. For distribution in source code, by including this License in the root directory of the source code with the Implementation; 2.1.3.2. Non-Source Code Distributions. For distribution in any form other than source code, by including this License in the documentation, legal notices, via notice in the software, and/or other written materials provided with the Implementation; or 2.1.3.3. Via Notices.md. By issuing pull request or commit to the Specification\u2019s repository\u2019s Notices.md file by the Implementer\u2019s authorized representative, including the Implementer\u2019s name, authorized individual and system identifier, and Specification version. 2.1.4. Defensive Termination. If any Licensee files or maintains a claim in a court asserting that a Necessary Claim is infringed by an Implementation, any licenses granted under this License to the Licensee are immediately terminated unless 1) that claim is directly in response to a claim against Licensee regarding an Implementation, or 2) that claim was brought to enforce the terms of this License, including intervention in a third-party action by a Licensee. 2.1.5. Additional Conditions. This License is not an assurance (i) that any of Contributor\u2019s copyrights or issued patent claims cover an Implementation of the Specification or are enforceable or (ii) that an Implementation of the Specification would not infringe intellectual property rights of any third party. 2.2. Patent Licensing Commitment. In addition to the rights granted in Section 2.1, Contributor agrees to grant everyone a no charge, royalty-free license on reasonable and non-discriminatory terms to Contributor\u2019s Necessary Claims that are within Scope for: Implementations of a Draft Specification, where such license applies only to those Necessary Claims infringed by implementing Contributor's Contribution(s) included in that Draft Specification, and Implementations of the Approved Specification. This patent licensing commitment does not apply to those claims subject to Contributor\u2019s Exclusion Notice under Section 3. 2.3. Effect of Withdrawal. Contributor may withdraw from the Working Group by issuing a pull request or commit providing notice of withdrawal to the Working Group repository\u2019s Notices.md file. All of Contributor\u2019s existing commitments and obligations with respect to the Working Group up to the date of that withdrawal notice will remain in effect, but no new obligations will be incurred. 2.4. Binding Encumbrance. This License is binding on any future owner, assignee, or party who has been given the right to enforce any Necessary Claims against third parties. 3. Patent Exclusion. 3.1. As a Result of Contributions. Contributor may exclude Necessary Claims from its licensing commitments incurred under Section 2.1.1 by issuing an Exclusion Notice within 45 days of the date of that Contribution. Contributor may not issue an Exclusion Notice for any material that has been included in a Draft Deliverable for more than 45 days prior to the date of that Contribution. 3.2. As a Result of a Draft Specification Becoming an Approved Specification. Prior to the adoption of a Draft Specification as an Approved Specification, Contributor may exclude Necessary Claims from its licensing commitments under this Agreement by issuing an Exclusion Notice. Contributor may not issue an Exclusion Notice for patents that were eligible to have been excluded pursuant to Section 3.1. 4. Source Code License. Any source code developed by the Working Group is solely subject the source code license included in the Working Group\u2019s repository for that code. If no source code license is included, the source code will be subject to the MIT License. 5. No Other Rights. Except as specifically set forth in this License, no other express or implied patent, trademark, copyright, or other rights are granted under this License, including by implication, waiver, or estoppel. 6. Antitrust Compliance. Contributor acknowledge that it may compete with other participants in various lines of business and that it is therefore imperative that they and their respective representatives act in a manner that does not violate any applicable antitrust laws and regulations. This License does not restrict any Contributor from engaging in similar specification development projects. Each Contributor may design, develop, manufacture, acquire or market competitive deliverables, products, and services, and conduct its business, in whatever way it chooses. No Contributor is obligated to announce or market any products or services. Without limiting the generality of the foregoing, the Contributors agree not to have any discussion relating to any product pricing, methods or channels of product distribution, division of markets, allocation of customers or any other topic that should not be discussed among competitors under the auspices of the Working Group. 7. Non-Circumvention. Contributor agrees that it will not intentionally take or willfully assist any third party to take any action for the purpose of circumventing any obligations under this License. 8. Representations, Warranties and Disclaimers. 8.1. Representations, Warranties and Disclaimers. Contributor and Licensee represents and warrants that 1) it is legally entitled to grant the rights set forth in this License and 2) it will not intentionally include any third party materials in any Contribution unless those materials are available under terms that do not conflict with this License. IN ALL OTHER RESPECTS ITS CONTRIBUTIONS ARE PROVIDED \"AS IS.\" The entire risk as to implementing or otherwise using the Contribution or the Specification is assumed by the implementer and user. Except as stated herein, CONTRIBUTOR AND LICENSEE EXPRESSLY DISCLAIM ANY WARRANTIES (EXPRESS, IMPLIED, OR OTHERWISE), INCLUDING IMPLIED WARRANTIES OF MERCHANTABILITY, NON-INFRINGEMENT, FITNESS FOR A PARTICULAR PURPOSE, CONDITIONS OF QUALITY, OR TITLE, RELATED TO THE CONTRIBUTION OR THE SPECIFICATION. IN NO EVENT WILL ANY PARTY BE LIABLE TO ANY OTHER PARTY FOR LOST PROFITS OR ANY FORM OF INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER FROM ANY CAUSES OF ACTION OF ANY KIND WITH RESPECT TO THIS AGREEMENT, WHETHER BASED ON BREACH OF CONTRACT, TORT (INCLUDING NEGLIGENCE), OR OTHERWISE, AND WHETHER OR NOT THE OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. Any obligations regarding the transfer, successors in interest, or assignment of Necessary Claims will be satisfied if Contributor or Licensee notifies the transferee or assignee of any patent that it knows contains Necessary Claims or necessary claims under this License. Nothing in this License requires Contributor to undertake a patent search. If Contributor is 1) employed by or acting on behalf of an employer, 2) is making a Contribution under the direction or control of a third party, or 3) is making the Contribution as a consultant, contractor, or under another similar relationship with a third party, Contributor represents that they have been authorized by that party to enter into this License on its behalf. 8.2. Distribution Disclaimer. Any distributions of technical information to third parties must include a notice materially similar to the following: \u201cTHESE MATERIALS ARE PROVIDED \u201cAS IS.\u201d The Contributors and Licensees expressly disclaim any warranties (express, implied, or otherwise), including implied warranties of merchantability, non-infringement, fitness for a particular purpose, or title, related to the materials. The entire risk as to implementing or otherwise using the materials is assumed by the implementer and user. IN NO EVENT WILL THE CONTRIBUTORS OR LICENSEES BE LIABLE TO ANY OTHER PARTY FOR LOST PROFITS OR ANY FORM OF INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER FROM ANY CAUSES OF ACTION OF ANY KIND WITH RESPECT TO THIS DELIVERABLE OR ITS GOVERNING AGREEMENT, WHETHER BASED ON BREACH OF CONTRACT, TORT (INCLUDING NEGLIGENCE), OR OTHERWISE, AND WHETHER OR NOT THE OTHER MEMBER HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\u201d 9. Definitions. 9.1. Affiliate. \u201cAffiliate\u201d means an entity that directly or indirectly Controls, is Controlled by, or is under common Control of that party. 9.2. Approved Specification. \u201cApproved Specification\u201d means the final version and contents of any Draft Specification designated as an Approved Specification as set forth in the accompanying Governance.md file. 9.3. Contribution. \u201cContribution\u201d means any original work of authorship, including any modifications or additions to an existing work, that Contributor submits for inclusion in a Draft Specification, which is included in a Draft Specification or Approved Specification. 9.4. Contributor. \u201cContributor\u201d means any person or entity that has indicated its acceptance of the License 1) by making a Contribution to the Specification, or 2) by entering into the Community Specification Contributor License Agreement for the Specification. Contributor includes its Affiliates, assigns, agents, and successors in interest. 9.5. Control. \u201cControl\u201d means direct or indirect control of more than 50% of the voting power to elect directors of that corporation, or for any other entity, the power to direct management of such entity. 9.6. Draft Specification. \u201cDraft Specification\u201d means all versions of the material (except an Approved Specification) developed by this Working Group for the purpose of creating, commenting on, revising, updating, modifying, or adding to any document that is to be considered for inclusion in the Approved Specification. 9.7. Exclusion Notice. \u201cExclusion Notice\u201d means a written notice made by making a pull request or commit to the repository\u2019s Notices.md file that identifies patents that Contributor is excluding from its patent licensing commitments under this License. The Exclusion Notice for issued patents and published applications must include the Draft Specification\u2019s name, patent number(s) or title and application number(s), as the case may be, for each of the issued patent(s) or pending patent application(s) that the Contributor is excluding from the royalty-free licensing commitment set forth in this License. If an issued patent or pending patent application that may contain Necessary Claims is not set forth in the Exclusion Notice, those Necessary Claims shall continue to be subject to the licensing commitments under this License. The Exclusion Notice for unpublished patent applications must provide either: (i) the text of the filed application; or (ii) identification of the specific part(s) of the Draft Specification whose implementation makes the excluded claim a Necessary Claim. If (ii) is chosen, the effect of the exclusion will be limited to the identified part(s) of the Draft Specification. 9.8. Implementation. \u201cImplementation\u201d means making, using, selling, offering for sale, importing or distributing any implementation of the Specification 1) only to the extent it implements the Specification and 2) so long as all required portions of the Specification are implemented. 9.9. License. \u201cLicense\u201d means this Community Specification License. 9.10. Licensee. \u201cLicensee\u201d means any person or entity that has indicated its acceptance of the License as set forth in Section 2.1.3. Licensee includes its Affiliates, assigns, agents, and successors in interest. 9.11. Necessary Claims. \u201cNecessary Claims\u201d are those patent claims, if any, that a party owns or controls, including those claims later acquired, that are necessary to implement the required portions (including the required elements of optional portions) of the Specification that are described in detail and not merely referenced in the Specification. 9.12. Specification. \u201cSpecification\u201d means a Draft Specification or Approved Specification included in the Working Group\u2019s repository subject to this License, and the version of the Specification implemented by the Licensee. 9.13. Scope. \u201cScope\u201d has the meaning as set forth in the accompanying Scope.md file included in this Specification\u2019s repository. Changes to Scope do not apply retroactively. If no Scope is provided, each Contributor\u2019s Necessary Claims are limited to that Contributor\u2019s Contributions. 9.14. Working Group. \u201cWorking Group\u201d means this project to develop specifications, standards, best practices, guidelines, and other similar materials under this License. The text of this Community Specification License is Copyright 2020 Joint Development Foundation and is licensed under the Creative Commons Attribution 4.0 International License available at https://creativecommons.org/licenses/by/4.0/. SPDX-License-Identifier: CC-BY-4.0","title":"Community Specification License 1.0"},{"location":"governance/Governance/","text":"Community Specification Governance Policy 1.0 This document provides the governance policy for specifications and other documents developed using the Community Specification process in a repository (each a \u201cWorking Group\u201d). Each Working Group and must adhere to the requirements in this document. 1. Roles. Each Working Group may include the following roles. Additional roles may be adopted and documented by the Working Group. 1.1. Maintainer. \u201cMaintainers\u201d are responsible for organizing activities around developing, maintaining, and updating the specification(s) developed by the Working Group. Maintainers are also responsible for determining consensus and coordinating appeals. Each Working Group will designate one or more Maintainer for that Working Group. A Working Group may select a new or additional Maintainer(s) upon Approval of the Working Group Participants. 1.2. Editor. \u201cEditors\u201d are responsible for ensuring that the contents of the document accurately reflect the decisions that have been made by the group, and that the specification adheres to formatting and content guidelines. Each Working Group will designate an Editor for that Working Group. A Working Group may select a new Editor upon Approval of the Working Group Participants. 1.3. Participants. \u201cParticipants\u201d are those that have made Contributions to the Working Group subject to the Community Specification License. 2. Decision Making. 2.1. Consensus-Based Decision Making. Working Groups make decisions through a consensus process (\u201cApproval\u201d or \u201cApproved\u201d). While the agreement of all Participants is preferred, it is not required for consensus. Rather, the Maintainer will determine consensus based on their good faith consideration of a number of factors, including the dominant view of the Working Group Participants and nature of support and objections. The Maintainer will document evidence of consensus in accordance with these requirements. 2.2. Appeal Process. Decisions may be appealed be via a pull request or an issue, and that appeal will be considered by the Maintainer in good faith, who will respond in writing within a reasonable time. 3. Ways of Working. Inspired by ANSI\u2019s Essential Requirements for Due Process , Community Specification Working Groups must adhere to consensus-based due process requirements. These requirements apply to activities related to the development of consensus for approval, revision, reaffirmation, and withdrawal of Community Specifications. Due process means that any person (organization, company, government agency, individual, etc.) with a direct and material interest has a right to participate by: a) expressing a position and its basis, b) having that position considered, and c) having the right to appeal. Due process allows for equity and fair play. The following constitute the minimum acceptable due process requirements for the development of consensus. 3.1. Openness. Participation shall be open to all persons who are directly and materially affected by the activity in question. There shall be no undue financial barriers to participation. Voting membership on the consensus body shall not be conditional upon membership in any organization, nor unreasonably restricted on the basis of technical qualifications or other such requirements. Membership in a Working Group\u2019s parent organization, if any, may be required. 3.2. Lack of Dominance. The development process shall not be dominated by any single interest category, individual or organization. Dominance means a position or exercise of dominant authority, leadership, or influence by reason of superior leverage, strength, or representation to the exclusion of fair and equitable consideration of other viewpoints. 3.3. Balance. The development process should have a balance of interests. Participants from diverse interest categories shall be sought with the objective of achieving balance. 3.4. Coordination and Harmonization. Good faith efforts shall be made to resolve potential conflicts between and among deliverables developed under this Working Group and existing industry standards. 3.5. Consideration of Views and Objections. Prompt consideration shall be given to the written views and objections of all Participants. 3.6. Written procedures. This governance document and other materials documenting the Community Specification development process shall be available to any interested person. 4. Specification Development Process. 4.1. Pre-Draft. Any Participant may submit a proposed initial draft document as a candidate Draft Specification of that Working Group. The Maintainer will designate each submission as a \u201cPre-Draft\u201d document. 4.2. Draft. Each Pre-Draft document of a Working Group must first be Approved to become a\u201d Draft Specification\u201d. Once the Working Group approves a document as a Draft Specification, the Draft Specification becomes the basis for all going forward work on that specification. 4.3. Working Group Approval. Once a Working Group believes it has achieved the objectives for its specification as described in the Scope, it will Approve that Draft Specification and progress it to \u201cApproved Specification\u201d status. 4.4. Publication and Submission. Upon the designation of a Draft Specification as an Approved Specification, the Maintainer will publish the Approved Specification in a manner agreed upon by the Working Group Participants (i.e., Working Group Participant only location, publicly available location, Working Group maintained website, Working Group member website, etc.). The publication of an Approved Specification in a publicly accessible manner must include the terms under which the Approved Specification is being made available under. 4.5. Submissions to Standards Bodies. No Draft Specification or Approved Specification may be submitted to another standards development organization without Working group Approval. Upon reaching Approval, the Maintainer will coordinate the submission of the applicable Draft Specification or Approved Specification to another standards development organization. Working Group Participants that developed that Draft Specification or Approved Specification agree to grant the copyright rights necessary to make those submissions. 5. Non-Confidential, Restricted Disclosure. Information disclosed in connection with any Working Group activity, including but not limited to meetings, Contributions, and submissions, is not confidential, regardless of any markings or statements to the contrary. Notwithstanding the foregoing, if the Working Group is collaborating via a private repository, the Participants will not make any public disclosures of that information contained in that private repository without the Approval of the Working Group.","title":"Community Specification Governance Policy 1.0"},{"location":"governance/Governance/#community-specification-governance-policy-10","text":"This document provides the governance policy for specifications and other documents developed using the Community Specification process in a repository (each a \u201cWorking Group\u201d). Each Working Group and must adhere to the requirements in this document.","title":"Community Specification Governance Policy 1.0"},{"location":"governance/Governance/#1-roles","text":"Each Working Group may include the following roles. Additional roles may be adopted and documented by the Working Group. 1.1. Maintainer. \u201cMaintainers\u201d are responsible for organizing activities around developing, maintaining, and updating the specification(s) developed by the Working Group. Maintainers are also responsible for determining consensus and coordinating appeals. Each Working Group will designate one or more Maintainer for that Working Group. A Working Group may select a new or additional Maintainer(s) upon Approval of the Working Group Participants. 1.2. Editor. \u201cEditors\u201d are responsible for ensuring that the contents of the document accurately reflect the decisions that have been made by the group, and that the specification adheres to formatting and content guidelines. Each Working Group will designate an Editor for that Working Group. A Working Group may select a new Editor upon Approval of the Working Group Participants. 1.3. Participants. \u201cParticipants\u201d are those that have made Contributions to the Working Group subject to the Community Specification License.","title":"1. Roles."},{"location":"governance/Governance/#2-decision-making","text":"2.1. Consensus-Based Decision Making. Working Groups make decisions through a consensus process (\u201cApproval\u201d or \u201cApproved\u201d). While the agreement of all Participants is preferred, it is not required for consensus. Rather, the Maintainer will determine consensus based on their good faith consideration of a number of factors, including the dominant view of the Working Group Participants and nature of support and objections. The Maintainer will document evidence of consensus in accordance with these requirements. 2.2. Appeal Process. Decisions may be appealed be via a pull request or an issue, and that appeal will be considered by the Maintainer in good faith, who will respond in writing within a reasonable time.","title":"2. Decision Making."},{"location":"governance/Governance/#3-ways-of-working","text":"Inspired by ANSI\u2019s Essential Requirements for Due Process , Community Specification Working Groups must adhere to consensus-based due process requirements. These requirements apply to activities related to the development of consensus for approval, revision, reaffirmation, and withdrawal of Community Specifications. Due process means that any person (organization, company, government agency, individual, etc.) with a direct and material interest has a right to participate by: a) expressing a position and its basis, b) having that position considered, and c) having the right to appeal. Due process allows for equity and fair play. The following constitute the minimum acceptable due process requirements for the development of consensus. 3.1. Openness. Participation shall be open to all persons who are directly and materially affected by the activity in question. There shall be no undue financial barriers to participation. Voting membership on the consensus body shall not be conditional upon membership in any organization, nor unreasonably restricted on the basis of technical qualifications or other such requirements. Membership in a Working Group\u2019s parent organization, if any, may be required. 3.2. Lack of Dominance. The development process shall not be dominated by any single interest category, individual or organization. Dominance means a position or exercise of dominant authority, leadership, or influence by reason of superior leverage, strength, or representation to the exclusion of fair and equitable consideration of other viewpoints. 3.3. Balance. The development process should have a balance of interests. Participants from diverse interest categories shall be sought with the objective of achieving balance. 3.4. Coordination and Harmonization. Good faith efforts shall be made to resolve potential conflicts between and among deliverables developed under this Working Group and existing industry standards. 3.5. Consideration of Views and Objections. Prompt consideration shall be given to the written views and objections of all Participants. 3.6. Written procedures. This governance document and other materials documenting the Community Specification development process shall be available to any interested person.","title":"3. Ways of Working."},{"location":"governance/Governance/#4-specification-development-process","text":"4.1. Pre-Draft. Any Participant may submit a proposed initial draft document as a candidate Draft Specification of that Working Group. The Maintainer will designate each submission as a \u201cPre-Draft\u201d document. 4.2. Draft. Each Pre-Draft document of a Working Group must first be Approved to become a\u201d Draft Specification\u201d. Once the Working Group approves a document as a Draft Specification, the Draft Specification becomes the basis for all going forward work on that specification. 4.3. Working Group Approval. Once a Working Group believes it has achieved the objectives for its specification as described in the Scope, it will Approve that Draft Specification and progress it to \u201cApproved Specification\u201d status. 4.4. Publication and Submission. Upon the designation of a Draft Specification as an Approved Specification, the Maintainer will publish the Approved Specification in a manner agreed upon by the Working Group Participants (i.e., Working Group Participant only location, publicly available location, Working Group maintained website, Working Group member website, etc.). The publication of an Approved Specification in a publicly accessible manner must include the terms under which the Approved Specification is being made available under. 4.5. Submissions to Standards Bodies. No Draft Specification or Approved Specification may be submitted to another standards development organization without Working group Approval. Upon reaching Approval, the Maintainer will coordinate the submission of the applicable Draft Specification or Approved Specification to another standards development organization. Working Group Participants that developed that Draft Specification or Approved Specification agree to grant the copyright rights necessary to make those submissions.","title":"4. Specification Development Process."},{"location":"governance/Governance/#5-non-confidential-restricted-disclosure","text":"Information disclosed in connection with any Working Group activity, including but not limited to meetings, Contributions, and submissions, is not confidential, regardless of any markings or statements to the contrary. Notwithstanding the foregoing, if the Working Group is collaborating via a private repository, the Participants will not make any public disclosures of that information contained in that private repository without the Approval of the Working Group.","title":"5. Non-Confidential, Restricted Disclosure."},{"location":"governance/License/","text":"Licenses Specification License Specifications in the repository are subject to the Community Specification License 1.0 available at https://github.com/CommunitySpecification/1.0 . Source Code License If source code is included in this repository, or for sample or reference code included in the specification itself, that code is subject to the MIT license unless otherwise designated. In the case of any conflict or confusion within this specification repository between the Community Specification License and the MIT or other designated license, the terms of the Community Specification License shall apply. If source code is included in this repository, or for sample or reference code included in the specification itself, that code is subject to the MIT license unless otherwise marked. In the case of any conflict or confusion within this specification repository between the Community Specification License and the designated source code license, the terms of the Community Specification License shall apply.","title":"Licenses"},{"location":"governance/License/#licenses","text":"","title":"Licenses"},{"location":"governance/License/#specification-license","text":"Specifications in the repository are subject to the Community Specification License 1.0 available at https://github.com/CommunitySpecification/1.0 .","title":"Specification License"},{"location":"governance/License/#source-code-license","text":"If source code is included in this repository, or for sample or reference code included in the specification itself, that code is subject to the MIT license unless otherwise designated. In the case of any conflict or confusion within this specification repository between the Community Specification License and the MIT or other designated license, the terms of the Community Specification License shall apply. If source code is included in this repository, or for sample or reference code included in the specification itself, that code is subject to the MIT license unless otherwise marked. In the case of any conflict or confusion within this specification repository between the Community Specification License and the designated source code license, the terms of the Community Specification License shall apply.","title":"Source Code License"},{"location":"governance/Notices/","text":"Notices Community Specification Contributor License Agreement 1.0 By making a Contribution to this repository, I agree to the terms of the following documents located at https://github.com/CommunitySpecification/1.0 : (a) Community Specification License 1.0 Community_Specification_License-v1.md (b) Community Specification Governance Policy 1.0 Governance.md (c) Community Specification Contribution Policy 1.0 CONTRIBUTING.md (d) Community Specification Code of Conduct Code_of_Conduct.md In addition, for source code contributions, I certify that: (a) The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file; or (b) The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file; or (c) The contribution was provided directly to me by some other person who certified (a), (b) or (c) and I have not modified it. (d) I understand and agree that this working group and the contribution may be public and that a record of the contribution (including all personal information I submit with it, including my sign-off) is maintained indefinitely and may be redistributed consistent with this agreement or the open source license(s) involved. I represent that I am legally entitled to make the grants set forth in the documents above. If my employer(s) has rights to intellectual property that may be infringed by the materials developed by this Working Group, I represent that I have received permission to enter these agreements on behalf of that employer. License Acceptance Licensee\u2019s name: Joseph Gregorio Authorized individual and system identifier: jcgregorio@google.com Specification version: 1.0 Licensee\u2019s name: Florin Malita Authorized individual and system identifier: fmalita@google.com Specification version: 1.0 Licensee\u2019s name: Hern\u00e1n Torrisi Authorized individual and system identifier: hernantorrisi@gmail.com Specification version: 1.0 Licensee\u2019s name: Mike Reed Authorized individual and system identifier: reed@google.com Specification version: 1.0 Licensee\u2019s name: Mattia Basaglia Authorized individual and system identifier: glax@dragon.best Specification version: 1.0 Licensee's name: Jorge Betancourt Authorized individual and system identifier: jmbetancourt@google.com Specification version: 1.0 Licensee's name: Jawish Hameed Authorized individual and system identifier: jawish@lottiefiles.com Specification version: 1.0 Licensee's name: Aidos Sabit Authorized individual and system identifier: aidosmf@gmail.com Specification version: 1.0 Licensee's name: Alistair Thomson Authorized individual and system identifier: alistair@lottielab.io Specification version: 1.0 Licensee's name: Marcus Stenbeck Authorized individual and system identifier: marcus.stenbeck@gmail.com Specification version: 1.0 Licensee's name: Brandon Wilson Authorized individual and system identifier: bwils@google.com Specification version: 1.0 Licensee's name: Naail Abdul Rahman Authorized individual and system identifier: kudanai@gmail.com Specification version: 1.0 Licensee's name: Henry Huck Authorized individual and system identifier: henry@jitter.video Specification version: 1.0","title":"Notices"},{"location":"governance/Notices/#notices","text":"","title":"Notices"},{"location":"governance/Notices/#community-specification-contributor-license-agreement-10","text":"By making a Contribution to this repository, I agree to the terms of the following documents located at https://github.com/CommunitySpecification/1.0 : (a) Community Specification License 1.0 Community_Specification_License-v1.md (b) Community Specification Governance Policy 1.0 Governance.md (c) Community Specification Contribution Policy 1.0 CONTRIBUTING.md (d) Community Specification Code of Conduct Code_of_Conduct.md In addition, for source code contributions, I certify that: (a) The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file; or (b) The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file; or (c) The contribution was provided directly to me by some other person who certified (a), (b) or (c) and I have not modified it. (d) I understand and agree that this working group and the contribution may be public and that a record of the contribution (including all personal information I submit with it, including my sign-off) is maintained indefinitely and may be redistributed consistent with this agreement or the open source license(s) involved. I represent that I am legally entitled to make the grants set forth in the documents above. If my employer(s) has rights to intellectual property that may be infringed by the materials developed by this Working Group, I represent that I have received permission to enter these agreements on behalf of that employer.","title":"Community Specification Contributor License Agreement 1.0"},{"location":"governance/Notices/#license-acceptance","text":"Licensee\u2019s name: Joseph Gregorio Authorized individual and system identifier: jcgregorio@google.com Specification version: 1.0 Licensee\u2019s name: Florin Malita Authorized individual and system identifier: fmalita@google.com Specification version: 1.0 Licensee\u2019s name: Hern\u00e1n Torrisi Authorized individual and system identifier: hernantorrisi@gmail.com Specification version: 1.0 Licensee\u2019s name: Mike Reed Authorized individual and system identifier: reed@google.com Specification version: 1.0 Licensee\u2019s name: Mattia Basaglia Authorized individual and system identifier: glax@dragon.best Specification version: 1.0 Licensee's name: Jorge Betancourt Authorized individual and system identifier: jmbetancourt@google.com Specification version: 1.0 Licensee's name: Jawish Hameed Authorized individual and system identifier: jawish@lottiefiles.com Specification version: 1.0 Licensee's name: Aidos Sabit Authorized individual and system identifier: aidosmf@gmail.com Specification version: 1.0 Licensee's name: Alistair Thomson Authorized individual and system identifier: alistair@lottielab.io Specification version: 1.0 Licensee's name: Marcus Stenbeck Authorized individual and system identifier: marcus.stenbeck@gmail.com Specification version: 1.0 Licensee's name: Brandon Wilson Authorized individual and system identifier: bwils@google.com Specification version: 1.0 Licensee's name: Naail Abdul Rahman Authorized individual and system identifier: kudanai@gmail.com Specification version: 1.0 Licensee's name: Henry Huck Authorized individual and system identifier: henry@jitter.video Specification version: 1.0","title":"License Acceptance"},{"location":"specs/assets/","text":"Assets Asset Composition Diagram for Asset Asset Visual Object Precomposition Image Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like id string ID Unique identifier used by layers when referencing this asset Precomposition Asset containing a composition that can be referenced by layers. Composition Diagram for Precomposition Precomposition Asset Composition Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like id string ID Unique identifier used by layers when referencing this asset layers array of Layer Layers Layers Image Asset containing an image that can be referenced by layers. Image formats supported vary depending on the player. Some commonly supported formats are JPEG, GIF, PNG and SVG. Composition Diagram for Image Image Asset Slottable Object Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like id string ID Unique identifier used by layers when referencing this asset sid string Slot Id Identifier to look up the slot w number Width Width of the image h number Height Height of the image p string File Name Name of the image file or a data url u string File Path Path to the image file e 0-1 integer Embedded If '1', 'p' is a Data URL If the dimensions of the image asset does not match the size given by w and h , renderers MUST ensure image layers referencing that asset do not have any visuals exceeding the w - h size. It's RECOMMENDED they scale the image maintaining its aspect ratio and they center it within the ( 0 , 0 ) , ( w , h ) box. Even if an image asset does not have any intrinsic size, its contents MUST still stay within the w - h bounds when rendered. Authoring tools SHOULD export files where w and h match the physical size of the assets.","title":"Assets"},{"location":"specs/assets/#assets","text":"","title":"Assets"},{"location":"specs/assets/#asset","text":"Composition Diagram for Asset Asset Visual Object Precomposition Image Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like id string ID Unique identifier used by layers when referencing this asset","title":"Asset"},{"location":"specs/assets/#precomposition","text":"Asset containing a composition that can be referenced by layers. Composition Diagram for Precomposition Precomposition Asset Composition Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like id string ID Unique identifier used by layers when referencing this asset layers array of Layer Layers Layers","title":"Precomposition"},{"location":"specs/assets/#image","text":"Asset containing an image that can be referenced by layers. Image formats supported vary depending on the player. Some commonly supported formats are JPEG, GIF, PNG and SVG. Composition Diagram for Image Image Asset Slottable Object Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like id string ID Unique identifier used by layers when referencing this asset sid string Slot Id Identifier to look up the slot w number Width Width of the image h number Height Height of the image p string File Name Name of the image file or a data url u string File Path Path to the image file e 0-1 integer Embedded If '1', 'p' is a Data URL If the dimensions of the image asset does not match the size given by w and h , renderers MUST ensure image layers referencing that asset do not have any visuals exceeding the w - h size. It's RECOMMENDED they scale the image maintaining its aspect ratio and they center it within the ( 0 , 0 ) , ( w , h ) box. Even if an image asset does not have any intrinsic size, its contents MUST still stay within the w - h bounds when rendered. Authoring tools SHOULD export files where w and h match the physical size of the assets.","title":"Image"},{"location":"specs/composition/","text":"Composition Animation Top level object, describing the animation Composition Diagram for Animation Animation Visual Object Composition Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like layers array of Layer Layers Layers ver integer Specification Version Specification version this Lottie is targeting. This is a 6 digit number with version components encoded as MMmmpp , with MM being major version, mm being minor and pp being patch. fr number Framerate Framerate in frames per second ip number In Point Frame the animation starts at (usually 0) op number Out Point Frame the animation stops/loops at, which makes this the duration in frames when ip is 0 w integer Width Width of the animation h integer Height Height of the animation assets array of Asset Assets List of assets that can be referenced by layers markers array of Marker Markers Markers defining named sections of the composition. slots object Slots Dictionary of slot ids that will replace matching properties. Versioning Guidelines The Lottie specification version number uses a semantic versioning system, tools implementing the specification SHOULD consider the following guidelines: Major version signal the possibility of breaking changes that are not compatible with previous versions of the specification. Minor version updates typically add new functionality but do not contain breaking changes for existing features. Patch version updates typically make minor changes or clarifications to already existing functionality. Authoring Tools Authoring tools SHOULD specify the latest version of the Lottie Specification. They MAY allow the major version to be configurable to facilitate playback on a wider range of players. Changing the targeted major version MAY also require changes to the produced animation in the case of any breaking changes between major versions. Animation Players Players SHOULD determine what major versions they support and handle breaking changes across supported major versions. Players SHOULD be able to handle animations that specify both newer and older versions of the Lottie specification and SHOULD issue a warning if: The animation specifies a major version that is not supported. The animation specifies a newer minor version. No warning needed if the specified patch version is different. Composition An object that contains a list of layers Composition Diagram for Composition Composition Precomposition Animation Attribute Type Title Description layers array of Layer Layers Layers","title":"Composition"},{"location":"specs/composition/#composition_1","text":"","title":"Composition"},{"location":"specs/composition/#animation","text":"Top level object, describing the animation Composition Diagram for Animation Animation Visual Object Composition Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like layers array of Layer Layers Layers ver integer Specification Version Specification version this Lottie is targeting. This is a 6 digit number with version components encoded as MMmmpp , with MM being major version, mm being minor and pp being patch. fr number Framerate Framerate in frames per second ip number In Point Frame the animation starts at (usually 0) op number Out Point Frame the animation stops/loops at, which makes this the duration in frames when ip is 0 w integer Width Width of the animation h integer Height Height of the animation assets array of Asset Assets List of assets that can be referenced by layers markers array of Marker Markers Markers defining named sections of the composition. slots object Slots Dictionary of slot ids that will replace matching properties.","title":"Animation"},{"location":"specs/composition/#versioning-guidelines","text":"The Lottie specification version number uses a semantic versioning system, tools implementing the specification SHOULD consider the following guidelines: Major version signal the possibility of breaking changes that are not compatible with previous versions of the specification. Minor version updates typically add new functionality but do not contain breaking changes for existing features. Patch version updates typically make minor changes or clarifications to already existing functionality.","title":"Versioning Guidelines"},{"location":"specs/composition/#authoring-tools","text":"Authoring tools SHOULD specify the latest version of the Lottie Specification. They MAY allow the major version to be configurable to facilitate playback on a wider range of players. Changing the targeted major version MAY also require changes to the produced animation in the case of any breaking changes between major versions.","title":"Authoring Tools"},{"location":"specs/composition/#animation-players","text":"Players SHOULD determine what major versions they support and handle breaking changes across supported major versions. Players SHOULD be able to handle animations that specify both newer and older versions of the Lottie specification and SHOULD issue a warning if: The animation specifies a major version that is not supported. The animation specifies a newer minor version. No warning needed if the specified patch version is different.","title":"Animation Players"},{"location":"specs/composition/#composition","text":"An object that contains a list of layers Composition Diagram for Composition Composition Precomposition Animation Attribute Type Title Description layers array of Layer Layers Layers","title":"Composition"},{"location":"specs/constants/","text":"Enumerations Fill Rule Rule used to handle multiple shapes rendered with the same fill object Value Name Description 1 Non Zero Everything is colored (You can think of this as an OR) 2 Even Odd Colored based on intersections and path direction, can be used to create \"holes\" Example Fill Rule Non Zero Even Odd var lottie_player_3 = new PlaygroundPlayer( 3, 'playground_3_2', 'lottie_target_3', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{f5d94f54-bb8f-4f07-be45-232ebd4b9eb1}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{4b0993ed-e35b-48a5-ab12-687dbc147c7c}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Path\", \"mn\": \"{29196ff2-0a65-48b4-a450-f9fbc3a3640d}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"Path\", \"mn\": \"{bb7e6c60-755e-4a21-a7ba-bd054feab5c7}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[125.51641791044776, 452.20298507462684], [240.71641791044777, 38.6865671641791], [435.8686567164179, 447.9044776119403], [42.125373134328356, 173.65970149253732], [460.8, 156.46567164179103]], \"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"p\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[0].it[1]; shape.r = Number(data[\"Fill Rule\"]); this.json_viewer_contents = lottie.layers[0].shapes[0].it[1]; }, {} ); Trim Multiple Shapes How to handle multiple shapes in trim path Value Name Description 1 Parallel All shapes apply the trim at the same time 2 Sequential Shapes are considered as a continuous sequence Multiple Shapes Parallel Sequential var lottie_player_4 = new PlaygroundPlayer( 4, 'playground_4_2', 'lottie_target_4', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [128, 128]}, \"or\": {\"a\": 0, \"k\": 100}, \"ir\": {\"a\": 0, \"k\": 50}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [384, 128]}, \"s\": {\"a\": 0, \"k\": [200, 200]}}, {\"ty\": \"rc\", \"nm\": \"Rect\", \"mn\": \"{0776f2df-2619-415c-b10d-f648f2edfa0f}\", \"d\": 1, \"p\": {\"a\": 0, \"k\": [128, 384]}, \"s\": {\"a\": 0, \"k\": [200, 200]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"sr\", \"nm\": \"Triangle\", \"mn\": \"{db373594-d0ae-44ff-9295-30ff72616af2}\", \"p\": {\"a\": 0, \"k\": [384, 384]}, \"or\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 3}, \"sy\": 2, \"os\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 50}, \"o\": {\"a\": 0, \"k\": 0}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 20}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { lottie.layers[0].shapes[4].m = Number(data[\"Multiple Shapes\"]); this.json_viewer_contents = lottie.layers[0].shapes[4]; }, {} ); Shape Direction Drawing direction of the shape curve, useful for trim path Value Name Description 1 Normal Usually clockwise 3 Reversed Usually counter clockwise Shape Direction Normal Reversed var lottie_player_5 = new PlaygroundPlayer( 5, 'playground_5_2', 'lottie_target_5', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [128, 128]}, \"or\": {\"a\": 0, \"k\": 100}, \"ir\": {\"a\": 0, \"k\": 50}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [384, 128]}, \"s\": {\"a\": 0, \"k\": [200, 200]}}, {\"ty\": \"rc\", \"nm\": \"Rect\", \"mn\": \"{0776f2df-2619-415c-b10d-f648f2edfa0f}\", \"d\": 1, \"p\": {\"a\": 0, \"k\": [128, 384]}, \"s\": {\"a\": 0, \"k\": [200, 200]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"sr\", \"nm\": \"Triangle\", \"mn\": \"{db373594-d0ae-44ff-9295-30ff72616af2}\", \"p\": {\"a\": 0, \"k\": [384, 384]}, \"or\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 3}, \"sy\": 2, \"os\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 50}, \"o\": {\"a\": 0, \"k\": 0}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 20}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { for ( let shape of lottie.layers[0].shapes ) shape.d = Number(data[\"Shape Direction\"]); this.json_viewer_contents = lottie.layers[0].shapes[1]; }, {} ); Star Type Whether a PolyStar is a star or a polygon Value Name 1 Star 2 Polygon Example Star Type Star Polygon var lottie_player_6 = new PlaygroundPlayer( 6, 'playground_6_2', 'lottie_target_6', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"layers\": [{\"ty\": 4, \"ddd\": 0, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ip\": 0, \"op\": 180, \"ind\": 0, \"st\": 0, \"sr\": 1, \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{9199543e-3552-4e51-a802-623f2a4a2ca1}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.979995422293431, 0.28000305180437934]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var star = lottie.layers[0].shapes[0].it[0]; star.sy = Number(data[\"Star Type\"]); if ( data[\"Star Type\"] == \"1\" ) { star[\"ir\"] = {\"a\": 0, \"k\": 100}; star[\"is\"] = {\"a\": 0, \"k\": 0}; } else { delete star[\"ir\"]; delete star[\"is\"]; } lottie.layers[0].shapes[0].it[0] = star; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); Line Cap Style at the end of a stoked line Value Name 1 Butt 2 Round 3 Square Example Line Cap Butt Round Square var lottie_player_7 = new PlaygroundPlayer( 7, 'playground_7_2', 'lottie_target_7', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.lc = Number(data[\"Line Cap\"]); shape.d = undefined; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} ); Line Join Style at a sharp corner of a stoked line Value Name 1 Miter 2 Round 3 Bevel Example Line Join Miter Round Bevel Miter Limit 3 var lottie_player_8 = new PlaygroundPlayer( 8, 'playground_8_3', 'lottie_target_8', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.lj = Number(data[\"Line Join\"]); shape.ml = data[\"Miter Limit\"]; shape.d = undefined; var trim = lottie.layers[0].shapes[1]; trim.e.k = 100; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} ); Mask Mode Describes how a mask interacts (blends) with the preceding masks in the stack. Value Name Description 'n' None The mask is ignored. 'a' Add Mask coverage is added (Normal blending). 's' Subtract Mask coverage is subtracted (Subtract blending). 'i' Intersect Mask coverage is intersected (Source-In blending). Example Mask Mode None Add Subtract Intersect Mask1 Opacity 100 Mask2 Opacity 100 var lottie_player_9 = new PlaygroundPlayer( 9, 'playground_9_4', 'lottie_target_9', {\"v\": \"5.12.0\", \"fr\": 30, \"ip\": 0, \"op\": 150, \"w\": 500, \"h\": 500, \"nm\": \"test2\", \"ddd\": 0, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ind\": 0, \"ty\": \"sh\", \"ix\": 1, \"ks\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"v\": [[0, -250], [58.779, -80.902], [237.764, -77.254], [95.106, 30.902], [146.946, 202.254], [0, 100], [-146.946, 202.254], [-95.106, 30.902], [-237.764, -77.254], [-58.779, -80.902]], \"c\": true}, \"ix\": 2}, \"nm\": \"Path 1\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ind\": 1, \"ty\": \"sh\", \"ix\": 2, \"ks\": {\"a\": 0, \"k\": {\"i\": [[-96.65, 0], [0, -69.036], [96.65, 0], [0, 69.036]], \"o\": [[96.65, 0], [0, 69.036], [-96.65, 0], [0, -69.036]], \"v\": [[0, -125], [175, 0], [0, 125], [-175, 0]], \"c\": true}, \"ix\": 2}, \"nm\": \"Path 2\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [1, 0, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 1, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"d\": [{\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 10, \"ix\": 1}}, {\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0, \"ix\": 7}}], \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 150, \"st\": 0, \"ct\": 1, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 1, \"nm\": \"Medium Green Solid 3\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"hasMask\": true, \"masksProperties\": [{\"inv\": false, \"mode\": \"a\", \"pt\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"v\": [[250, 0], [308.779, 169.098], [487.764, 172.746], [345.106, 280.902], [396.946, 452.254], [250, 350], [103.054, 452.254], [154.894, 280.902], [12.236, 172.746], [191.221, 169.098]], \"c\": true}, \"ix\": 1}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 3}, \"x\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Mask 1\"}, {\"inv\": false, \"mode\": \"a\", \"pt\": {\"a\": 0, \"k\": {\"i\": [[-96.65, 0], [0, -69.036], [96.65, 0], [0, 69.036]], \"o\": [[96.65, 0], [0, 69.036], [-96.65, 0], [0, -69.036]], \"v\": [[250, 125], [425, 250], [250, 375], [75, 250]], \"c\": true}, \"ix\": 1}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 3}, \"x\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Mask 2\"}], \"sw\": 500, \"sh\": 500, \"sc\": \"#97f487\", \"ip\": 0, \"op\": 150, \"st\": 0, \"bm\": 0}], \"markers\": [], \"props\": {}}, function (lottie, data) { let mask1 = lottie.layers[1].masksProperties[0]; let mask2 = lottie.layers[1].masksProperties[1]; mask1.o.k = Number(data[\"Mask1 Opacity\"]); mask2.o.k = Number(data[\"Mask2 Opacity\"]); mask2.mode = data[\"Mask Mode\"]; this.json_viewer_contents = lottie.layers[1].masksProperties[1]; }, {} ); Stroke Dash Type Type of a dash item in a stroked line Value Name 'd' Dash 'g' Gap 'o' Offset Matte Mode How a layer should mask another layer The value for Luma is calculated according to Rec.709 standard: Y = 0.2126 R + 0.7152 G + 0.0722 B Value Name Description 0 Normal The layer is not used as a track matte 1 Alpha The masked layer opacity is modulated by the track matte layer opacity 2 Inverted Alpha The masked layer opacity is modulated by the inverted track matte layer opacity 3 Luma The masked layer opacity is modulated by the track matte layer luminance 4 Inverted Luma The masked layer opacity is modulated by the inverted track matte layer luminance Example Matte Mode Normal Alpha Inverted Alpha Luma Inverted Luma var lottie_player_10 = new PlaygroundPlayer( 10, 'playground_10_2', 'lottie_target_10', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{b3d1b083-9de7-4537-a691-fc9aa42f9742}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Ellipse (Mask)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [153, 294]}, \"p\": {\"a\": 0, \"k\": [346, 211]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"mn\": \"{261eddeb-af92-4be1-932c-790b00c23933}\", \"p\": {\"a\": 0, \"k\": [137.0955223880597, 293.60820895522386]}, \"s\": {\"a\": 0, \"k\": [303.42089552238804, 315.55074626865667]}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{aa9c282c-253d-4d8d-ab05-4819c592fa85}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 1, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 6}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{2b2b0002-ff0c-4978-a33b-db4e0498848d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}], \"td\": 1}, {\"ddd\": 0, \"ty\": 4, \"ind\": 2, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Shapes (Masked)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{528994b7-40ff-4d12-81f8-603f274da12e}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{ce8756d7-289f-4f84-a135-d225d57c42e0}\", \"p\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"or\": {\"a\": 0, \"k\": 216.4160919189453}, \"ir\": {\"a\": 0, \"k\": 87.03440856933594}, \"r\": {\"a\": 0, \"k\": 261.54803466796875}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{efd05a25-a43b-451d-83d2-53a477087223}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{523ca39c-9e57-4547-bf0e-ba7496003579}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.19607843137254902, 0.3137254901960784, 0.6901960784313725]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"p\": {\"a\": 0, \"k\": [338.7223880597015, 209.76716417910447]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"Rectangle\", \"mn\": \"{d2d7a5d5-6d91-42e8-b40a-af52a112fe38}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{9ef8604e-7891-4909-a655-445131b4d842}\", \"p\": {\"a\": 0, \"k\": [209.17611940298502, 226.8]}, \"s\": {\"a\": 0, \"k\": [363.3313432835821, 369.3492537313433]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{444584d2-cb59-4cba-83a1-82cc605837fd}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{f75aed67-9b0e-41a9-b859-a14b5b0a320d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.7686274509803922, 0.8509803921568627, 0.9607843137254902]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"p\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}], \"tt\": 1, \"tp\": 1}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[1].tt = Number(data[\"Matte Mode\"]); this.json_viewer_contents = {...lottie.layers[1], shapes: [], ks: {}}; }, {} ); Gradient Type Whether a Gradient is a linear or radial. Value Name Description 1 Linear Colors transition in a single linear direction. 2 Radial Colors transition outward from a center point. Example Type Linear Radial var lottie_player_11 = new PlaygroundPlayer( 11, 'playground_11_2', 'lottie_target_11', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{3da63a46-0ec5-45b8-90fb-d31c5614d5be}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Start/End markers\", \"mn\": \"{04a8ef87-75fd-451c-868b-7413969c8ad9}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{078a0bf7-08ce-49f7-9dca-c473ad9ff09d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{efb1ff36-fe2b-4939-97a5-d75a167d003b}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{759da60a-0439-496c-89a9-66e1d721ceb7}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"\", \"mn\": \"{b56ba91b-5ef9-40d2-a1da-27265d105c7a}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{020e377d-646e-45f6-830f-756cfff57aa9}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[3.7994567051676293, -7.097994637365934], [5.33994951436286, -6.707992504500113], [6.327946284594615, -5.609490432573314], [6.672442201680043, -3.952002315682892], [6.672442201680043, -3.262995246756169], [1.901449879997, -3.262995246756169], [2.505949758118953, -1.4624984765244131], [4.124444517362934, -0.8449957342683567], [5.300948539338484, -0.968496282719568], [6.360449636240906, -1.326002681317033], [6.360449636240906, -0.32500304695117377], [5.307446162716568, 0.019500487512187806], [4.072448295582389, 0.12999817182929574], [2.3239477471311782, -0.2729992077926948], [1.1409537191554788, -1.4755013406585165], [0.7184558520213006, -3.4319943936098403], [1.1019527441311032, -5.395000304695118], [2.1809543285457136, -6.655996282719569], [3.7994567051676293, -7.097994637365934]], \"i\": [[0, 0], [-0.4290005687642191, -0.2600014219105473], [-0.22966394472361795, -0.4723332927073187], [0, -0.6326587852196304], [0, 0], [0, 0], [-0.3856627665691641, -0.411668494837371], [-0.69333373959349, 0], [-0.34233512087802254, 0.08233369896747422], [-0.3639989437235931, 0.15600390009750242], [0, 0], [0.34666686979674477, -0.07366512287807196], [0.47666504162604095, 0], [0.506997440561014, 0.2686649197479937], [0.281665244756119, 0.5330031688292207], [0, 0.7713255331383286], [-0.25566459473986836, 0.5459984155853892], [-0.4636697948698716, 0.29466556976424485], [-0.6153317895447388, 0]], \"o\": [[0.5979946373659342, 0], [0.4290005687642182, 0.2600014219105473], [0.22966394472361795, 0.47233329270731783], [0, 0], [0, 0], [0.017337152178804383, 0.7886626853171328], [0.3856627665691641, 0.411668494837371], [0.4420008937723443, 0], [0.34233512087802165, -0.08233369896747411], [0, 0], [-0.35533544588614685, 0.15600390009750242], [-0.34666686979674477, 0.07366512287807195], [-0.6586695917397929, 0], [-0.5069974405610138, -0.26866491974799367], [-0.28166524475611887, -0.5330031688292207], [0, -0.7626721918047954], [0.2556645947398686, -0.5459984155853901], [0.46366979486987203, -0.29466556976424396], [0, 0]]}}}, {\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{b3f5759c-30aa-4352-a4ea-23b71ead28ad}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[3.7864462236555916, -6.162001706292657], [2.4929545113627842, -5.635496160841521], [1.9274556082652068, -4.172997684317108], [5.476452926948174, -4.172997684317108], [5.06045268319208, -5.609498049951249], [3.7864462236555916, -6.162001706292657]], \"i\": [[0, 0], [0.3163344708617717, -0.3510036969674246], [0.06066479786994661, -0.6239952873821846], [0, 0], [0.2686699979999494, 0.36833577089427205], [0.5806676416910426, 0]], \"o\": [[-0.5459933373334334, 0], [-0.3163344708617717, 0.3510036969674246], [0, 0], [-0.008663497837446243, -0.5893311395284879], [-0.2686699979999503, -0.36833577089427205], [0, 0]]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 16]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{e16b0057-203a-4dab-8e5b-495775987f85}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{07bcfe04-40c2-4636-807c-d64982f7a44d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{0de90988-3e53-4e7a-8a7d-cb147d0c42b5}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{22460e65-f67b-48b8-844b-e361867d003b}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[5.645452073801845, -1.923997318682967], [4.891453536338409, -0.39000213286582164], [2.8634485393384836, 0.12999817182929574], [1.608957802070052, 0.013002864134103353], [0.679454876996925, -0.311992565439136], [0.679454876996925, -1.3519931748293708], [1.6869521347408687, -0.968496282719568], [2.8894542676066903, -0.7929995124878122], [4.150450245631141, -1.0724963436585915], [4.540444761119028, -1.820004875121878], [4.3974513425335635, -2.2880013406585165], [3.8839562785944652, -2.7040015844146104], [2.824447564314108, -3.171998049951249], [1.6674516472286809, -3.6919983546463664], [0.9264559738993475, -4.315998720280507], [0.666459630240756, -5.251999268731718], [1.3879548160579016, -6.616995307695193], [3.2794487830945775, -7.097994637365934], [4.468948051826296, -6.9744940889147236], [5.502443420460512, -6.629998171829296], [5.1124489049726245, -5.719995734268357], [4.189443603277582, -6.031995917085427], [3.2014468330458263, -6.162001706292657], [2.128950489387235, -5.934501096902423], [1.7584564614115354, -5.316990737268432], [1.9274556082652068, -4.82950140159754], [2.4929545113627842, -4.439499268731718], [3.552455608265207, -3.9910032907072677], [4.683453414460362, -3.4839982327683194], [5.398450976899423, -2.853500243756094], [5.645452073801845, -1.923997318682967]], \"i\": [[0, 0], [0.5026656916422914, -0.346666869796745], [0.8493376396909924, 0], [0.35099861871546767, 0.07799687179679493], [0.26866999799995006, 0.13866674791869799], [0, 0], [-0.3943313426585666, -0.11699784682117054], [-0.4073367459186481, 0], [-0.2599963436585919, 0.18633122078051945], [0, 0.31200780019500485], [0.09532894572364281, 0.13866674791869782], [0.2470010969024221, 0.13866674791869782], [0.45933804595114847, 0.17333089577239447], [0.32066621978049437, 0.17333597402435075], [0.17333089577239413, 0.24266426973174227], [0, 0.38133609590239725], [-0.48099679054476374, 0.32066621978049437], [-0.779999187479687, 0], [-0.36833577089427294, -0.08233369896747345], [-0.32066114152853853, -0.14733024575614362], [0, 0], [0.32066621978049437, 0.08667052613815329], [0.3379982937073427, 0], [0.24699601865046583, -0.15166707292682258], [0, -0.2600065001625049], [-0.11266609790244764, -0.13433499899997603], [-0.26433317082927044, -0.12566642291057306], [-0.4420008937723443, -0.17333089577239447], [-0.3119976436910923, -0.1733359740243503], [-0.16466739793494867, -0.24699601865046628], [0, -0.3726725980649519]], \"o\": [[0, 0.6759965874146854], [-0.5026656916422914, 0.3466668697967449], [-0.4853285394634863, 0], [-0.3509986187154679, -0.07799687179679493], [0, 0], [0.27733349583739597, 0.13866674791869804], [0.3943313426585664, 0.11699784682117043], [0.5806676416910421, 0], [0.2599963436585915, -0.18633122078051967], [0, -0.17333089577239424], [-0.09532894572364281, -0.13866674791869826], [-0.24700109690242256, -0.13866674791869826], [-0.45066439160979055, -0.17333089577239447], [-0.3206662197804946, -0.1733359740243503], [-0.17333089577239436, -0.24266426973174315], [0, -0.5893311395284879], [0.4809967905447634, -0.3206662197804935], [0.4246637415935397, 0], [0.36833577089427205, 0.08233369896747433], [0, 0], [-0.2946706480162007, -0.12132959573989321], [-0.3206662197804948, -0.08667052613815329], [-0.4680015437885947, 0], [-0.2469960186504665, 0.15166707292682347], [0, 0.1906578914472865], [0.11266609790244786, 0.13433499899997514], [0.26433317082927044, 0.12566642291057306], [0.44200089377234475, 0.16466739793494822], [0.3119976436910914, 0.17333597402435075], [0.16466739793494867, 0.24699601865046583], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 496]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{a5276bb6-4d7c-4b4f-b371-a0e14a279176}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Gradient\", \"mn\": \"{9df3ba96-24a3-412e-abd4-e64e2e76e6df}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{20934ad0-1c22-4752-a5b1-be99889ea79a}\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [512, 512]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"gf\", \"nm\": \"Gradient Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"r\": 1, \"s\": {\"a\": 0, \"k\": [256, 496]}, \"e\": {\"a\": 0, \"k\": [256, 16]}, \"t\": 1, \"h\": {\"a\": 0, \"k\": 0}, \"a\": {\"a\": 0, \"k\": 0}, \"g\": {\"p\": 3, \"k\": {\"a\": 0, \"k\": [0, 0.7686274509803922, 0.8509803921568627, 0.9607843137254902, 0.5, 0.19600213626306554, 0.31400015259021896, 0.6899977111467155, 1, 0.16099794003204396, 0.18399328603036547, 0.45900663767452504, 0, 1, 0.5, 1, 1, 1]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"p\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var gradient = lottie.layers[1].shapes[0].it[1]; gradient.t = Number(data[\"Type\"]); this.json_viewer_contents = lottie.layers[1].shapes[0].it[1]; }, {} );","title":"Enumerations"},{"location":"specs/constants/#enumerations","text":"","title":"Enumerations"},{"location":"specs/constants/#fill-rule","text":"Rule used to handle multiple shapes rendered with the same fill object Value Name Description 1 Non Zero Everything is colored (You can think of this as an OR) 2 Even Odd Colored based on intersections and path direction, can be used to create \"holes\" Example Fill Rule Non Zero Even Odd var lottie_player_3 = new PlaygroundPlayer( 3, 'playground_3_2', 'lottie_target_3', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{f5d94f54-bb8f-4f07-be45-232ebd4b9eb1}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{4b0993ed-e35b-48a5-ab12-687dbc147c7c}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Path\", \"mn\": \"{29196ff2-0a65-48b4-a450-f9fbc3a3640d}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"Path\", \"mn\": \"{bb7e6c60-755e-4a21-a7ba-bd054feab5c7}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[125.51641791044776, 452.20298507462684], [240.71641791044777, 38.6865671641791], [435.8686567164179, 447.9044776119403], [42.125373134328356, 173.65970149253732], [460.8, 156.46567164179103]], \"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"p\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[0].it[1]; shape.r = Number(data[\"Fill Rule\"]); this.json_viewer_contents = lottie.layers[0].shapes[0].it[1]; }, {} );","title":"Fill Rule"},{"location":"specs/constants/#trim-multiple-shapes","text":"How to handle multiple shapes in trim path Value Name Description 1 Parallel All shapes apply the trim at the same time 2 Sequential Shapes are considered as a continuous sequence Multiple Shapes Parallel Sequential var lottie_player_4 = new PlaygroundPlayer( 4, 'playground_4_2', 'lottie_target_4', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [128, 128]}, \"or\": {\"a\": 0, \"k\": 100}, \"ir\": {\"a\": 0, \"k\": 50}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [384, 128]}, \"s\": {\"a\": 0, \"k\": [200, 200]}}, {\"ty\": \"rc\", \"nm\": \"Rect\", \"mn\": \"{0776f2df-2619-415c-b10d-f648f2edfa0f}\", \"d\": 1, \"p\": {\"a\": 0, \"k\": [128, 384]}, \"s\": {\"a\": 0, \"k\": [200, 200]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"sr\", \"nm\": \"Triangle\", \"mn\": \"{db373594-d0ae-44ff-9295-30ff72616af2}\", \"p\": {\"a\": 0, \"k\": [384, 384]}, \"or\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 3}, \"sy\": 2, \"os\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 50}, \"o\": {\"a\": 0, \"k\": 0}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 20}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { lottie.layers[0].shapes[4].m = Number(data[\"Multiple Shapes\"]); this.json_viewer_contents = lottie.layers[0].shapes[4]; }, {} );","title":"Trim Multiple Shapes"},{"location":"specs/constants/#shape-direction","text":"Drawing direction of the shape curve, useful for trim path Value Name Description 1 Normal Usually clockwise 3 Reversed Usually counter clockwise Shape Direction Normal Reversed var lottie_player_5 = new PlaygroundPlayer( 5, 'playground_5_2', 'lottie_target_5', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [128, 128]}, \"or\": {\"a\": 0, \"k\": 100}, \"ir\": {\"a\": 0, \"k\": 50}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [384, 128]}, \"s\": {\"a\": 0, \"k\": [200, 200]}}, {\"ty\": \"rc\", \"nm\": \"Rect\", \"mn\": \"{0776f2df-2619-415c-b10d-f648f2edfa0f}\", \"d\": 1, \"p\": {\"a\": 0, \"k\": [128, 384]}, \"s\": {\"a\": 0, \"k\": [200, 200]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"sr\", \"nm\": \"Triangle\", \"mn\": \"{db373594-d0ae-44ff-9295-30ff72616af2}\", \"p\": {\"a\": 0, \"k\": [384, 384]}, \"or\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 3}, \"sy\": 2, \"os\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 50}, \"o\": {\"a\": 0, \"k\": 0}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 20}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { for ( let shape of lottie.layers[0].shapes ) shape.d = Number(data[\"Shape Direction\"]); this.json_viewer_contents = lottie.layers[0].shapes[1]; }, {} );","title":"Shape Direction"},{"location":"specs/constants/#star-type","text":"Whether a PolyStar is a star or a polygon Value Name 1 Star 2 Polygon Example Star Type Star Polygon var lottie_player_6 = new PlaygroundPlayer( 6, 'playground_6_2', 'lottie_target_6', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"layers\": [{\"ty\": 4, \"ddd\": 0, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ip\": 0, \"op\": 180, \"ind\": 0, \"st\": 0, \"sr\": 1, \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{9199543e-3552-4e51-a802-623f2a4a2ca1}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.979995422293431, 0.28000305180437934]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var star = lottie.layers[0].shapes[0].it[0]; star.sy = Number(data[\"Star Type\"]); if ( data[\"Star Type\"] == \"1\" ) { star[\"ir\"] = {\"a\": 0, \"k\": 100}; star[\"is\"] = {\"a\": 0, \"k\": 0}; } else { delete star[\"ir\"]; delete star[\"is\"]; } lottie.layers[0].shapes[0].it[0] = star; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} );","title":"Star Type"},{"location":"specs/constants/#line-cap","text":"Style at the end of a stoked line Value Name 1 Butt 2 Round 3 Square Example Line Cap Butt Round Square var lottie_player_7 = new PlaygroundPlayer( 7, 'playground_7_2', 'lottie_target_7', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.lc = Number(data[\"Line Cap\"]); shape.d = undefined; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} );","title":"Line Cap"},{"location":"specs/constants/#line-join","text":"Style at a sharp corner of a stoked line Value Name 1 Miter 2 Round 3 Bevel Example Line Join Miter Round Bevel Miter Limit 3 var lottie_player_8 = new PlaygroundPlayer( 8, 'playground_8_3', 'lottie_target_8', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.lj = Number(data[\"Line Join\"]); shape.ml = data[\"Miter Limit\"]; shape.d = undefined; var trim = lottie.layers[0].shapes[1]; trim.e.k = 100; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} );","title":"Line Join"},{"location":"specs/constants/#mask-mode","text":"Describes how a mask interacts (blends) with the preceding masks in the stack. Value Name Description 'n' None The mask is ignored. 'a' Add Mask coverage is added (Normal blending). 's' Subtract Mask coverage is subtracted (Subtract blending). 'i' Intersect Mask coverage is intersected (Source-In blending). Example Mask Mode None Add Subtract Intersect Mask1 Opacity 100 Mask2 Opacity 100 var lottie_player_9 = new PlaygroundPlayer( 9, 'playground_9_4', 'lottie_target_9', {\"v\": \"5.12.0\", \"fr\": 30, \"ip\": 0, \"op\": 150, \"w\": 500, \"h\": 500, \"nm\": \"test2\", \"ddd\": 0, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ind\": 0, \"ty\": \"sh\", \"ix\": 1, \"ks\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"v\": [[0, -250], [58.779, -80.902], [237.764, -77.254], [95.106, 30.902], [146.946, 202.254], [0, 100], [-146.946, 202.254], [-95.106, 30.902], [-237.764, -77.254], [-58.779, -80.902]], \"c\": true}, \"ix\": 2}, \"nm\": \"Path 1\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ind\": 1, \"ty\": \"sh\", \"ix\": 2, \"ks\": {\"a\": 0, \"k\": {\"i\": [[-96.65, 0], [0, -69.036], [96.65, 0], [0, 69.036]], \"o\": [[96.65, 0], [0, 69.036], [-96.65, 0], [0, -69.036]], \"v\": [[0, -125], [175, 0], [0, 125], [-175, 0]], \"c\": true}, \"ix\": 2}, \"nm\": \"Path 2\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [1, 0, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 1, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"d\": [{\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 10, \"ix\": 1}}, {\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0, \"ix\": 7}}], \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 150, \"st\": 0, \"ct\": 1, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 1, \"nm\": \"Medium Green Solid 3\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"hasMask\": true, \"masksProperties\": [{\"inv\": false, \"mode\": \"a\", \"pt\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"v\": [[250, 0], [308.779, 169.098], [487.764, 172.746], [345.106, 280.902], [396.946, 452.254], [250, 350], [103.054, 452.254], [154.894, 280.902], [12.236, 172.746], [191.221, 169.098]], \"c\": true}, \"ix\": 1}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 3}, \"x\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Mask 1\"}, {\"inv\": false, \"mode\": \"a\", \"pt\": {\"a\": 0, \"k\": {\"i\": [[-96.65, 0], [0, -69.036], [96.65, 0], [0, 69.036]], \"o\": [[96.65, 0], [0, 69.036], [-96.65, 0], [0, -69.036]], \"v\": [[250, 125], [425, 250], [250, 375], [75, 250]], \"c\": true}, \"ix\": 1}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 3}, \"x\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Mask 2\"}], \"sw\": 500, \"sh\": 500, \"sc\": \"#97f487\", \"ip\": 0, \"op\": 150, \"st\": 0, \"bm\": 0}], \"markers\": [], \"props\": {}}, function (lottie, data) { let mask1 = lottie.layers[1].masksProperties[0]; let mask2 = lottie.layers[1].masksProperties[1]; mask1.o.k = Number(data[\"Mask1 Opacity\"]); mask2.o.k = Number(data[\"Mask2 Opacity\"]); mask2.mode = data[\"Mask Mode\"]; this.json_viewer_contents = lottie.layers[1].masksProperties[1]; }, {} );","title":"Mask Mode"},{"location":"specs/constants/#stroke-dash-type","text":"Type of a dash item in a stroked line Value Name 'd' Dash 'g' Gap 'o' Offset","title":"Stroke Dash Type"},{"location":"specs/constants/#matte-mode","text":"How a layer should mask another layer The value for Luma is calculated according to Rec.709 standard: Y = 0.2126 R + 0.7152 G + 0.0722 B Value Name Description 0 Normal The layer is not used as a track matte 1 Alpha The masked layer opacity is modulated by the track matte layer opacity 2 Inverted Alpha The masked layer opacity is modulated by the inverted track matte layer opacity 3 Luma The masked layer opacity is modulated by the track matte layer luminance 4 Inverted Luma The masked layer opacity is modulated by the inverted track matte layer luminance Example Matte Mode Normal Alpha Inverted Alpha Luma Inverted Luma var lottie_player_10 = new PlaygroundPlayer( 10, 'playground_10_2', 'lottie_target_10', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{b3d1b083-9de7-4537-a691-fc9aa42f9742}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Ellipse (Mask)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [153, 294]}, \"p\": {\"a\": 0, \"k\": [346, 211]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"mn\": \"{261eddeb-af92-4be1-932c-790b00c23933}\", \"p\": {\"a\": 0, \"k\": [137.0955223880597, 293.60820895522386]}, \"s\": {\"a\": 0, \"k\": [303.42089552238804, 315.55074626865667]}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{aa9c282c-253d-4d8d-ab05-4819c592fa85}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 1, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 6}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{2b2b0002-ff0c-4978-a33b-db4e0498848d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}], \"td\": 1}, {\"ddd\": 0, \"ty\": 4, \"ind\": 2, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Shapes (Masked)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{528994b7-40ff-4d12-81f8-603f274da12e}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{ce8756d7-289f-4f84-a135-d225d57c42e0}\", \"p\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"or\": {\"a\": 0, \"k\": 216.4160919189453}, \"ir\": {\"a\": 0, \"k\": 87.03440856933594}, \"r\": {\"a\": 0, \"k\": 261.54803466796875}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{efd05a25-a43b-451d-83d2-53a477087223}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{523ca39c-9e57-4547-bf0e-ba7496003579}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.19607843137254902, 0.3137254901960784, 0.6901960784313725]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"p\": {\"a\": 0, \"k\": [338.7223880597015, 209.76716417910447]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"Rectangle\", \"mn\": \"{d2d7a5d5-6d91-42e8-b40a-af52a112fe38}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{9ef8604e-7891-4909-a655-445131b4d842}\", \"p\": {\"a\": 0, \"k\": [209.17611940298502, 226.8]}, \"s\": {\"a\": 0, \"k\": [363.3313432835821, 369.3492537313433]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{444584d2-cb59-4cba-83a1-82cc605837fd}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{f75aed67-9b0e-41a9-b859-a14b5b0a320d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.7686274509803922, 0.8509803921568627, 0.9607843137254902]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"p\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}], \"tt\": 1, \"tp\": 1}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[1].tt = Number(data[\"Matte Mode\"]); this.json_viewer_contents = {...lottie.layers[1], shapes: [], ks: {}}; }, {} );","title":"Matte Mode"},{"location":"specs/constants/#gradient-type","text":"Whether a Gradient is a linear or radial. Value Name Description 1 Linear Colors transition in a single linear direction. 2 Radial Colors transition outward from a center point. Example Type Linear Radial var lottie_player_11 = new PlaygroundPlayer( 11, 'playground_11_2', 'lottie_target_11', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{3da63a46-0ec5-45b8-90fb-d31c5614d5be}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Start/End markers\", \"mn\": \"{04a8ef87-75fd-451c-868b-7413969c8ad9}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{078a0bf7-08ce-49f7-9dca-c473ad9ff09d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{efb1ff36-fe2b-4939-97a5-d75a167d003b}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{759da60a-0439-496c-89a9-66e1d721ceb7}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"\", \"mn\": \"{b56ba91b-5ef9-40d2-a1da-27265d105c7a}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{020e377d-646e-45f6-830f-756cfff57aa9}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[3.7994567051676293, -7.097994637365934], [5.33994951436286, -6.707992504500113], [6.327946284594615, -5.609490432573314], [6.672442201680043, -3.952002315682892], [6.672442201680043, -3.262995246756169], [1.901449879997, -3.262995246756169], [2.505949758118953, -1.4624984765244131], [4.124444517362934, -0.8449957342683567], [5.300948539338484, -0.968496282719568], [6.360449636240906, -1.326002681317033], [6.360449636240906, -0.32500304695117377], [5.307446162716568, 0.019500487512187806], [4.072448295582389, 0.12999817182929574], [2.3239477471311782, -0.2729992077926948], [1.1409537191554788, -1.4755013406585165], [0.7184558520213006, -3.4319943936098403], [1.1019527441311032, -5.395000304695118], [2.1809543285457136, -6.655996282719569], [3.7994567051676293, -7.097994637365934]], \"i\": [[0, 0], [-0.4290005687642191, -0.2600014219105473], [-0.22966394472361795, -0.4723332927073187], [0, -0.6326587852196304], [0, 0], [0, 0], [-0.3856627665691641, -0.411668494837371], [-0.69333373959349, 0], [-0.34233512087802254, 0.08233369896747422], [-0.3639989437235931, 0.15600390009750242], [0, 0], [0.34666686979674477, -0.07366512287807196], [0.47666504162604095, 0], [0.506997440561014, 0.2686649197479937], [0.281665244756119, 0.5330031688292207], [0, 0.7713255331383286], [-0.25566459473986836, 0.5459984155853892], [-0.4636697948698716, 0.29466556976424485], [-0.6153317895447388, 0]], \"o\": [[0.5979946373659342, 0], [0.4290005687642182, 0.2600014219105473], [0.22966394472361795, 0.47233329270731783], [0, 0], [0, 0], [0.017337152178804383, 0.7886626853171328], [0.3856627665691641, 0.411668494837371], [0.4420008937723443, 0], [0.34233512087802165, -0.08233369896747411], [0, 0], [-0.35533544588614685, 0.15600390009750242], [-0.34666686979674477, 0.07366512287807195], [-0.6586695917397929, 0], [-0.5069974405610138, -0.26866491974799367], [-0.28166524475611887, -0.5330031688292207], [0, -0.7626721918047954], [0.2556645947398686, -0.5459984155853901], [0.46366979486987203, -0.29466556976424396], [0, 0]]}}}, {\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{b3f5759c-30aa-4352-a4ea-23b71ead28ad}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[3.7864462236555916, -6.162001706292657], [2.4929545113627842, -5.635496160841521], [1.9274556082652068, -4.172997684317108], [5.476452926948174, -4.172997684317108], [5.06045268319208, -5.609498049951249], [3.7864462236555916, -6.162001706292657]], \"i\": [[0, 0], [0.3163344708617717, -0.3510036969674246], [0.06066479786994661, -0.6239952873821846], [0, 0], [0.2686699979999494, 0.36833577089427205], [0.5806676416910426, 0]], \"o\": [[-0.5459933373334334, 0], [-0.3163344708617717, 0.3510036969674246], [0, 0], [-0.008663497837446243, -0.5893311395284879], [-0.2686699979999503, -0.36833577089427205], [0, 0]]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 16]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{e16b0057-203a-4dab-8e5b-495775987f85}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{07bcfe04-40c2-4636-807c-d64982f7a44d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{0de90988-3e53-4e7a-8a7d-cb147d0c42b5}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{22460e65-f67b-48b8-844b-e361867d003b}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[5.645452073801845, -1.923997318682967], [4.891453536338409, -0.39000213286582164], [2.8634485393384836, 0.12999817182929574], [1.608957802070052, 0.013002864134103353], [0.679454876996925, -0.311992565439136], [0.679454876996925, -1.3519931748293708], [1.6869521347408687, -0.968496282719568], [2.8894542676066903, -0.7929995124878122], [4.150450245631141, -1.0724963436585915], [4.540444761119028, -1.820004875121878], [4.3974513425335635, -2.2880013406585165], [3.8839562785944652, -2.7040015844146104], [2.824447564314108, -3.171998049951249], [1.6674516472286809, -3.6919983546463664], [0.9264559738993475, -4.315998720280507], [0.666459630240756, -5.251999268731718], [1.3879548160579016, -6.616995307695193], [3.2794487830945775, -7.097994637365934], [4.468948051826296, -6.9744940889147236], [5.502443420460512, -6.629998171829296], [5.1124489049726245, -5.719995734268357], [4.189443603277582, -6.031995917085427], [3.2014468330458263, -6.162001706292657], [2.128950489387235, -5.934501096902423], [1.7584564614115354, -5.316990737268432], [1.9274556082652068, -4.82950140159754], [2.4929545113627842, -4.439499268731718], [3.552455608265207, -3.9910032907072677], [4.683453414460362, -3.4839982327683194], [5.398450976899423, -2.853500243756094], [5.645452073801845, -1.923997318682967]], \"i\": [[0, 0], [0.5026656916422914, -0.346666869796745], [0.8493376396909924, 0], [0.35099861871546767, 0.07799687179679493], [0.26866999799995006, 0.13866674791869799], [0, 0], [-0.3943313426585666, -0.11699784682117054], [-0.4073367459186481, 0], [-0.2599963436585919, 0.18633122078051945], [0, 0.31200780019500485], [0.09532894572364281, 0.13866674791869782], [0.2470010969024221, 0.13866674791869782], [0.45933804595114847, 0.17333089577239447], [0.32066621978049437, 0.17333597402435075], [0.17333089577239413, 0.24266426973174227], [0, 0.38133609590239725], [-0.48099679054476374, 0.32066621978049437], [-0.779999187479687, 0], [-0.36833577089427294, -0.08233369896747345], [-0.32066114152853853, -0.14733024575614362], [0, 0], [0.32066621978049437, 0.08667052613815329], [0.3379982937073427, 0], [0.24699601865046583, -0.15166707292682258], [0, -0.2600065001625049], [-0.11266609790244764, -0.13433499899997603], [-0.26433317082927044, -0.12566642291057306], [-0.4420008937723443, -0.17333089577239447], [-0.3119976436910923, -0.1733359740243503], [-0.16466739793494867, -0.24699601865046628], [0, -0.3726725980649519]], \"o\": [[0, 0.6759965874146854], [-0.5026656916422914, 0.3466668697967449], [-0.4853285394634863, 0], [-0.3509986187154679, -0.07799687179679493], [0, 0], [0.27733349583739597, 0.13866674791869804], [0.3943313426585664, 0.11699784682117043], [0.5806676416910421, 0], [0.2599963436585915, -0.18633122078051967], [0, -0.17333089577239424], [-0.09532894572364281, -0.13866674791869826], [-0.24700109690242256, -0.13866674791869826], [-0.45066439160979055, -0.17333089577239447], [-0.3206662197804946, -0.1733359740243503], [-0.17333089577239436, -0.24266426973174315], [0, -0.5893311395284879], [0.4809967905447634, -0.3206662197804935], [0.4246637415935397, 0], [0.36833577089427205, 0.08233369896747433], [0, 0], [-0.2946706480162007, -0.12132959573989321], [-0.3206662197804948, -0.08667052613815329], [-0.4680015437885947, 0], [-0.2469960186504665, 0.15166707292682347], [0, 0.1906578914472865], [0.11266609790244786, 0.13433499899997514], [0.26433317082927044, 0.12566642291057306], [0.44200089377234475, 0.16466739793494822], [0.3119976436910914, 0.17333597402435075], [0.16466739793494867, 0.24699601865046583], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 496]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{a5276bb6-4d7c-4b4f-b371-a0e14a279176}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Gradient\", \"mn\": \"{9df3ba96-24a3-412e-abd4-e64e2e76e6df}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{20934ad0-1c22-4752-a5b1-be99889ea79a}\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [512, 512]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"gf\", \"nm\": \"Gradient Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"r\": 1, \"s\": {\"a\": 0, \"k\": [256, 496]}, \"e\": {\"a\": 0, \"k\": [256, 16]}, \"t\": 1, \"h\": {\"a\": 0, \"k\": 0}, \"a\": {\"a\": 0, \"k\": 0}, \"g\": {\"p\": 3, \"k\": {\"a\": 0, \"k\": [0, 0.7686274509803922, 0.8509803921568627, 0.9607843137254902, 0.5, 0.19600213626306554, 0.31400015259021896, 0.6899977111467155, 1, 0.16099794003204396, 0.18399328603036547, 0.45900663767452504, 0, 1, 0.5, 1, 1, 1]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"p\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var gradient = lottie.layers[1].shapes[0].it[1]; gradient.t = Number(data[\"Type\"]); this.json_viewer_contents = lottie.layers[1].shapes[0].it[1]; }, {} );","title":"Gradient Type"},{"location":"specs/glossary/","text":"Glossary local coordinates The local coordinate system is the coordinate system of the current group or layer, with the X coordinate increasing towards the right and the Y coordinate increasing towards the bottom. Without any transforms, the point ( 0 , 0 ) corresponds with the top-left corner of the viewport. render stack A render stack is a list if rendering primitive to be drawn in inverse stack order. A render stack can contain child stacks. stacking order The order in which objects appear in the render stack . collected shapes When collecting shapes for a rendering operation, implementations MUST traverse the render stack in reverse order. All Shapes encountered in the stack traversal MUST be included, until the beginning of the stack is reached or a Modifier is encountered. If a Modifier is found, it MUST be applied to its own collected shapes and the output added to the shape collection.","title":"Glossary"},{"location":"specs/glossary/#glossary","text":"local coordinates The local coordinate system is the coordinate system of the current group or layer, with the X coordinate increasing towards the right and the Y coordinate increasing towards the bottom. Without any transforms, the point ( 0 , 0 ) corresponds with the top-left corner of the viewport. render stack A render stack is a list if rendering primitive to be drawn in inverse stack order. A render stack can contain child stacks. stacking order The order in which objects appear in the render stack . collected shapes When collecting shapes for a rendering operation, implementations MUST traverse the render stack in reverse order. All Shapes encountered in the stack traversal MUST be included, until the beginning of the stack is reached or a Modifier is encountered. If a Modifier is found, it MUST be applied to its own collected shapes and the output added to the shape collection.","title":"Glossary"},{"location":"specs/helpers/","text":"Helpers Transform Layer transform Composition Diagram for Transform Transform Transform Shape Attribute Type Title Description a Position Anchor Point Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale) p Splittable Position Position Position / Translation r Scalar Rotation Rotation in degrees, clockwise s Vector Scale Scale factor, [100, 100] for no scaling o Scalar Opacity Opacity sk Scalar Skew Skew amount as an angle in degrees sa Scalar Skew Axis Direction along which skew is applied, in degrees ( 0 skews along the X axis, 90 along the Y axis) To make the anchor point properly line up with the center of location, p and a should have the same value. This example allows you to tweak transform attributes and see how the shape changes. The anchor point is highlighted with an orange dot. Anchor X 256 Anchor Y 256 Position X 256 Position Y 256 Scale X 100 Scale Y 100 Rotation 0 Skew 0 Skew Angle 0 Opacity 100 var lottie_player_12 = new PlaygroundPlayer( 12, 'playground_12_11', 'lottie_target_12', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{a3bb98c7-d0dd-4484-b6da-74a0e70eaf2f}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 2, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Anchor\", \"mn\": \"{04f9b742-3603-49fa-9552-ea04de1a3f33}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"mn\": \"{4251e46a-bb13-464b-913c-e67c44a218da}\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [32, 32]}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{7d3070ed-88a3-41aa-a62e-7db8df1bd312}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Transformed\", \"mn\": \"{d00298c4-66b4-4ae4-a730-22c1eb85c188}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}, \"sk\": {\"a\": 0, \"k\": 0}, \"sa\": {\"a\": 0, \"k\": 0}}, \"shapes\": [{\"ty\": \"rc\", \"nm\": \"Rectangle 1\", \"mn\": \"{bf8ad877-113b-4df8-a2e2-3bb4af32edf7}\", \"p\": {\"a\": 0, \"k\": [252.75223880597017, 250.60298507462684]}, \"s\": {\"a\": 0, \"k\": [319.8089552238806, 330.98507462686564]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{b9040dc8-0753-4a6e-b5f1-d508d17bbd4f}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.19607843137254902, 0.3137254901960784, 0.6901960784313725]}, \"r\": 1}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Reference\", \"mn\": \"{8f351be7-8a51-4310-9dc3-59ed21594815}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{cb4f7b74-bed1-493b-a0e6-01b00566aedd}\", \"p\": {\"a\": 0, \"k\": [252.75223880597017, 250.60298507462684]}, \"s\": {\"a\": 0, \"k\": [319.8089552238806, 330.98507462686564]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{05064670-7e14-4141-89c1-e0f0f3a1c57d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.1607843137254902, 0.1843137254901961, 0.4588235294117647]}, \"r\": 1}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { lottie.layers[0].ks.p.k[0] = data[\"Anchor X\"]; lottie.layers[1].ks.a.k[0] = data[\"Anchor X\"]; lottie.layers[0].ks.p.k[1] = data[\"Anchor Y\"]; lottie.layers[1].ks.a.k[1] = data[\"Anchor Y\"]; lottie.layers[1].ks.p.k[0] = data[\"Position X\"]; lottie.layers[1].ks.p.k[1] = data[\"Position Y\"]; lottie.layers[1].ks.s.k[0] = data[\"Scale X\"]; lottie.layers[1].ks.s.k[1] = data[\"Scale Y\"]; lottie.layers[1].ks.r.k = data[\"Rotation\"]; lottie.layers[1].ks.sk.k = data[\"Skew\"]; lottie.layers[1].ks.sa.k = data[\"Skew Angle\"]; lottie.layers[1].ks.o.k = data[\"Opacity\"]; this.json_viewer_contents = lottie.layers[1].ks; }, {} ); Transforms the parent's coordinate system. When calculating the final transform, properties MUST be applied as follows: Translate by \u2212 a Scale by s 100 If s k \u2260 0 : Rotate by \u2212 s a Skew x by tan ( \u2212 s k ) Rotate by s a Rotate by \u2212 r Translate by p Steps that have no effect MAY be skipped. Assuming a transform matrix with the following layout, with the labels equivalent to the CSS matrix transform : ( a b 0 c d 0 e f 1 ) The final transform is given by chaining transform matrices for each transform step: ( 1 0 0 0 1 0 \u2212 a . x \u2212 a . y 1 ) \u00d7 ( s . x 100 0 0 0 s . y 100 0 0 0 1 ) \u00d7 \u00d7 ( cos ( \u2212 s a ) sin ( \u2212 s a ) 0 \u2212 sin ( \u2212 s a ) cos ( \u2212 s a ) 0 0 0 1 ) \u00d7 ( 1 tan ( \u2212 s k ) 0 0 1 0 0 0 1 ) \u00d7 ( cos ( s a ) sin ( s a ) 0 \u2212 sin ( s a ) cos ( s a ) 0 0 0 1 ) \u00d7 \u00d7 ( cos ( \u2212 r ) sin ( \u2212 r ) 0 \u2212 sin ( \u2212 r ) cos ( \u2212 r ) 0 0 0 1 ) \u00d7 ( 1 0 0 0 1 0 p . x p . y 1 ) Note that if the transform matrix is transposed compared to the above: ( a c e b d f 0 0 1 ) The operations need to be chained using right multiplication instead of left multiplication. Visual Object Composition Diagram for Visual Object Visual Object Asset Precomposition Image Animation Layer Visual Layer Solid Layer Image Layer Precomposition Layer Null Layer Shape Layer Graphic Element Group Shape Style Fill Gradient Stroke Gradient Stroke Shape PolyStar Path Rectangle Ellipse Transform Shape Modifier Trim Path Stroke Dash Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like Marker Defines named portions of the composition. Attribute Type Title Description cm string Comment Comment tm number Time Time dr number Duration Duration Slots Slots are a way to define a property value once and use the value in multiple properties. Slot definitions are in a dictionary, the slot definition key is the key that is used to match all properties with a sid field to the same key for replacement. Slot Defines a property value that will be set to all matched properties Attribute Type Title Description p Property Value Property Value Slotabble Object Object that may have its value replaced with a slot value Composition Diagram for Slottable Object Slottable Object Image Slottable Property Vector Property Scalar Property Position Property Color Property Attribute Type Title Description sid string Slot Id Identifier to look up the slot Slotabble Property Property that may have its value replaced with a slot value Composition Diagram for Slottable Property Slottable Property Slottable Object Vector Property Scalar Property Position Property Color Property Attribute Type Title Description sid string Slot Id Identifier to look up the slot Scale X 100 Scale Y 100 Rotation 0 Opacity 100 var lottie_player_13 = new PlaygroundPlayer( 13, 'playground_13_5', 'lottie_target_13', {\"v\": \"5.12.2\", \"fr\": 29.9700012207031, \"ip\": 0, \"op\": 900.000036657751, \"w\": 512, \"h\": 512, \"nm\": \"SlotDemo\", \"ddd\": 0, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [256, 256, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ty\": \"sr\", \"sy\": 2, \"d\": 1, \"pt\": {\"a\": 0, \"k\": 3, \"ix\": 3}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 4}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"or\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"os\": {\"a\": 0, \"k\": 0, \"ix\": 9}, \"ix\": 1, \"nm\": \"Polystar Path 1\", \"mn\": \"ADBE Vector Shape - Star\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 6, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [-128, 128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Polystar 2\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [149.971, 150], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 6, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [128, -128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Ellipse 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"sr\", \"sy\": 1, \"d\": 1, \"pt\": {\"a\": 0, \"k\": 5, \"ix\": 3}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 4}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"ir\": {\"a\": 0, \"k\": 50, \"ix\": 6}, \"is\": {\"a\": 0, \"k\": 0, \"ix\": 8}, \"or\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"os\": {\"a\": 0, \"k\": 0, \"ix\": 9}, \"ix\": 1, \"nm\": \"Polystar Path 1\", \"mn\": \"ADBE Vector Shape - Star\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [128, 128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Polystar 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [150, 150], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [-128, -128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Rectangle 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 4, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 900.000036657751, \"st\": 0, \"ct\": 1, \"bm\": 0}], \"markers\": [], \"props\": {}, \"slots\": {\"rotation\": {\"p\": {\"a\": 0, \"k\": 0}}, \"opacity\": {\"p\": {\"a\": 0, \"k\": 100}}, \"scale\": {\"p\": {\"a\": 0, \"k\": [100, 100]}}}}, function (lottie, data) { lottie.slots.rotation.p.k = data[\"Rotation\"]; lottie.slots.opacity.p.k = data[\"Opacity\"]; lottie.slots.scale.p.k[0] = data[\"Scale X\"]; lottie.slots.scale.p.k[1] = data[\"Scale Y\"]; this.json_viewer_contents = lottie.slots; }, {} ); Mask Mask for layer content. Attribute Type Title Description mode Mask Mode Mode Mode o Scalar Opacity Mask opacity, as a percentage [0..100]. pt Bezier Shape Mask shape Masks provide single-channel coverage information (alpha channel) that modulates the layer's content. When multiple masks are specified, they are combined (blended) into a single coverage buffer, in order, based on the mode operator. Masks are specified in terms of a Path plus additional properties. For a given mask path, the coverage C p a t h is 1 inside the path, 0 outside the path, and possibly in the [ 0 . .1 ] range along the path edges (anti-aliasing). The coverage for a given Mask is C = { C p a t h \u00b7 o p a c i t y , when i n v = f a l s e C p a t h \u2212 1 \u00b7 o p a c i t y , when i n v = t r u e and the cumulative coverage for all masks is C c u m u l a t i v e = \u220f k = 1 n C k where the product operator is determined by mode . Then the final layer coverage (alpha channel) is C l a y e r \u2032 = C l a y e r \u00b7 C c u m u l a t i v e Example Opacity 100 var lottie_player_14 = new PlaygroundPlayer( 14, 'playground_14_2', 'lottie_target_14', {\"v\": \"5.12.0\", \"fr\": 60, \"ip\": 0, \"op\": 601, \"w\": 500, \"h\": 500, \"nm\": \"test3\", \"ddd\": 0, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 2\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ind\": 0, \"ty\": \"sh\", \"ix\": 1, \"ks\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"v\": [[0, -200], [86.603, -50], [173.205, 100], [0, 100], [-173.205, 100], [-86.603, -50]], \"c\": true}, \"ix\": 2}, \"nm\": \"Path 1\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [1, 0, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 2, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"d\": [{\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 10, \"ix\": 1}}, {\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0, \"ix\": 7}}], \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}], \"ip\": 0, \"op\": 601, \"st\": 0, \"ct\": 1, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"hasMask\": true, \"masksProperties\": [{\"inv\": false, \"mode\": \"a\", \"pt\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0]], \"v\": [[0.5, -199.5], [173.705, 100.5], [-172.705, 100.5]], \"c\": true}, \"ix\": 1}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 3}, \"x\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Mask 1\"}], \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [200, 200], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [100, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0, 1, 0.250980407, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 75, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 600, \"s\": [360]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 3\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"sr\", \"sy\": 1, \"d\": 1, \"pt\": {\"a\": 0, \"k\": 5, \"ix\": 3}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 4}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"ir\": {\"a\": 0, \"k\": 50, \"ix\": 6}, \"is\": {\"a\": 0, \"k\": 0, \"ix\": 8}, \"or\": {\"a\": 0, \"k\": 162, \"ix\": 7}, \"os\": {\"a\": 0, \"k\": 0, \"ix\": 9}, \"ix\": 1, \"nm\": \"Polystar Path 1\", \"mn\": \"ADBE Vector Shape - Star\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 0.250980407, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 75, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 600, \"s\": [720]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [175, 175], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [-90, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.250980407, 0, 1, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 75, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 600, \"s\": [-360]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 601, \"st\": 0, \"ct\": 1, \"bm\": 0}], \"markers\": [], \"props\": {}}, function (lottie, data) { let mask = lottie.layers[1].masksProperties[0]; mask.o.k = Number(data[\"Opacity\"]); this.json_viewer_contents = lottie.layers[1].masksProperties[0]; }, {} );","title":"Helpers"},{"location":"specs/helpers/#helpers","text":"","title":"Helpers"},{"location":"specs/helpers/#transform","text":"Layer transform Composition Diagram for Transform Transform Transform Shape Attribute Type Title Description a Position Anchor Point Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale) p Splittable Position Position Position / Translation r Scalar Rotation Rotation in degrees, clockwise s Vector Scale Scale factor, [100, 100] for no scaling o Scalar Opacity Opacity sk Scalar Skew Skew amount as an angle in degrees sa Scalar Skew Axis Direction along which skew is applied, in degrees ( 0 skews along the X axis, 90 along the Y axis) To make the anchor point properly line up with the center of location, p and a should have the same value. This example allows you to tweak transform attributes and see how the shape changes. The anchor point is highlighted with an orange dot. Anchor X 256 Anchor Y 256 Position X 256 Position Y 256 Scale X 100 Scale Y 100 Rotation 0 Skew 0 Skew Angle 0 Opacity 100 var lottie_player_12 = new PlaygroundPlayer( 12, 'playground_12_11', 'lottie_target_12', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{a3bb98c7-d0dd-4484-b6da-74a0e70eaf2f}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 2, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Anchor\", \"mn\": \"{04f9b742-3603-49fa-9552-ea04de1a3f33}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"mn\": \"{4251e46a-bb13-464b-913c-e67c44a218da}\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [32, 32]}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{7d3070ed-88a3-41aa-a62e-7db8df1bd312}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Transformed\", \"mn\": \"{d00298c4-66b4-4ae4-a730-22c1eb85c188}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}, \"sk\": {\"a\": 0, \"k\": 0}, \"sa\": {\"a\": 0, \"k\": 0}}, \"shapes\": [{\"ty\": \"rc\", \"nm\": \"Rectangle 1\", \"mn\": \"{bf8ad877-113b-4df8-a2e2-3bb4af32edf7}\", \"p\": {\"a\": 0, \"k\": [252.75223880597017, 250.60298507462684]}, \"s\": {\"a\": 0, \"k\": [319.8089552238806, 330.98507462686564]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{b9040dc8-0753-4a6e-b5f1-d508d17bbd4f}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.19607843137254902, 0.3137254901960784, 0.6901960784313725]}, \"r\": 1}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Reference\", \"mn\": \"{8f351be7-8a51-4310-9dc3-59ed21594815}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{cb4f7b74-bed1-493b-a0e6-01b00566aedd}\", \"p\": {\"a\": 0, \"k\": [252.75223880597017, 250.60298507462684]}, \"s\": {\"a\": 0, \"k\": [319.8089552238806, 330.98507462686564]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{05064670-7e14-4141-89c1-e0f0f3a1c57d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.1607843137254902, 0.1843137254901961, 0.4588235294117647]}, \"r\": 1}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { lottie.layers[0].ks.p.k[0] = data[\"Anchor X\"]; lottie.layers[1].ks.a.k[0] = data[\"Anchor X\"]; lottie.layers[0].ks.p.k[1] = data[\"Anchor Y\"]; lottie.layers[1].ks.a.k[1] = data[\"Anchor Y\"]; lottie.layers[1].ks.p.k[0] = data[\"Position X\"]; lottie.layers[1].ks.p.k[1] = data[\"Position Y\"]; lottie.layers[1].ks.s.k[0] = data[\"Scale X\"]; lottie.layers[1].ks.s.k[1] = data[\"Scale Y\"]; lottie.layers[1].ks.r.k = data[\"Rotation\"]; lottie.layers[1].ks.sk.k = data[\"Skew\"]; lottie.layers[1].ks.sa.k = data[\"Skew Angle\"]; lottie.layers[1].ks.o.k = data[\"Opacity\"]; this.json_viewer_contents = lottie.layers[1].ks; }, {} ); Transforms the parent's coordinate system. When calculating the final transform, properties MUST be applied as follows: Translate by \u2212 a Scale by s 100 If s k \u2260 0 : Rotate by \u2212 s a Skew x by tan ( \u2212 s k ) Rotate by s a Rotate by \u2212 r Translate by p Steps that have no effect MAY be skipped. Assuming a transform matrix with the following layout, with the labels equivalent to the CSS matrix transform : ( a b 0 c d 0 e f 1 ) The final transform is given by chaining transform matrices for each transform step: ( 1 0 0 0 1 0 \u2212 a . x \u2212 a . y 1 ) \u00d7 ( s . x 100 0 0 0 s . y 100 0 0 0 1 ) \u00d7 \u00d7 ( cos ( \u2212 s a ) sin ( \u2212 s a ) 0 \u2212 sin ( \u2212 s a ) cos ( \u2212 s a ) 0 0 0 1 ) \u00d7 ( 1 tan ( \u2212 s k ) 0 0 1 0 0 0 1 ) \u00d7 ( cos ( s a ) sin ( s a ) 0 \u2212 sin ( s a ) cos ( s a ) 0 0 0 1 ) \u00d7 \u00d7 ( cos ( \u2212 r ) sin ( \u2212 r ) 0 \u2212 sin ( \u2212 r ) cos ( \u2212 r ) 0 0 0 1 ) \u00d7 ( 1 0 0 0 1 0 p . x p . y 1 ) Note that if the transform matrix is transposed compared to the above: ( a c e b d f 0 0 1 ) The operations need to be chained using right multiplication instead of left multiplication.","title":"Transform"},{"location":"specs/helpers/#visual-object","text":"Composition Diagram for Visual Object Visual Object Asset Precomposition Image Animation Layer Visual Layer Solid Layer Image Layer Precomposition Layer Null Layer Shape Layer Graphic Element Group Shape Style Fill Gradient Stroke Gradient Stroke Shape PolyStar Path Rectangle Ellipse Transform Shape Modifier Trim Path Stroke Dash Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like","title":"Visual Object"},{"location":"specs/helpers/#marker","text":"Defines named portions of the composition. Attribute Type Title Description cm string Comment Comment tm number Time Time dr number Duration Duration","title":"Marker"},{"location":"specs/helpers/#slots","text":"Slots are a way to define a property value once and use the value in multiple properties. Slot definitions are in a dictionary, the slot definition key is the key that is used to match all properties with a sid field to the same key for replacement.","title":"Slots"},{"location":"specs/helpers/#slot","text":"Defines a property value that will be set to all matched properties Attribute Type Title Description p Property Value Property Value","title":"Slot"},{"location":"specs/helpers/#slottable-object","text":"Object that may have its value replaced with a slot value Composition Diagram for Slottable Object Slottable Object Image Slottable Property Vector Property Scalar Property Position Property Color Property Attribute Type Title Description sid string Slot Id Identifier to look up the slot","title":"Slotabble Object"},{"location":"specs/helpers/#slottable-property","text":"Property that may have its value replaced with a slot value Composition Diagram for Slottable Property Slottable Property Slottable Object Vector Property Scalar Property Position Property Color Property Attribute Type Title Description sid string Slot Id Identifier to look up the slot Scale X 100 Scale Y 100 Rotation 0 Opacity 100 var lottie_player_13 = new PlaygroundPlayer( 13, 'playground_13_5', 'lottie_target_13', {\"v\": \"5.12.2\", \"fr\": 29.9700012207031, \"ip\": 0, \"op\": 900.000036657751, \"w\": 512, \"h\": 512, \"nm\": \"SlotDemo\", \"ddd\": 0, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [256, 256, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ty\": \"sr\", \"sy\": 2, \"d\": 1, \"pt\": {\"a\": 0, \"k\": 3, \"ix\": 3}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 4}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"or\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"os\": {\"a\": 0, \"k\": 0, \"ix\": 9}, \"ix\": 1, \"nm\": \"Polystar Path 1\", \"mn\": \"ADBE Vector Shape - Star\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 6, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [-128, 128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Polystar 2\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [149.971, 150], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 6, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [128, -128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Ellipse 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"sr\", \"sy\": 1, \"d\": 1, \"pt\": {\"a\": 0, \"k\": 5, \"ix\": 3}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 4}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"ir\": {\"a\": 0, \"k\": 50, \"ix\": 6}, \"is\": {\"a\": 0, \"k\": 0, \"ix\": 8}, \"or\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"os\": {\"a\": 0, \"k\": 0, \"ix\": 9}, \"ix\": 1, \"nm\": \"Polystar Path 1\", \"mn\": \"ADBE Vector Shape - Star\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [128, 128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Polystar 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [150, 150], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.271324008119, 0.323676015816, 0.880510995902, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [-128, -128], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3, \"sid\": \"scale\"}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6, \"sid\": \"rotation\"}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7, \"sid\": \"opacity\"}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Rectangle 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 4, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 900.000036657751, \"st\": 0, \"ct\": 1, \"bm\": 0}], \"markers\": [], \"props\": {}, \"slots\": {\"rotation\": {\"p\": {\"a\": 0, \"k\": 0}}, \"opacity\": {\"p\": {\"a\": 0, \"k\": 100}}, \"scale\": {\"p\": {\"a\": 0, \"k\": [100, 100]}}}}, function (lottie, data) { lottie.slots.rotation.p.k = data[\"Rotation\"]; lottie.slots.opacity.p.k = data[\"Opacity\"]; lottie.slots.scale.p.k[0] = data[\"Scale X\"]; lottie.slots.scale.p.k[1] = data[\"Scale Y\"]; this.json_viewer_contents = lottie.slots; }, {} );","title":"Slotabble Property"},{"location":"specs/helpers/#mask","text":"Mask for layer content. Attribute Type Title Description mode Mask Mode Mode Mode o Scalar Opacity Mask opacity, as a percentage [0..100]. pt Bezier Shape Mask shape Masks provide single-channel coverage information (alpha channel) that modulates the layer's content. When multiple masks are specified, they are combined (blended) into a single coverage buffer, in order, based on the mode operator. Masks are specified in terms of a Path plus additional properties. For a given mask path, the coverage C p a t h is 1 inside the path, 0 outside the path, and possibly in the [ 0 . .1 ] range along the path edges (anti-aliasing). The coverage for a given Mask is C = { C p a t h \u00b7 o p a c i t y , when i n v = f a l s e C p a t h \u2212 1 \u00b7 o p a c i t y , when i n v = t r u e and the cumulative coverage for all masks is C c u m u l a t i v e = \u220f k = 1 n C k where the product operator is determined by mode . Then the final layer coverage (alpha channel) is C l a y e r \u2032 = C l a y e r \u00b7 C c u m u l a t i v e Example Opacity 100 var lottie_player_14 = new PlaygroundPlayer( 14, 'playground_14_2', 'lottie_target_14', {\"v\": \"5.12.0\", \"fr\": 60, \"ip\": 0, \"op\": 601, \"w\": 500, \"h\": 500, \"nm\": \"test3\", \"ddd\": 0, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 2\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ind\": 0, \"ty\": \"sh\", \"ix\": 1, \"ks\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"v\": [[0, -200], [86.603, -50], [173.205, 100], [0, 100], [-173.205, 100], [-86.603, -50]], \"c\": true}, \"ix\": 2}, \"nm\": \"Path 1\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [1, 0, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 2, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"d\": [{\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 10, \"ix\": 1}}, {\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0, \"ix\": 7}}], \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}], \"ip\": 0, \"op\": 601, \"st\": 0, \"ct\": 1, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"hasMask\": true, \"masksProperties\": [{\"inv\": false, \"mode\": \"a\", \"pt\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0]], \"v\": [[0.5, -199.5], [173.705, 100.5], [-172.705, 100.5]], \"c\": true}, \"ix\": 1}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 3}, \"x\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Mask 1\"}], \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [200, 200], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [100, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0, 1, 0.250980407, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 75, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 600, \"s\": [360]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 3\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"sr\", \"sy\": 1, \"d\": 1, \"pt\": {\"a\": 0, \"k\": 5, \"ix\": 3}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 4}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"ir\": {\"a\": 0, \"k\": 50, \"ix\": 6}, \"is\": {\"a\": 0, \"k\": 0, \"ix\": 8}, \"or\": {\"a\": 0, \"k\": 162, \"ix\": 7}, \"os\": {\"a\": 0, \"k\": 0, \"ix\": 9}, \"ix\": 1, \"nm\": \"Polystar Path 1\", \"mn\": \"ADBE Vector Shape - Star\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 0.250980407, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 75, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 600, \"s\": [720]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [175, 175], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [-90, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.250980407, 0, 1, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 75, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 600, \"s\": [-360]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 601, \"st\": 0, \"ct\": 1, \"bm\": 0}], \"markers\": [], \"props\": {}}, function (lottie, data) { let mask = lottie.layers[1].masksProperties[0]; mask.o.k = Number(data[\"Opacity\"]); this.json_viewer_contents = lottie.layers[1].masksProperties[0]; }, {} );","title":"Mask"},{"location":"specs/layers/","text":"Layers Common Properties Layer Common properties for all layers Composition Diagram for Layer Layer Visual Object Visual Layer Solid Layer Image Layer Precomposition Layer Null Layer Shape Layer Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer Type Layer Type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible The ty property defines the specific layer type based on the following values: ty Type 0 Precomposition Layer 2 Image Layer 3 Null Layer 1 Solid Layer 4 Shape Layer None Unknown layer types Visual Layer Layer used to affect visual elements Composition Diagram for Visual Layer Visual Layer Layer Visual Object Solid Layer Image Layer Precomposition Layer Null Layer Shape Layer Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer Type Layer Type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. Parenting Layer parenting offers a way to connect layers such that the movement of one layer (child) follows the movement of another (parent). Multiple child layers can reference the same parent (this is useful for applying the same transform animation to a group of layers). When the parent property points to another layer, the referencing layer's current transformation matrix (CTM) is composed with the parent CTM: C T M ( c h i l d ) = C T M ( p a r e n t ) \u00d7 T r a n s f o r m ( c h i l d ) Parenting is transitive, and reference cycles are not allowed (undefined behavior). Hidden Layers The hidden flag hd determines whether a layer is rendered: hidden layers are not rendered as part of the normal layer tree, but their properties and content are evaluated when used as a reference target in other contexts. Specifically, hidden layers contribute to a layer's total transform when used as a parent contribute to a layer's track matte when used as a matte source hd only affects the layer for which it is defined, it does not transitively apply to other referencing layers. Mattes A matte allows using a layer as a mask for another layer. The way it works is the layer defining the mask has a tt attribute with the appropriate value . The layer being masked is indicated by the tp attribute, which has the index ( ind ) of the layer that is being masked. In this example there's a layer with a rectangle and a star being masked by an ellipse: Example Enable Matte Matte Mode Normal Alpha Inverted Alpha Luma Inverted Luma var lottie_player_15 = new PlaygroundPlayer( 15, 'playground_15_3', 'lottie_target_15', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{b3d1b083-9de7-4537-a691-fc9aa42f9742}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Ellipse (Mask)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [153, 294]}, \"p\": {\"a\": 0, \"k\": [346, 211]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"mn\": \"{261eddeb-af92-4be1-932c-790b00c23933}\", \"p\": {\"a\": 0, \"k\": [137.0955223880597, 293.60820895522386]}, \"s\": {\"a\": 0, \"k\": [303.42089552238804, 315.55074626865667]}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{aa9c282c-253d-4d8d-ab05-4819c592fa85}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 1, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 6}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{2b2b0002-ff0c-4978-a33b-db4e0498848d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}], \"td\": 1}, {\"ddd\": 0, \"ty\": 4, \"ind\": 2, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Shapes (Masked)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{528994b7-40ff-4d12-81f8-603f274da12e}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{ce8756d7-289f-4f84-a135-d225d57c42e0}\", \"p\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"or\": {\"a\": 0, \"k\": 216.4160919189453}, \"ir\": {\"a\": 0, \"k\": 87.03440856933594}, \"r\": {\"a\": 0, \"k\": 261.54803466796875}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{efd05a25-a43b-451d-83d2-53a477087223}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{523ca39c-9e57-4547-bf0e-ba7496003579}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.19607843137254902, 0.3137254901960784, 0.6901960784313725]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"p\": {\"a\": 0, \"k\": [338.7223880597015, 209.76716417910447]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"Rectangle\", \"mn\": \"{d2d7a5d5-6d91-42e8-b40a-af52a112fe38}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{9ef8604e-7891-4909-a655-445131b4d842}\", \"p\": {\"a\": 0, \"k\": [209.17611940298502, 226.8]}, \"s\": {\"a\": 0, \"k\": [363.3313432835821, 369.3492537313433]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{444584d2-cb59-4cba-83a1-82cc605837fd}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{f75aed67-9b0e-41a9-b859-a14b5b0a320d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.7686274509803922, 0.8509803921568627, 0.9607843137254902]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"p\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}], \"tt\": 1, \"tp\": 1}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { if ( data[\"Enable Matte\"] ) { lottie.layers[1].tt = Number(data[\"Matte Mode\"]); lottie.layers[1].tp = 1; lottie.layers[0].td = 1; } else { lottie.layers[1].tt = undefined; lottie.layers[1].tp = undefined; lottie.layers[0].td = undefined; } this.json_viewer_contents = {...lottie.layers[1], shapes: [], ks: {}}; }, {} ); Layer types Shape Layer Layer containing Shapes Composition Diagram for Shape Layer Shape Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 4 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. shapes array of Graphic Element Shapes Shapes Image Layer Layer containing an image Composition Diagram for Image Layer Image Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 2 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. refId string Reference Id ID of the image as specified in the assets Null Layer Layer with no data, useful to group layers together Composition Diagram for Null Layer Null Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 3 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. Solid Layer Solid color, rectangle-shaped layer Composition Diagram for Solid Layer Solid Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 1 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. sw integer Width Solid rectangle width sh integer Height Solid rectangle height sc Hex Color Color Solid fill color Precomposition Layer Layer that renders a Precomposition asset Composition Diagram for Precomposition Layer Precomposition Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 0 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. refId string Reference Id ID of the precomp as specified in the assets w integer Width Width of the clipping rect h integer Height Height of the clipping rect sr number Time Stretch Time Stretch st number Start Time Start Time tm Scalar Time Remap Timeline remap function (frame index -> time in seconds) Time Stretch The st property specifies a start time offset, while sr defines a time stretch factor, to be applied when evaluating animated properties pertaining to the layer: t \u2032 = t s t r e t c h \u2212 s t a r t sr values less than 1 increase the layer playback speed, while values greater than 1 decrease it (\"stretching\" the layer timeline). Example Time Stretch 1 var lottie_player_16 = new PlaygroundPlayer( 16, 'playground_16_2', 'lottie_target_16', {\"v\": \"5.12.0\", \"fr\": 60, \"ip\": 0, \"op\": 600, \"w\": 500, \"h\": 500, \"nm\": \"time_stretch\", \"ddd\": 0, \"assets\": [{\"id\": \"comp_0\", \"nm\": \"swing\", \"fr\": 60, \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.402], \"y\": [0.993]}, \"o\": {\"x\": [0.599], \"y\": [-0.002]}, \"t\": 0, \"s\": [50]}, {\"i\": {\"x\": [0.407], \"y\": [1.004]}, \"o\": {\"x\": [0.603], \"y\": [0.005]}, \"t\": 150, \"s\": [-50]}, {\"i\": {\"x\": [0.408], \"y\": [1.001]}, \"o\": {\"x\": [0.605], \"y\": [0]}, \"t\": 299, \"s\": [50]}, {\"i\": {\"x\": [0.407], \"y\": [1.001]}, \"o\": {\"x\": [0.603], \"y\": [0.004]}, \"t\": 450, \"s\": [-50]}, {\"i\": {\"x\": [0.417], \"y\": [1.001]}, \"o\": {\"x\": [0.604], \"y\": [0.003]}, \"t\": 599, \"s\": [50]}, {\"i\": {\"x\": [0.402], \"y\": [0.998]}, \"o\": {\"x\": [0.599], \"y\": [-0.004]}, \"t\": 750, \"s\": [-50]}, {\"i\": {\"x\": [0.411], \"y\": [0.997]}, \"o\": {\"x\": [0.612], \"y\": [0.004]}, \"t\": 900, \"s\": [50]}, {\"i\": {\"x\": [0.404], \"y\": [1.003]}, \"o\": {\"x\": [0.605], \"y\": [-0.002]}, \"t\": 1050, \"s\": [-50]}, {\"t\": 1199, \"s\": [50]}], \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 150, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, -250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0, 0.364705890417, 0.662745118141, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [2, 200], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, -150], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.937254905701, 0.882352948189, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 1201, \"st\": 0, \"ct\": 1, \"bm\": 0}]}], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 0, \"nm\": \"swing\", \"refId\": \"comp_0\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 100, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [70, 70, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"w\": 500, \"h\": 500, \"ip\": 0, \"op\": 600, \"st\": 0, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 0, \"nm\": \"swing\", \"refId\": \"comp_0\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 350, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [70, 70, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"w\": 500, \"h\": 500, \"ip\": 0, \"op\": 600, \"st\": 0, \"bm\": 0}], \"markers\": [], \"props\": {}}, function (lottie, data) { var layer = lottie.layers[0]; layer.sr = Number(data[\"Time Stretch\"]); this.json_viewer_contents = lottie.layers[0]; }, {} ); Time Remap The tm property specifies a time remap function as an animatable property, allowing full control over the precomp timeline (subset, speedup/slowdown, reverse, frame-freeze, or any other arbitrary transformation). It maps the current layer time (in the frame index [ i p \u2026 o p ] domain) to a precomp time expressed in seconds, and evaluates all animatable precomp properties based on the new time value: t m : [ i p \u2026 o p ] \u21a6 s e c o n d s t \u2032 = t m ( t ) \u00b7 F P S Note: the global frame rate factor F P S ( Animation fr property) is required to convert back into the frame index domain. When both time stretch ( sr ) and time remap ( tm ) are specified, time stretch is applied first. Example Time Remap Linear Reverse Subset Discrete Easing 1 Easing 2 Easing-Reverse var lottie_player_17 = new PlaygroundPlayer( 17, 'playground_17_2', 'lottie_target_17', {\"v\": \"5.12.0\", \"fr\": 60, \"ip\": 0, \"op\": 600, \"w\": 500, \"h\": 500, \"nm\": \"time_remap\", \"ddd\": 0, \"assets\": [{\"id\": \"comp_0\", \"nm\": \"time_remap_precomp\", \"fr\": 60, \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0, 0.858823537827, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 7, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 5, \"bm\": 0, \"d\": [{\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 4.5, \"ix\": 1}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 15, \"ix\": 2}}, {\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0, \"ix\": 7}}], \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 0.266666680574, 0.270588248968, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 1, \"k\": [{\"i\": {\"x\": 0.833, \"y\": 0.833}, \"o\": {\"x\": 0.167, \"y\": 0.167}, \"t\": 0, \"s\": [-250, 0], \"to\": [83.333, 0], \"ti\": [-83.333, 0]}, {\"t\": 599, \"s\": [250, 0]}], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 599, \"s\": [540]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [500, 5], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 50], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0, 0, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 3\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [500, 200], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 1, 1, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 600, \"st\": 0, \"ct\": 1, \"bm\": 0}]}], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 350, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [2, 120], \"ix\": 2}, \"p\": {\"a\": 1, \"k\": [{\"i\": {\"x\": 0.833, \"y\": 0.833}, \"o\": {\"x\": 0.167, \"y\": 0.167}, \"t\": 0, \"s\": [-250, 0], \"to\": [83.333, 0], \"ti\": [-83.333, 0]}, {\"t\": 599, \"s\": [250, 0]}], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 0, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 3\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ind\": 0, \"ty\": \"sh\", \"ix\": 1, \"ks\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0]], \"v\": [[-229.358, 0.147], [5.161, 0.72], [204.128, 2.44]], \"c\": false}, \"ix\": 2}, \"nm\": \"Path 1\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0, 0.470588237047, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 2, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [500, 100], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.917647063732, 0.917647063732, 0.705882370472, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 600, \"st\": 0, \"ct\": 1, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 0, \"nm\": \"time_remap_precomp\", \"refId\": \"comp_0\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 180, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"tm\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 120, \"s\": [7]}, {\"t\": 600, \"s\": [10]}], \"ix\": 2}, \"w\": 500, \"h\": 500, \"ip\": 0, \"op\": 600, \"st\": 0, \"bm\": 0}], \"markers\": []}, function (lottie, data) { const time_maps = [ { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }}, { 't': 600, 's': [10] } ]}, { 'a': 1, k: [ { 't': 0, 's': [10], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }}, { 't': 600, 's': [ 0] } ]}, { 'a': 1, k: [ { 't': 0, 's': [3], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }}, { 't': 600, 's': [7] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0.0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 150, 's': [ 2.5], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 300, 's': [ 5.0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 450, 's': [ 7.5], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 600, 's': [10.0] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0], 'y': [0.5]}, 'i': { 'x': [0.5], 'y': [1] }}, { 't': 600, 's': [10] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0], 'y': [0.5]}, 'i': { 'x': [1], 'y': [0.5] }}, { 't': 600, 's': [10] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0.2], 'y': [0]}, 'i': { 'x': [0.8], 'y': [1] }}, { 't': 300, 's': [ 7], 'o': { 'x': [0.2], 'y': [0]}, 'i': { 'x': [0.8], 'y': [1] }}, { 't': 600, 's': [ 0] } ]}, ]; const time_paths = [ { 'v': [[-250, 50], [250, -50]], 'o': [[ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[250, 50], [-250, -50]], 'o': [[ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[250, 20], [-250, -20]], 'o': [[ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[-250, 50], [-125, 50], [-125, 25], [0, 25], [0, 0], [125, 0], [125, -25], [250, -25]], 'o': [[ 0, 0], [ 0, 0], [ 0, 0], [0, 0], [0, 0], [ 0, 0], [ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0], [ 0, 0], [0, 0], [0, 0], [ 0, 0], [ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[-250, 50], [ 250, -50]], 'o': [[ 0, -50], [ 0, 0]], 'i': [[ 0, 0], [-250, 0]], 'c': false }, { 'v': [[-250, 50], [250, -50]], 'o': [[ 0, -50], [ 0, 0]], 'i': [[ 0, 0], [ 0, 50]], 'c': false }, { 'v': [[-250, 50], [ 0, -20], [ 250, 50]], 'o': [[ 100, 0], [ 100, 0], [ 0, 0]], 'i': [[ 0, 0], [-100, 0], [-100, 0]], 'c': false }, ]; const sample_index = data[\"Time Remap\"]; const precomp_layer = lottie.layers[1]; precomp_layer.tm = time_maps[sample_index]; const time_shape = lottie.layers[0].shapes[1].it[0]; time_shape.ks.k = time_paths[sample_index]; this.json_viewer_contents = lottie.layers[1].tm; }, {} );","title":"Layers"},{"location":"specs/layers/#layers","text":"","title":"Layers"},{"location":"specs/layers/#common-properties","text":"","title":"Common Properties"},{"location":"specs/layers/#layer","text":"Common properties for all layers Composition Diagram for Layer Layer Visual Object Visual Layer Solid Layer Image Layer Precomposition Layer Null Layer Shape Layer Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer Type Layer Type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible The ty property defines the specific layer type based on the following values: ty Type 0 Precomposition Layer 2 Image Layer 3 Null Layer 1 Solid Layer 4 Shape Layer None Unknown layer types","title":"Layer"},{"location":"specs/layers/#visual-layer","text":"Layer used to affect visual elements Composition Diagram for Visual Layer Visual Layer Layer Visual Object Solid Layer Image Layer Precomposition Layer Null Layer Shape Layer Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer Type Layer Type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer.","title":"Visual Layer"},{"location":"specs/layers/#parenting","text":"Layer parenting offers a way to connect layers such that the movement of one layer (child) follows the movement of another (parent). Multiple child layers can reference the same parent (this is useful for applying the same transform animation to a group of layers). When the parent property points to another layer, the referencing layer's current transformation matrix (CTM) is composed with the parent CTM: C T M ( c h i l d ) = C T M ( p a r e n t ) \u00d7 T r a n s f o r m ( c h i l d ) Parenting is transitive, and reference cycles are not allowed (undefined behavior).","title":"Parenting"},{"location":"specs/layers/#hidden-layers","text":"The hidden flag hd determines whether a layer is rendered: hidden layers are not rendered as part of the normal layer tree, but their properties and content are evaluated when used as a reference target in other contexts. Specifically, hidden layers contribute to a layer's total transform when used as a parent contribute to a layer's track matte when used as a matte source hd only affects the layer for which it is defined, it does not transitively apply to other referencing layers.","title":"Hidden Layers"},{"location":"specs/layers/#mattes","text":"A matte allows using a layer as a mask for another layer. The way it works is the layer defining the mask has a tt attribute with the appropriate value . The layer being masked is indicated by the tp attribute, which has the index ( ind ) of the layer that is being masked. In this example there's a layer with a rectangle and a star being masked by an ellipse: Example Enable Matte Matte Mode Normal Alpha Inverted Alpha Luma Inverted Luma var lottie_player_15 = new PlaygroundPlayer( 15, 'playground_15_3', 'lottie_target_15', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{b3d1b083-9de7-4537-a691-fc9aa42f9742}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Ellipse (Mask)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [153, 294]}, \"p\": {\"a\": 0, \"k\": [346, 211]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"mn\": \"{261eddeb-af92-4be1-932c-790b00c23933}\", \"p\": {\"a\": 0, \"k\": [137.0955223880597, 293.60820895522386]}, \"s\": {\"a\": 0, \"k\": [303.42089552238804, 315.55074626865667]}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{aa9c282c-253d-4d8d-ab05-4819c592fa85}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 1, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 6}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{2b2b0002-ff0c-4978-a33b-db4e0498848d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}], \"td\": 1}, {\"ddd\": 0, \"ty\": 4, \"ind\": 2, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Shapes (Masked)\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{528994b7-40ff-4d12-81f8-603f274da12e}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{ce8756d7-289f-4f84-a135-d225d57c42e0}\", \"p\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"or\": {\"a\": 0, \"k\": 216.4160919189453}, \"ir\": {\"a\": 0, \"k\": 87.03440856933594}, \"r\": {\"a\": 0, \"k\": 261.54803466796875}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{efd05a25-a43b-451d-83d2-53a477087223}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{523ca39c-9e57-4547-bf0e-ba7496003579}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.19607843137254902, 0.3137254901960784, 0.6901960784313725]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [427.2716417910448, 194.29253731343283]}, \"p\": {\"a\": 0, \"k\": [338.7223880597015, 209.76716417910447]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"Rectangle\", \"mn\": \"{d2d7a5d5-6d91-42e8-b40a-af52a112fe38}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{9ef8604e-7891-4909-a655-445131b4d842}\", \"p\": {\"a\": 0, \"k\": [209.17611940298502, 226.8]}, \"s\": {\"a\": 0, \"k\": [363.3313432835821, 369.3492537313433]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"hd\": true, \"nm\": \"Stroke\", \"mn\": \"{444584d2-cb59-4cba-83a1-82cc605837fd}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0, 0.5019607843137255, 1]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 1}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"mn\": \"{f75aed67-9b0e-41a9-b859-a14b5b0a320d}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.7686274509803922, 0.8509803921568627, 0.9607843137254902]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"p\": {\"a\": 0, \"k\": [256.1910447761194, 273.8149253731343]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}], \"tt\": 1, \"tp\": 1}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { if ( data[\"Enable Matte\"] ) { lottie.layers[1].tt = Number(data[\"Matte Mode\"]); lottie.layers[1].tp = 1; lottie.layers[0].td = 1; } else { lottie.layers[1].tt = undefined; lottie.layers[1].tp = undefined; lottie.layers[0].td = undefined; } this.json_viewer_contents = {...lottie.layers[1], shapes: [], ks: {}}; }, {} );","title":"Mattes"},{"location":"specs/layers/#layer-types","text":"","title":"Layer types"},{"location":"specs/layers/#shape-layer","text":"Layer containing Shapes Composition Diagram for Shape Layer Shape Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 4 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. shapes array of Graphic Element Shapes Shapes","title":"Shape Layer"},{"location":"specs/layers/#image-layer","text":"Layer containing an image Composition Diagram for Image Layer Image Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 2 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. refId string Reference Id ID of the image as specified in the assets","title":"Image Layer"},{"location":"specs/layers/#null-layer","text":"Layer with no data, useful to group layers together Composition Diagram for Null Layer Null Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 3 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer.","title":"Null Layer"},{"location":"specs/layers/#solid-layer","text":"Solid color, rectangle-shaped layer Composition Diagram for Solid Layer Solid Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 1 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. sw integer Width Solid rectangle width sh integer Height Solid rectangle height sc Hex Color Color Solid fill color","title":"Solid Layer"},{"location":"specs/layers/#precomposition-layer","text":"Layer that renders a Precomposition asset Composition Diagram for Precomposition Layer Precomposition Layer Visual Layer Layer Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the layer is hidden ty integer = 0 Type Layer type ind integer Index Index that can be used for parenting and referenced in expressions parent integer Parent Index Must be the ind property of another layer ip number In Point Frame when the layer becomes visible op number Out Point Frame when the layer becomes invisible ks Transform Transform Layer transform ao 0-1 integer Auto Orient If 1, the layer will rotate itself to match its animated position path tt Matte Mode Matte Mode Defines the track matte mode for the layer tp integer Matte Parent Index of the layer used as matte, if omitted assume the layer above the current one masksProperties array of Mask Masks Optional array of masks for the layer. refId string Reference Id ID of the precomp as specified in the assets w integer Width Width of the clipping rect h integer Height Height of the clipping rect sr number Time Stretch Time Stretch st number Start Time Start Time tm Scalar Time Remap Timeline remap function (frame index -> time in seconds)","title":"Precomposition Layer"},{"location":"specs/layers/#precomposition-time-stretch","text":"The st property specifies a start time offset, while sr defines a time stretch factor, to be applied when evaluating animated properties pertaining to the layer: t \u2032 = t s t r e t c h \u2212 s t a r t sr values less than 1 increase the layer playback speed, while values greater than 1 decrease it (\"stretching\" the layer timeline). Example Time Stretch 1 var lottie_player_16 = new PlaygroundPlayer( 16, 'playground_16_2', 'lottie_target_16', {\"v\": \"5.12.0\", \"fr\": 60, \"ip\": 0, \"op\": 600, \"w\": 500, \"h\": 500, \"nm\": \"time_stretch\", \"ddd\": 0, \"assets\": [{\"id\": \"comp_0\", \"nm\": \"swing\", \"fr\": 60, \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.402], \"y\": [0.993]}, \"o\": {\"x\": [0.599], \"y\": [-0.002]}, \"t\": 0, \"s\": [50]}, {\"i\": {\"x\": [0.407], \"y\": [1.004]}, \"o\": {\"x\": [0.603], \"y\": [0.005]}, \"t\": 150, \"s\": [-50]}, {\"i\": {\"x\": [0.408], \"y\": [1.001]}, \"o\": {\"x\": [0.605], \"y\": [0]}, \"t\": 299, \"s\": [50]}, {\"i\": {\"x\": [0.407], \"y\": [1.001]}, \"o\": {\"x\": [0.603], \"y\": [0.004]}, \"t\": 450, \"s\": [-50]}, {\"i\": {\"x\": [0.417], \"y\": [1.001]}, \"o\": {\"x\": [0.604], \"y\": [0.003]}, \"t\": 599, \"s\": [50]}, {\"i\": {\"x\": [0.402], \"y\": [0.998]}, \"o\": {\"x\": [0.599], \"y\": [-0.004]}, \"t\": 750, \"s\": [-50]}, {\"i\": {\"x\": [0.411], \"y\": [0.997]}, \"o\": {\"x\": [0.612], \"y\": [0.004]}, \"t\": 900, \"s\": [50]}, {\"i\": {\"x\": [0.404], \"y\": [1.003]}, \"o\": {\"x\": [0.605], \"y\": [-0.002]}, \"t\": 1050, \"s\": [-50]}, {\"t\": 1199, \"s\": [50]}], \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 150, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, -250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0, 0.364705890417, 0.662745118141, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [2, 200], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, -150], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.937254905701, 0.882352948189, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 1201, \"st\": 0, \"ct\": 1, \"bm\": 0}]}], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 0, \"nm\": \"swing\", \"refId\": \"comp_0\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 100, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [70, 70, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"w\": 500, \"h\": 500, \"ip\": 0, \"op\": 600, \"st\": 0, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 0, \"nm\": \"swing\", \"refId\": \"comp_0\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 350, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [70, 70, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"w\": 500, \"h\": 500, \"ip\": 0, \"op\": 600, \"st\": 0, \"bm\": 0}], \"markers\": [], \"props\": {}}, function (lottie, data) { var layer = lottie.layers[0]; layer.sr = Number(data[\"Time Stretch\"]); this.json_viewer_contents = lottie.layers[0]; }, {} );","title":"Time Stretch"},{"location":"specs/layers/#precomposition-time-remap","text":"The tm property specifies a time remap function as an animatable property, allowing full control over the precomp timeline (subset, speedup/slowdown, reverse, frame-freeze, or any other arbitrary transformation). It maps the current layer time (in the frame index [ i p \u2026 o p ] domain) to a precomp time expressed in seconds, and evaluates all animatable precomp properties based on the new time value: t m : [ i p \u2026 o p ] \u21a6 s e c o n d s t \u2032 = t m ( t ) \u00b7 F P S Note: the global frame rate factor F P S ( Animation fr property) is required to convert back into the frame index domain. When both time stretch ( sr ) and time remap ( tm ) are specified, time stretch is applied first. Example Time Remap Linear Reverse Subset Discrete Easing 1 Easing 2 Easing-Reverse var lottie_player_17 = new PlaygroundPlayer( 17, 'playground_17_2', 'lottie_target_17', {\"v\": \"5.12.0\", \"fr\": 60, \"ip\": 0, \"op\": 600, \"w\": 500, \"h\": 500, \"nm\": \"time_remap\", \"ddd\": 0, \"assets\": [{\"id\": \"comp_0\", \"nm\": \"time_remap_precomp\", \"fr\": 60, \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"d\": 1, \"ty\": \"el\", \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"nm\": \"Ellipse Path 1\", \"mn\": \"ADBE Vector Shape - Ellipse\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0, 0.858823537827, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 7, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 5, \"bm\": 0, \"d\": [{\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 4.5, \"ix\": 1}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 15, \"ix\": 2}}, {\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0, \"ix\": 7}}], \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 0.266666680574, 0.270588248968, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 1, \"k\": [{\"i\": {\"x\": 0.833, \"y\": 0.833}, \"o\": {\"x\": 0.167, \"y\": 0.167}, \"t\": 0, \"s\": [-250, 0], \"to\": [83.333, 0], \"ti\": [-83.333, 0]}, {\"t\": 599, \"s\": [250, 0]}], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"t\": 599, \"s\": [540]}], \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 3, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [500, 5], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 50], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0, 0, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 3\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [500, 200], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 1, 1, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 600, \"st\": 0, \"ct\": 1, \"bm\": 0}]}], \"layers\": [{\"ddd\": 0, \"ind\": 1, \"ty\": 4, \"nm\": \"Shape Layer 1\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 350, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [2, 120], \"ix\": 2}, \"p\": {\"a\": 1, \"k\": [{\"i\": {\"x\": 0.833, \"y\": 0.833}, \"o\": {\"x\": 0.167, \"y\": 0.167}, \"t\": 0, \"s\": [-250, 0], \"to\": [83.333, 0], \"ti\": [-83.333, 0]}, {\"t\": 599, \"s\": [250, 0]}], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [1, 0, 0, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 3\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 1, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ind\": 0, \"ty\": \"sh\", \"ix\": 1, \"ks\": {\"a\": 0, \"k\": {\"i\": [[0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0]], \"v\": [[-229.358, 0.147], [5.161, 0.72], [204.128, 2.44]], \"c\": false}, \"ix\": 2}, \"nm\": \"Path 1\", \"mn\": \"ADBE Vector Shape - Group\", \"hd\": false}, {\"ty\": \"st\", \"c\": {\"a\": 0, \"k\": [0, 0.470588237047, 0, 1], \"ix\": 3}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 4}, \"w\": {\"a\": 0, \"k\": 2, \"ix\": 5}, \"lc\": 1, \"lj\": 1, \"ml\": 4, \"bm\": 0, \"nm\": \"Stroke 1\", \"mn\": \"ADBE Vector Graphic - Stroke\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 1\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 2, \"mn\": \"ADBE Vector Group\", \"hd\": false}, {\"ty\": \"gr\", \"it\": [{\"ty\": \"rc\", \"d\": 1, \"s\": {\"a\": 0, \"k\": [500, 100], \"ix\": 2}, \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"nm\": \"Rectangle Path 1\", \"mn\": \"ADBE Vector Shape - Rect\", \"hd\": false}, {\"ty\": \"fl\", \"c\": {\"a\": 0, \"k\": [0.917647063732, 0.917647063732, 0.705882370472, 1], \"ix\": 4}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 5}, \"r\": 1, \"bm\": 0, \"nm\": \"Fill 1\", \"mn\": \"ADBE Vector Graphic - Fill\", \"hd\": false}, {\"ty\": \"tr\", \"p\": {\"a\": 0, \"k\": [0, 0], \"ix\": 2}, \"a\": {\"a\": 0, \"k\": [0, 0], \"ix\": 1}, \"s\": {\"a\": 0, \"k\": [100, 100], \"ix\": 3}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 6}, \"o\": {\"a\": 0, \"k\": 100, \"ix\": 7}, \"sk\": {\"a\": 0, \"k\": 0, \"ix\": 4}, \"sa\": {\"a\": 0, \"k\": 0, \"ix\": 5}, \"nm\": \"Transform\"}], \"nm\": \"Group 2\", \"np\": 2, \"cix\": 2, \"bm\": 0, \"ix\": 3, \"mn\": \"ADBE Vector Group\", \"hd\": false}], \"ip\": 0, \"op\": 600, \"st\": 0, \"ct\": 1, \"bm\": 0}, {\"ddd\": 0, \"ind\": 2, \"ty\": 0, \"nm\": \"time_remap_precomp\", \"refId\": \"comp_0\", \"sr\": 1, \"ks\": {\"o\": {\"a\": 0, \"k\": 100, \"ix\": 11}, \"r\": {\"a\": 0, \"k\": 0, \"ix\": 10}, \"p\": {\"a\": 0, \"k\": [250, 180, 0], \"ix\": 2, \"l\": 2}, \"a\": {\"a\": 0, \"k\": [250, 250, 0], \"ix\": 1, \"l\": 2}, \"s\": {\"a\": 0, \"k\": [100, 100, 100], \"ix\": 6, \"l\": 2}}, \"ao\": 0, \"tm\": {\"a\": 1, \"k\": [{\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 0, \"s\": [0]}, {\"i\": {\"x\": [0.833], \"y\": [0.833]}, \"o\": {\"x\": [0.167], \"y\": [0.167]}, \"t\": 120, \"s\": [7]}, {\"t\": 600, \"s\": [10]}], \"ix\": 2}, \"w\": 500, \"h\": 500, \"ip\": 0, \"op\": 600, \"st\": 0, \"bm\": 0}], \"markers\": []}, function (lottie, data) { const time_maps = [ { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }}, { 't': 600, 's': [10] } ]}, { 'a': 1, k: [ { 't': 0, 's': [10], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }}, { 't': 600, 's': [ 0] } ]}, { 'a': 1, k: [ { 't': 0, 's': [3], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }}, { 't': 600, 's': [7] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0.0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 150, 's': [ 2.5], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 300, 's': [ 5.0], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 450, 's': [ 7.5], 'o': { 'x': [0], 'y': [0]}, 'i': { 'x': [1], 'y': [1] }, 'h': 1 }, { 't': 600, 's': [10.0] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0], 'y': [0.5]}, 'i': { 'x': [0.5], 'y': [1] }}, { 't': 600, 's': [10] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0], 'y': [0.5]}, 'i': { 'x': [1], 'y': [0.5] }}, { 't': 600, 's': [10] } ]}, { 'a': 1, k: [ { 't': 0, 's': [ 0], 'o': { 'x': [0.2], 'y': [0]}, 'i': { 'x': [0.8], 'y': [1] }}, { 't': 300, 's': [ 7], 'o': { 'x': [0.2], 'y': [0]}, 'i': { 'x': [0.8], 'y': [1] }}, { 't': 600, 's': [ 0] } ]}, ]; const time_paths = [ { 'v': [[-250, 50], [250, -50]], 'o': [[ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[250, 50], [-250, -50]], 'o': [[ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[250, 20], [-250, -20]], 'o': [[ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[-250, 50], [-125, 50], [-125, 25], [0, 25], [0, 0], [125, 0], [125, -25], [250, -25]], 'o': [[ 0, 0], [ 0, 0], [ 0, 0], [0, 0], [0, 0], [ 0, 0], [ 0, 0], [ 0, 0]], 'i': [[ 0, 0], [ 0, 0], [ 0, 0], [0, 0], [0, 0], [ 0, 0], [ 0, 0], [ 0, 0]], 'c': false }, { 'v': [[-250, 50], [ 250, -50]], 'o': [[ 0, -50], [ 0, 0]], 'i': [[ 0, 0], [-250, 0]], 'c': false }, { 'v': [[-250, 50], [250, -50]], 'o': [[ 0, -50], [ 0, 0]], 'i': [[ 0, 0], [ 0, 50]], 'c': false }, { 'v': [[-250, 50], [ 0, -20], [ 250, 50]], 'o': [[ 100, 0], [ 100, 0], [ 0, 0]], 'i': [[ 0, 0], [-100, 0], [-100, 0]], 'c': false }, ]; const sample_index = data[\"Time Remap\"]; const precomp_layer = lottie.layers[1]; precomp_layer.tm = time_maps[sample_index]; const time_shape = lottie.layers[0].shapes[1].it[0]; time_shape.ks.k = time_paths[sample_index]; this.json_viewer_contents = lottie.layers[1].tm; }, {} );","title":"Time Remap"},{"location":"specs/properties/","text":"Properties Introduction Properties in Lottie can be animated. Their structure depends on whether it's animated or not: Attribute Type Title Description a 0-1 integer Animated Whether the property is animated k Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Keyframes Composition Diagram for Base Keyframe Base Keyframe Vector Keyframe Position Keyframe Gradient Keyframe Color Keyframe Shape Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe Keyframe arrays MUST be stored in order of ascending t frame number. Two consecutive keyframes MAY have the same t value but a property MUST NOT have more than two keyframes with the same t . If two keyframes share the t value, the implementation MUST render one of the two values at the given frame. All keyframes MUST have an i and o value, unless- It is the last keyframe in the sequence OR h is present and it's 1, as the property will keep the same value until the next keyframe. If the first keyframe occurs after the start of the animation, the initial property value will be from the first keyframe. Similarly, if the last keyframe is before the end of the animation, the last keyframe value will be held until the end. Keyframe Easing Keyframe easing handles are objects with x and y attributes, which are numbers within 0 and 1. Attribute Type Title Description x Vector or number X Time component: 0 means start time of the keyframe, 1 means time of the next keyframe. y Vector or number Y Value interpolation component: 0 means start value of the keyframe, 1 means value at the next keyframe. For vector properties, these are arrays, with one element per dimension so you can have different easing curves per dimension. They represent a cubic bezier, starting at [0,0] and ending at [1,1] where the value determines the easing function. The x axis represents time, a value of 0 is the time of the current keyframe, a value of 1 is the time of the next keyframe. The y axis represents the value interpolation factor, a value of 0 represents the value at the current keyframe, a value of 1 represents the value at the next keyframe. Unlike x values, y values are not clamped to [0 .. 1] . Supernormal y values allow the interpolated value to overshoot (extrapolate) beyond the specified keyframe values range. When you use easing you have two easing handles for the keyframe: o is the \"out\" handle, and is the first one in the bezier, determines the curve as it exits the current keyframe. i is the \"in\" handle, and it's the second one in the bezier, determines the curve as it enters the next keyframe. For linear interpolation you'd have { \"o\": {\"x\": [0, 0], \"y\": [0, 0]}, \"i\": {\"x\": [1, 1], \"y\": [1, 1]} } For easing in and out, you move the x towards the center, this makes the animation more fluid: { \"o\": {\"x\": [0.333, 0.333], \"y\": [0, 0]}, \"i\": {\"x\": [0.667, 0.667], \"y\": [1, 1]} } Easing example In the following example, the ball moves left and right, on the background you can see and edit a representation of its easing function. KeyframePreviewEditor.stand_alone(document.getElementById(\"editor_18\"), (lottie) => { var raw_json = JSON.stringify(lottie, undefined, 4); var pretty_json = hljs.highlight(\"json\", raw_json).value; document.getElementById(\"json_viewer_18\").innerHTML = pretty_json; }, ); Property types Vector Animatable Vector . Composition Diagram for Vector Property Vector Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k Vector or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Vector Keyframe Composition Diagram for Vector Keyframe Vector Keyframe Base Keyframe Position Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Vector Value Value at this keyframe. Scalar Animatable scalar (single number value). Note that when animated it uses Vector Keyframes , so instead of scalars keyframes have arrays with a single values. Composition Diagram for Scalar Property Scalar Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k number or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Position Animatable 2D Vector with optional spatial tangents. Composition Diagram for Position Property Position Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k Vector or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Position Keyframe Composition Diagram for Position Keyframe Position Keyframe Vector Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Vector Value Value at this keyframe. ti Vector Value In Tangent Tangent for values (eg: moving position around a curved path) to Vector Value Out Tangent Tangent for values (eg: moving position around a curved path) Split Position An animatable position where position values may be defined and animated separately. Attribute Type Title Description s boolean = True Split Whether the position has split values x Scalar X Position X Position y Scalar Y Position Y Position Bezier Shape Animatable Bezier . Attribute Type Title Description a 0-1 integer Animated Whether the property is animated k Bezier or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Bezier Shape Keyframe Composition Diagram for Shape Keyframe Shape Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s array of Bezier Value Value at this keyframe. Color Animatable Color . Composition Diagram for Color Property Color Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k Color or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Color Keyframe Composition Diagram for Color Keyframe Color Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Color Value Value at this keyframe. Gradient Animatable Gradient . Attribute Type Title Description p number Color stop count Color stop count k object Gradient stops Animatable vector representing the gradient stops k.a 0-1 integer Animated Whether the property is animated k.k Gradient or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Color count is not animatable. Gradient Keyframe Composition Diagram for Gradient Keyframe Gradient Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Gradient Value Value at this keyframe.","title":"Properties"},{"location":"specs/properties/#properties","text":"","title":"Properties"},{"location":"specs/properties/#introduction","text":"Properties in Lottie can be animated. Their structure depends on whether it's animated or not: Attribute Type Title Description a 0-1 integer Animated Whether the property is animated k Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes.","title":"Introduction"},{"location":"specs/properties/#base-keyframe","text":"Composition Diagram for Base Keyframe Base Keyframe Vector Keyframe Position Keyframe Gradient Keyframe Color Keyframe Shape Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe Keyframe arrays MUST be stored in order of ascending t frame number. Two consecutive keyframes MAY have the same t value but a property MUST NOT have more than two keyframes with the same t . If two keyframes share the t value, the implementation MUST render one of the two values at the given frame. All keyframes MUST have an i and o value, unless- It is the last keyframe in the sequence OR h is present and it's 1, as the property will keep the same value until the next keyframe. If the first keyframe occurs after the start of the animation, the initial property value will be from the first keyframe. Similarly, if the last keyframe is before the end of the animation, the last keyframe value will be held until the end.","title":"Keyframes"},{"location":"specs/properties/#easing-handle","text":"Keyframe easing handles are objects with x and y attributes, which are numbers within 0 and 1. Attribute Type Title Description x Vector or number X Time component: 0 means start time of the keyframe, 1 means time of the next keyframe. y Vector or number Y Value interpolation component: 0 means start value of the keyframe, 1 means value at the next keyframe. For vector properties, these are arrays, with one element per dimension so you can have different easing curves per dimension. They represent a cubic bezier, starting at [0,0] and ending at [1,1] where the value determines the easing function. The x axis represents time, a value of 0 is the time of the current keyframe, a value of 1 is the time of the next keyframe. The y axis represents the value interpolation factor, a value of 0 represents the value at the current keyframe, a value of 1 represents the value at the next keyframe. Unlike x values, y values are not clamped to [0 .. 1] . Supernormal y values allow the interpolated value to overshoot (extrapolate) beyond the specified keyframe values range. When you use easing you have two easing handles for the keyframe: o is the \"out\" handle, and is the first one in the bezier, determines the curve as it exits the current keyframe. i is the \"in\" handle, and it's the second one in the bezier, determines the curve as it enters the next keyframe. For linear interpolation you'd have { \"o\": {\"x\": [0, 0], \"y\": [0, 0]}, \"i\": {\"x\": [1, 1], \"y\": [1, 1]} } For easing in and out, you move the x towards the center, this makes the animation more fluid: { \"o\": {\"x\": [0.333, 0.333], \"y\": [0, 0]}, \"i\": {\"x\": [0.667, 0.667], \"y\": [1, 1]} }","title":"Keyframe Easing"},{"location":"specs/properties/#easing-example","text":"In the following example, the ball moves left and right, on the background you can see and edit a representation of its easing function. KeyframePreviewEditor.stand_alone(document.getElementById(\"editor_18\"), (lottie) => { var raw_json = JSON.stringify(lottie, undefined, 4); var pretty_json = hljs.highlight(\"json\", raw_json).value; document.getElementById(\"json_viewer_18\").innerHTML = pretty_json; }, );","title":"Easing example"},{"location":"specs/properties/#property-types","text":"","title":"Property types"},{"location":"specs/properties/#vector-property","text":"Animatable Vector . Composition Diagram for Vector Property Vector Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k Vector or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes.","title":"Vector"},{"location":"specs/properties/#vector-keyframe","text":"Composition Diagram for Vector Keyframe Vector Keyframe Base Keyframe Position Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Vector Value Value at this keyframe.","title":"Vector Keyframe"},{"location":"specs/properties/#scalar-property","text":"Animatable scalar (single number value). Note that when animated it uses Vector Keyframes , so instead of scalars keyframes have arrays with a single values. Composition Diagram for Scalar Property Scalar Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k number or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes.","title":"Scalar"},{"location":"specs/properties/#position-property","text":"Animatable 2D Vector with optional spatial tangents. Composition Diagram for Position Property Position Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k Vector or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes.","title":"Position"},{"location":"specs/properties/#position-keyframe","text":"Composition Diagram for Position Keyframe Position Keyframe Vector Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Vector Value Value at this keyframe. ti Vector Value In Tangent Tangent for values (eg: moving position around a curved path) to Vector Value Out Tangent Tangent for values (eg: moving position around a curved path)","title":"Position Keyframe"},{"location":"specs/properties/#splittable-position-property","text":"An animatable position where position values may be defined and animated separately. Attribute Type Title Description s boolean = True Split Whether the position has split values x Scalar X Position X Position y Scalar Y Position Y Position","title":"Split Position"},{"location":"specs/properties/#bezier-property","text":"Animatable Bezier . Attribute Type Title Description a 0-1 integer Animated Whether the property is animated k Bezier or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes.","title":"Bezier Shape"},{"location":"specs/properties/#bezier-keyframe","text":"Composition Diagram for Shape Keyframe Shape Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s array of Bezier Value Value at this keyframe.","title":"Bezier Shape Keyframe"},{"location":"specs/properties/#color-property","text":"Animatable Color . Composition Diagram for Color Property Color Property Slottable Property Slottable Object Attribute Type Title Description sid string Slot Id Identifier to look up the slot a 0-1 integer Animated Whether the property is animated k Color or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes.","title":"Color"},{"location":"specs/properties/#color-keyframe","text":"Composition Diagram for Color Keyframe Color Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Color Value Value at this keyframe.","title":"Color Keyframe"},{"location":"specs/properties/#gradient-property","text":"Animatable Gradient . Attribute Type Title Description p number Color stop count Color stop count k object Gradient stops Animatable vector representing the gradient stops k.a 0-1 integer Animated Whether the property is animated k.k Gradient or array Value or Keyframes When it's not animated, k will contain the value directly. When animated, k will be an array of keyframes. Color count is not animatable.","title":"Gradient"},{"location":"specs/properties/#gradient-keyframe","text":"Composition Diagram for Gradient Keyframe Gradient Keyframe Base Keyframe Attribute Type Title Description t number Time Frame number h 0-1 integer Hold Hold i Keyframe Easing In Tangent Easing tangent going into the next keyframe o Keyframe Easing Out Tangent Easing tangent leaving the current keyframe s Gradient Value Value at this keyframe.","title":"Gradient Keyframe"},{"location":"specs/schema/","text":"JSON Schema This page shows a formatted version of the JSON schema, you can click on highlighted objects to get a link to that section of the schema. You can also click on $ref values to jump to the relevant section. If you want you can also view the raw schema file . { \"$schema\" : \"https://json-schema.org/draft/2020-12/schema\" , \"$id\" : \"https://lottie.github.io/lottie-spec/1.0/specs/schema/\" , \"$ref\" : \"#/$defs/composition/animation\" , \"$version\" : 10000 , \"$defs\" : { \"assets\" : { \"precomposition\" : { \"type\" : \"object\" , \"title\" : \"Precomposition\" , \"description\" : \"Asset containing a composition that can be referenced by layers.\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/assets/asset\" }, { \"$ref\" : \"#/$defs/composition/composition\" } ] }, \"asset\" : { \"type\" : \"object\" , \"title\" : \"Asset\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"id\" : { \"title\" : \"ID\" , \"description\" : \"Unique identifier used by layers when referencing this asset\" , \"type\" : \"string\" } }, \"required\" : [ \"id\" ] } ] }, \"image\" : { \"type\" : \"object\" , \"title\" : \"Image\" , \"description\" : \"Asset containing an image that can be referenced by layers.\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/assets/asset\" }, { \"$ref\" : \"#/$defs/helpers/slottable-object\" }, { \"type\" : \"object\" , \"properties\" : { \"w\" : { \"title\" : \"Width\" , \"description\" : \"Width of the image\" , \"type\" : \"number\" }, \"h\" : { \"title\" : \"Height\" , \"description\" : \"Height of the image\" , \"type\" : \"number\" }, \"p\" : { \"title\" : \"File Name\" , \"description\" : \"Name of the image file or a data url\" , \"type\" : \"string\" }, \"u\" : { \"title\" : \"File Path\" , \"description\" : \"Path to the image file\" , \"type\" : \"string\" }, \"e\" : { \"title\" : \"Embedded\" , \"description\" : \"If '1', 'p' is a Data URL\" , \"$ref\" : \"#/$defs/values/int-boolean\" } }, \"allOf\" : [ { \"if\" : { \"properties\" : { \"e\" : { \"const\" : 1 } }, \"required\" : [ \"e\" ] }, \"then\" : { \"properties\" : { \"p\" : { \"$ref\" : \"#/$defs/values/data-url\" } } } } ], \"if\" : { \"required\" : [ \"sid\" ] }, \"else\" : { \"required\" : [ \"w\" , \"h\" , \"p\" ] } } ] }, \"all-assets\" : { \"oneOf\" : [ { \"$ref\" : \"#/$defs/assets/precomposition\" }, { \"$ref\" : \"#/$defs/assets/image\" } ] } }, \"composition\" : { \"animation\" : { \"type\" : \"object\" , \"title\" : \"Animation\" , \"description\" : \"Top level object, describing the animation\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"ver\" : { \"title\" : \"Specification Version\" , \"description\" : \"Specification version this Lottie is targeting. This is a 6 digit number with version components encoded as MMmmpp , with MM being major version, mm being minor and pp being patch.\" , \"type\" : \"integer\" , \"minimum\" : 10000 }, \"fr\" : { \"title\" : \"Framerate\" , \"description\" : \"Framerate in frames per second\" , \"type\" : \"number\" , \"exclusiveMinimum\" : 0 }, \"ip\" : { \"title\" : \"In Point\" , \"description\" : \"Frame the animation starts at (usually 0)\" , \"type\" : \"number\" }, \"op\" : { \"title\" : \"Out Point\" , \"description\" : \"Frame the animation stops/loops at, which makes this the duration in frames when ip is 0\" , \"type\" : \"number\" }, \"w\" : { \"title\" : \"Width\" , \"description\" : \"Width of the animation\" , \"type\" : \"integer\" , \"minimum\" : 0 }, \"h\" : { \"title\" : \"Height\" , \"description\" : \"Height of the animation\" , \"type\" : \"integer\" , \"minimum\" : 0 }, \"assets\" : { \"title\" : \"Assets\" , \"type\" : \"array\" , \"description\" : \"List of assets that can be referenced by layers\" , \"items\" : { \"$ref\" : \"#/$defs/assets/all-assets\" } }, \"markers\" : { \"title\" : \"Markers\" , \"description\" : \"Markers defining named sections of the composition.\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/helpers/marker\" } }, \"slots\" : { \"title\" : \"Slots\" , \"description\" : \"Dictionary of slot ids that will replace matching properties.\" , \"type\" : \"object\" , \"additionalProperties\" : { \"$ref\" : \"#/$defs/helpers/slot\" } } }, \"required\" : [ \"w\" , \"h\" , \"fr\" , \"op\" , \"ip\" ] }, { \"$ref\" : \"#/$defs/composition/composition\" } ] }, \"composition\" : { \"type\" : \"object\" , \"title\" : \"Composition\" , \"description\" : \"An object that contains a list of layers\" , \"properties\" : { \"layers\" : { \"title\" : \"Layers\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/layers/all-layers\" } } }, \"required\" : [ \"layers\" ] } }, \"constants\" : { \"gradient-type\" : { \"type\" : \"integer\" , \"title\" : \"Gradient Type\" , \"description\" : \"Whether a Gradient is a linear or radial.\" , \"oneOf\" : [ { \"title\" : \"Linear\" , \"description\" : \"Colors transition in a single linear direction.\" , \"const\" : 1 }, { \"title\" : \"Radial\" , \"description\" : \"Colors transition outward from a center point.\" , \"const\" : 2 } ] }, \"line-cap\" : { \"type\" : \"integer\" , \"title\" : \"Line Cap\" , \"description\" : \"Style at the end of a stoked line\" , \"oneOf\" : [ { \"title\" : \"Butt\" , \"const\" : 1 }, { \"title\" : \"Round\" , \"const\" : 2 }, { \"title\" : \"Square\" , \"const\" : 3 } ] }, \"fill-rule\" : { \"type\" : \"integer\" , \"title\" : \"Fill Rule\" , \"description\" : \"Rule used to handle multiple shapes rendered with the same fill object\" , \"oneOf\" : [ { \"title\" : \"Non Zero\" , \"description\" : \"Everything is colored (You can think of this as an OR)\" , \"const\" : 1 }, { \"title\" : \"Even Odd\" , \"description\" : \"Colored based on intersections and path direction, can be used to create \\\"holes\\\"\" , \"const\" : 2 } ] }, \"matte-mode\" : { \"type\" : \"integer\" , \"title\" : \"Matte Mode\" , \"description\" : \"How a layer should mask another layer\" , \"oneOf\" : [ { \"title\" : \"Normal\" , \"description\" : \"The layer is not used as a track matte\" , \"const\" : 0 }, { \"title\" : \"Alpha\" , \"description\" : \"The masked layer opacity is modulated by the track matte layer opacity\" , \"const\" : 1 }, { \"title\" : \"Inverted Alpha\" , \"description\" : \"The masked layer opacity is modulated by the inverted track matte layer opacity\" , \"const\" : 2 }, { \"title\" : \"Luma\" , \"description\" : \"The masked layer opacity is modulated by the track matte layer luminance\" , \"const\" : 3 }, { \"title\" : \"Inverted Luma\" , \"description\" : \"The masked layer opacity is modulated by the inverted track matte layer luminance\" , \"const\" : 4 } ] }, \"star-type\" : { \"type\" : \"integer\" , \"title\" : \"Star Type\" , \"description\" : \"Whether a PolyStar is a star or a polygon\" , \"oneOf\" : [ { \"title\" : \"Star\" , \"const\" : 1 }, { \"title\" : \"Polygon\" , \"const\" : 2 } ] }, \"trim-multiple-shapes\" : { \"type\" : \"integer\" , \"title\" : \"Trim Multiple Shapes\" , \"description\" : \"How to handle multiple shapes in trim path\" , \"oneOf\" : [ { \"title\" : \"Parallel\" , \"description\" : \"All shapes apply the trim at the same time\" , \"const\" : 1 }, { \"title\" : \"Sequential\" , \"description\" : \"Shapes are considered as a continuous sequence\" , \"const\" : 2 } ] }, \"mask-mode\" : { \"type\" : \"string\" , \"title\" : \"Mask Mode\" , \"description\" : \"Describes how a mask interacts (blends) with the preceding masks in the stack.\" , \"oneOf\" : [ { \"title\" : \"None\" , \"const\" : \"n\" , \"description\" : \"The mask is ignored.\" }, { \"title\" : \"Add\" , \"const\" : \"a\" , \"description\" : \"Mask coverage is added (Normal blending).\" }, { \"title\" : \"Subtract\" , \"const\" : \"s\" , \"description\" : \"Mask coverage is subtracted (Subtract blending).\" }, { \"title\" : \"Intersect\" , \"const\" : \"i\" , \"description\" : \"Mask coverage is intersected (Source-In blending).\" } ] }, \"line-join\" : { \"type\" : \"integer\" , \"title\" : \"Line Join\" , \"description\" : \"Style at a sharp corner of a stoked line\" , \"oneOf\" : [ { \"title\" : \"Miter\" , \"const\" : 1 }, { \"title\" : \"Round\" , \"const\" : 2 }, { \"title\" : \"Bevel\" , \"const\" : 3 } ] }, \"shape-direction\" : { \"type\" : \"integer\" , \"title\" : \"Shape Direction\" , \"description\" : \"Drawing direction of the shape curve, useful for trim path\" , \"oneOf\" : [ { \"title\" : \"Normal\" , \"description\" : \"Usually clockwise\" , \"const\" : 1 }, { \"title\" : \"Reversed\" , \"description\" : \"Usually counter clockwise\" , \"const\" : 3 } ] }, \"stroke-dash-type\" : { \"type\" : \"string\" , \"title\" : \"Stroke Dash Type\" , \"description\" : \"Type of a dash item in a stroked line\" , \"oneOf\" : [ { \"title\" : \"Dash\" , \"const\" : \"d\" }, { \"title\" : \"Gap\" , \"const\" : \"g\" }, { \"title\" : \"Offset\" , \"const\" : \"o\" } ] } }, \"helpers\" : { \"marker\" : { \"type\" : \"object\" , \"title\" : \"Marker\" , \"description\" : \"Defines named portions of the composition.\" , \"properties\" : { \"cm\" : { \"title\" : \"Comment\" , \"type\" : \"string\" }, \"tm\" : { \"title\" : \"Time\" , \"type\" : \"number\" }, \"dr\" : { \"title\" : \"Duration\" , \"type\" : \"number\" } } }, \"slottable-object\" : { \"type\" : \"object\" , \"title\" : \"Slottable Object\" , \"description\" : \"Object that may have its value replaced with a slot value\" , \"properties\" : { \"sid\" : { \"title\" : \"Slot Id\" , \"description\" : \"Identifier to look up the slot\" , \"type\" : \"string\" } } }, \"transform\" : { \"type\" : \"object\" , \"title\" : \"Transform\" , \"description\" : \"Layer transform\" , \"allOf\" : [ { \"properties\" : { \"a\" : { \"title\" : \"Anchor Point\" , \"description\" : \"Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale)\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"p\" : { \"title\" : \"Position\" , \"description\" : \"Position / Translation\" , \"$ref\" : \"#/$defs/properties/splittable-position-property\" }, \"r\" : { \"title\" : \"Rotation\" , \"description\" : \"Rotation in degrees, clockwise\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"s\" : { \"title\" : \"Scale\" , \"description\" : \"Scale factor, [100, 100] for no scaling\" , \"$ref\" : \"#/$defs/properties/vector-property\" }, \"o\" : { \"title\" : \"Opacity\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"sk\" : { \"title\" : \"Skew\" , \"description\" : \"Skew amount as an angle in degrees\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"sa\" : { \"title\" : \"Skew Axis\" , \"description\" : \"Direction along which skew is applied, in degrees ( 0 skews along the X axis, 90 along the Y axis)\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } } } ] }, \"mask\" : { \"type\" : \"object\" , \"title\" : \"Mask\" , \"description\" : \"Mask for layer content.\" , \"allOf\" : [ { \"properties\" : { \"mode\" : { \"title\" : \"Mode\" , \"$ref\" : \"#/$defs/constants/mask-mode\" , \"default\" : \"i\" }, \"o\" : { \"title\" : \"Opacity\" , \"description\" : \"Mask opacity, as a percentage [0..100].\" , \"$ref\" : \"#/$defs/properties/scalar-property\" , \"default\" : 100 }, \"pt\" : { \"title\" : \"Shape\" , \"description\" : \"Mask shape\" , \"$ref\" : \"#/$defs/properties/bezier-property\" } }, \"required\" : [ \"pt\" ] } ] }, \"slot\" : { \"type\" : \"object\" , \"title\" : \"Slot\" , \"description\" : \"Defines a property value that will be set to all matched properties\" , \"properties\" : { \"p\" : { \"title\" : \"Property Value\" , \"description\" : \"Property Value\" } }, \"required\" : [ \"p\" ] }, \"slottable-property\" : { \"type\" : \"object\" , \"title\" : \"Slottable Property\" , \"description\" : \"Property that may have its value replaced with a slot value\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-object\" } ], \"if\" : { \"required\" : [ \"sid\" ] }, \"else\" : { \"required\" : [ \"a\" , \"k\" ] } }, \"visual-object\" : { \"type\" : \"object\" , \"title\" : \"Visual Object\" , \"description\" : \"\" , \"allOf\" : [ { \"type\" : \"object\" , \"properties\" : { \"nm\" : { \"title\" : \"Name\" , \"description\" : \"Human readable name, as seen from editors and the like\" , \"type\" : \"string\" } }, \"required\" : [] } ] } }, \"layers\" : { \"solid-layer\" : { \"type\" : \"object\" , \"title\" : \"Solid Layer\" , \"description\" : \"Solid color, rectangle-shaped layer\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 1 }, \"sw\" : { \"title\" : \"Width\" , \"description\" : \"Solid rectangle width\" , \"type\" : \"integer\" }, \"sh\" : { \"title\" : \"Height\" , \"description\" : \"Solid rectangle height\" , \"type\" : \"integer\" }, \"sc\" : { \"title\" : \"Color\" , \"description\" : \"Solid fill color\" , \"$ref\" : \"#/$defs/values/hexcolor\" } }, \"required\" : [ \"ty\" , \"sw\" , \"sh\" , \"sc\" ] } ] }, \"image-layer\" : { \"type\" : \"object\" , \"title\" : \"Image Layer\" , \"description\" : \"Layer containing an image\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 2 }, \"refId\" : { \"title\" : \"Reference Id\" , \"description\" : \"ID of the image as specified in the assets\" , \"type\" : \"string\" } }, \"required\" : [ \"ty\" , \"refId\" ] } ] }, \"all-layers\" : { \"oneOf\" : [ { \"$ref\" : \"#/$defs/layers/precomposition-layer\" }, { \"$ref\" : \"#/$defs/layers/image-layer\" }, { \"$ref\" : \"#/$defs/layers/null-layer\" }, { \"$ref\" : \"#/$defs/layers/solid-layer\" }, { \"$ref\" : \"#/$defs/layers/shape-layer\" }, { \"$ref\" : \"#/$defs/layers/unknown-layer\" } ] }, \"precomposition-layer\" : { \"type\" : \"object\" , \"title\" : \"Precomposition Layer\" , \"description\" : \"Layer that renders a Precomposition asset\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 0 }, \"refId\" : { \"title\" : \"Reference Id\" , \"description\" : \"ID of the precomp as specified in the assets\" , \"type\" : \"string\" }, \"w\" : { \"title\" : \"Width\" , \"description\" : \"Width of the clipping rect\" , \"type\" : \"integer\" }, \"h\" : { \"title\" : \"Height\" , \"description\" : \"Height of the clipping rect\" , \"type\" : \"integer\" }, \"sr\" : { \"title\" : \"Time Stretch\" , \"type\" : \"number\" , \"default\" : 1 }, \"st\" : { \"title\" : \"Start Time\" , \"type\" : \"number\" , \"default\" : 0 }, \"tm\" : { \"title\" : \"Time Remap\" , \"description\" : \"Timeline remap function (frame index -> time in seconds)\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"ty\" , \"refId\" ] } ] }, \"null-layer\" : { \"type\" : \"object\" , \"title\" : \"Null Layer\" , \"description\" : \"Layer with no data, useful to group layers together\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 3 } }, \"required\" : [ \"ty\" ] } ] }, \"shape-layer\" : { \"type\" : \"object\" , \"title\" : \"Shape Layer\" , \"description\" : \"Layer containing Shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 4 }, \"shapes\" : { \"title\" : \"Shapes\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/shapes/all-graphic-elements\" } } }, \"required\" : [ \"ty\" , \"shapes\" ] } ] }, \"unknown-layer\" : { \"type\" : \"object\" , \"title\" : \"Unknown layer types\" , \"description\" : \"Unknown layer types. Types not defined by the specification are still allowed.\" , \"properties\" : { \"ty\" : { \"not\" : { \"$comment\" : \"enum list is dynamically generated\" , \"enum\" : [ 0 , 2 , 3 , 1 , 4 ] } } } }, \"visual-layer\" : { \"type\" : \"object\" , \"title\" : \"Visual Layer\" , \"description\" : \"Layer used to affect visual elements\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ks\" : { \"title\" : \"Transform\" , \"description\" : \"Layer transform\" , \"$ref\" : \"#/$defs/helpers/transform\" }, \"ao\" : { \"title\" : \"Auto Orient\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"default\" : 0 , \"description\" : \"If 1, the layer will rotate itself to match its animated position path\" }, \"tt\" : { \"title\" : \"Matte Mode\" , \"$ref\" : \"#/$defs/constants/matte-mode\" , \"description\" : \"Defines the track matte mode for the layer\" }, \"tp\" : { \"title\" : \"Matte Parent\" , \"type\" : \"integer\" , \"description\" : \"Index of the layer used as matte, if omitted assume the layer above the current one\" }, \"masksProperties\" : { \"title\" : \"Masks\" , \"description\" : \"Optional array of masks for the layer.\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/helpers/mask\" } } }, \"required\" : [ \"ks\" ] } ] }, \"layer\" : { \"type\" : \"object\" , \"title\" : \"Layer\" , \"description\" : \"Common properties for all layers\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"hd\" : { \"title\" : \"Hidden\" , \"description\" : \"Whether the layer is hidden\" , \"type\" : \"boolean\" }, \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer Type\" , \"type\" : \"integer\" }, \"ind\" : { \"title\" : \"Index\" , \"type\" : \"integer\" , \"description\" : \"Index that can be used for parenting and referenced in expressions\" }, \"parent\" : { \"title\" : \"Parent Index\" , \"description\" : \"Must be the ind property of another layer\" , \"type\" : \"integer\" }, \"ip\" : { \"title\" : \"In Point\" , \"description\" : \"Frame when the layer becomes visible\" , \"type\" : \"number\" }, \"op\" : { \"title\" : \"Out Point\" , \"description\" : \"Frame when the layer becomes invisible\" , \"type\" : \"number\" } }, \"required\" : [ \"ty\" , \"ip\" , \"op\" ] } ] } }, \"properties\" : { \"vector-property\" : { \"type\" : \"object\" , \"title\" : \"Vector Property\" , \"description\" : \"An animatable property that holds an array of numbers\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/vector\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/vector-keyframe\" } } } } ] }, \"vector-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Vector Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"$ref\" : \"#/$defs/values/vector\" } } } ], \"required\" : [ \"s\" ] }, \"gradient-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Gradient Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"$ref\" : \"#/$defs/values/gradient\" } } } ], \"required\" : [ \"s\" ] }, \"bezier-property\" : { \"type\" : \"object\" , \"title\" : \"Bezier Property\" , \"description\" : \"An animatable property that holds a Bezier shape\" , \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/bezier\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/bezier-keyframe\" } } } } ], \"required\" : [ \"a\" , \"k\" ] }, \"position-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Position Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/vector-keyframe\" }, { \"properties\" : { \"ti\" : { \"title\" : \"Value In Tangent\" , \"description\" : \"Tangent for values (eg: moving position around a curved path)\" , \"$ref\" : \"#/$defs/values/vector\" }, \"to\" : { \"title\" : \"Value Out Tangent\" , \"description\" : \"Tangent for values (eg: moving position around a curved path)\" , \"$ref\" : \"#/$defs/values/vector\" } } } ] }, \"color-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Color Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"$ref\" : \"#/$defs/values/color\" } } } ], \"required\" : [ \"s\" ] }, \"scalar-property\" : { \"type\" : \"object\" , \"title\" : \"Scalar Property\" , \"description\" : \"An animatable property that holds a float\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"type\" : \"number\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/vector-keyframe\" } } } } ] }, \"gradient-property\" : { \"type\" : \"object\" , \"title\" : \"Gradient Property\" , \"description\" : \"An animatable property that holds a Gradient\" , \"properties\" : { \"p\" : { \"title\" : \"Color stop count\" , \"type\" : \"number\" }, \"k\" : { \"type\" : \"object\" , \"title\" : \"Gradient stops\" , \"description\" : \"Animatable vector representing the gradient stops\" , \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/gradient\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/gradient-keyframe\" } } } } ], \"required\" : [ \"a\" , \"k\" ] } } }, \"easing-handle\" : { \"type\" : \"object\" , \"title\" : \"Keyframe Easing\" , \"description\" : \"Bezier handle for keyframe interpolation\" , \"properties\" : { \"x\" : { \"title\" : \"X\" , \"description\" : \"Time component:\\n0 means start time of the keyframe,\\n1 means time of the next keyframe.\" , \"oneOf\" : [ { \"type\" : \"array\" , \"$ref\" : \"#/$defs/values/vector\" , \"items\" : { \"type\" : \"number\" , \"default\" : 0 , \"minimum\" : 0 , \"maximum\" : 1 }, \"minItems\" : 1 }, { \"type\" : \"number\" , \"default\" : 0 , \"minimum\" : 0 , \"maximum\" : 1 } ] }, \"y\" : { \"title\" : \"Y\" , \"description\" : \"Value interpolation component:\\n0 means start value of the keyframe,\\n1 means value at the next keyframe.\" , \"oneOf\" : [ { \"type\" : \"array\" , \"$ref\" : \"#/$defs/values/vector\" , \"items\" : { \"type\" : \"number\" , \"default\" : 0 }, \"minItems\" : 1 }, { \"type\" : \"number\" , \"default\" : 0 } ] } }, \"required\" : [ \"x\" , \"y\" ] }, \"base-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Base Keyframe\" , \"description\" : \"A Keyframes specifies the value at a specific time and the interpolation function to reach the next keyframe.\" , \"allOf\" : [ { \"properties\" : { \"t\" : { \"title\" : \"Time\" , \"description\" : \"Frame number\" , \"type\" : \"number\" , \"default\" : 0 }, \"h\" : { \"title\" : \"Hold\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"default\" : 0 }, \"i\" : { \"title\" : \"In Tangent\" , \"description\" : \"Easing tangent going into the next keyframe\" , \"$ref\" : \"#/$defs/properties/easing-handle\" }, \"o\" : { \"title\" : \"Out Tangent\" , \"description\" : \"Easing tangent leaving the current keyframe\" , \"$ref\" : \"#/$defs/properties/easing-handle\" } } } ], \"required\" : [ \"t\" ] }, \"split-position\" : { \"type\" : \"object\" , \"title\" : \"Split Position\" , \"description\" : \"An animatable position where x and y are definied and animated separately.\" , \"properties\" : { \"s\" : { \"title\" : \"Split\" , \"description\" : \"Whether the position has split values\" , \"type\" : \"boolean\" , \"const\" : true }, \"x\" : { \"title\" : \"X Position\" , \"description\" : \"X Position\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"y\" : { \"title\" : \"Y Position\" , \"description\" : \"Y Position\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"s\" , \"x\" , \"y\" ] }, \"bezier-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Shape Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/values/bezier\" }, \"minItems\" : 1 , \"maxItems\" : 1 } } } ], \"required\" : [ \"s\" ] }, \"position-property\" : { \"type\" : \"object\" , \"title\" : \"Position Property\" , \"description\" : \"An animatable property to represent a position in space\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/vector\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/position-keyframe\" } } } } ], \"required\" : [ \"a\" , \"k\" ] }, \"color-property\" : { \"type\" : \"object\" , \"title\" : \"Color Property\" , \"description\" : \"An animatable property that holds a Color\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/color\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/color-keyframe\" } } } } ] }, \"splittable-position-property\" : { \"type\" : \"object\" , \"title\" : \"Splittable Position Property\" , \"description\" : \"An animatable position where position values may be defined and animated separately.\" , \"oneOf\" : [ { \"$comment\" : \"Grouped XY position coordinates\" , \"$ref\" : \"#/$defs/properties/position-property\" , \"properties\" : { \"s\" : { \"title\" : \"Split\" , \"description\" : \"Whether the position has split values\" , \"type\" : \"boolean\" , \"const\" : false } } }, { \"$comment\" : \"Split XY position coordinates\" , \"$ref\" : \"#/$defs/properties/split-position\" } ] } }, \"shapes\" : { \"all-graphic-elements\" : { \"$comment\" : \"List of valid shapes\" , \"oneOf\" : [ { \"$ref\" : \"#/$defs/shapes/ellipse\" }, { \"$ref\" : \"#/$defs/shapes/fill\" }, { \"$ref\" : \"#/$defs/shapes/gradient-fill\" }, { \"$ref\" : \"#/$defs/shapes/gradient-stroke\" }, { \"$ref\" : \"#/$defs/shapes/group\" }, { \"$ref\" : \"#/$defs/shapes/path\" }, { \"$ref\" : \"#/$defs/shapes/polystar\" }, { \"$ref\" : \"#/$defs/shapes/rectangle\" }, { \"$ref\" : \"#/$defs/shapes/stroke\" }, { \"$ref\" : \"#/$defs/shapes/transform\" }, { \"$ref\" : \"#/$defs/shapes/trim-path\" }, { \"$ref\" : \"#/$defs/shapes/unknown-shape\" } ] }, \"polystar\" : { \"type\" : \"object\" , \"title\" : \"PolyStar\" , \"description\" : \"Star or regular polygon\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"sr\" }, \"p\" : { \"title\" : \"Position\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"or\" : { \"title\" : \"Outer Radius\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"os\" : { \"title\" : \"Outer Roundness\" , \"description\" : \"Outer Roundness as a percentage\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"r\" : { \"title\" : \"Rotation\" , \"description\" : \"Rotation, clockwise in degrees\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"pt\" : { \"title\" : \"Points\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"sy\" : { \"title\" : \"Star Type\" , \"$ref\" : \"#/$defs/constants/star-type\" , \"default\" : 1 }, \"ir\" : { \"title\" : \"Inner Radius\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"is\" : { \"title\" : \"Inner Roundness\" , \"description\" : \"Inner Roundness as a percentage\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"ty\" , \"or\" , \"os\" , \"pt\" , \"p\" , \"r\" ] }, { \"if\" : { \"properties\" : { \"sy\" : { \"const\" : 1 } } }, \"then\" : { \"required\" : [ \"ir\" , \"is\" ] } } ] }, \"group\" : { \"type\" : \"object\" , \"title\" : \"Group\" , \"description\" : \"Shape Element that can contain other shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"gr\" }, \"np\" : { \"title\" : \"Number Of Properties\" , \"type\" : \"number\" }, \"it\" : { \"title\" : \"Shapes\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/shapes/all-graphic-elements\" } } }, \"required\" : [ \"ty\" ] } ] }, \"path\" : { \"type\" : \"object\" , \"title\" : \"Path\" , \"description\" : \"Custom Bezier shape\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"sh\" }, \"ks\" : { \"title\" : \"Shape\" , \"description\" : \"Bezier path\" , \"$ref\" : \"#/$defs/properties/bezier-property\" } }, \"required\" : [ \"ty\" , \"ks\" ] } ] }, \"shape-style\" : { \"type\" : \"object\" , \"title\" : \"Shape Style\" , \"description\" : \"Describes the visual appearance (like fill and stroke) of neighbouring shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"type\" : \"object\" , \"properties\" : { \"o\" : { \"title\" : \"Opacity\" , \"description\" : \"Opacity, 100 means fully opaque\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"o\" ] } ] }, \"shape\" : { \"type\" : \"object\" , \"title\" : \"Shape\" , \"description\" : \"Drawable shape, defines the actual shape but not the style\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"type\" : \"object\" , \"properties\" : { \"d\" : { \"title\" : \"Direction\" , \"description\" : \"Direction the shape is drawn as, mostly relevant when using trim path\" , \"$ref\" : \"#/$defs/constants/shape-direction\" } } } ] }, \"fill\" : { \"type\" : \"object\" , \"title\" : \"Fill\" , \"description\" : \"Solid fill color\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"fl\" }, \"c\" : { \"title\" : \"Color\" , \"$ref\" : \"#/$defs/properties/color-property\" }, \"r\" : { \"title\" : \"Fill Rule\" , \"$ref\" : \"#/$defs/constants/fill-rule\" } }, \"required\" : [ \"ty\" , \"c\" ] } ] }, \"gradient-stroke\" : { \"type\" : \"object\" , \"title\" : \"Gradient Stroke\" , \"description\" : \"Gradient stroke\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"$ref\" : \"#/$defs/shapes/base-stroke\" }, { \"$ref\" : \"#/$defs/shapes/base-gradient\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"gs\" } }, \"required\" : [ \"ty\" ] } ] }, \"trim-path\" : { \"type\" : \"object\" , \"title\" : \"Trim Path\" , \"description\" : \"Trims shapes into a segment\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/modifier\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"tm\" }, \"s\" : { \"title\" : \"Start\" , \"description\" : \"Segment start\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"e\" : { \"title\" : \"End\" , \"description\" : \"Segment end\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"o\" : { \"title\" : \"Offset\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"m\" : { \"title\" : \"Multiple\" , \"description\" : \"How to treat multiple copies\" , \"$ref\" : \"#/$defs/constants/trim-multiple-shapes\" } }, \"required\" : [ \"ty\" , \"o\" , \"s\" , \"e\" ] } ] }, \"transform\" : { \"type\" : \"object\" , \"title\" : \"Transform Shape\" , \"description\" : \"Group transform\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"$ref\" : \"#/$defs/helpers/transform\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"tr\" } }, \"required\" : [ \"ty\" ] } ] }, \"rectangle\" : { \"type\" : \"object\" , \"title\" : \"Rectangle\" , \"description\" : \"A simple rectangle shape\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"rc\" }, \"p\" : { \"title\" : \"Position\" , \"description\" : \"Center of the rectangle\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"s\" : { \"title\" : \"Size\" , \"$ref\" : \"#/$defs/properties/vector-property\" }, \"r\" : { \"title\" : \"Rounded\" , \"description\" : \"Rounded corners radius\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"ty\" , \"s\" , \"p\" ] } ] }, \"base-gradient\" : { \"type\" : \"object\" , \"title\" : \"Base Gradient\" , \"description\" : \"Common properties for gradients\" , \"allOf\" : [ { \"type\" : \"object\" , \"properties\" : { \"g\" : { \"title\" : \"Colors\" , \"description\" : \"Gradient colors\" , \"$ref\" : \"#/$defs/properties/gradient-property\" }, \"s\" : { \"title\" : \"Start Point\" , \"description\" : \"Starting point for the gradient\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"e\" : { \"title\" : \"End Point\" , \"description\" : \"End point for the gradient\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"t\" : { \"title\" : \"Gradient Type\" , \"description\" : \"Type of the gradient\" , \"$ref\" : \"#/$defs/constants/gradient-type\" }, \"h\" : { \"title\" : \"Highlight Length\" , \"description\" : \"Highlight Length, as a percentage between s and e \" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"a\" : { \"title\" : \"Highlight Angle\" , \"description\" : \"Highlight Angle in clockwise degrees, relative to the direction from s to e \" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"s\" , \"e\" , \"g\" , \"t\" ] } ] }, \"graphic-element\" : { \"type\" : \"object\" , \"title\" : \"Graphic Element\" , \"description\" : \"Element used to display vector data in a shape layer\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"hd\" : { \"title\" : \"Hidden\" , \"description\" : \"Whether the shape is hidden\" , \"type\" : \"boolean\" }, \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" } }, \"required\" : [ \"ty\" ] } ] }, \"stroke-dash\" : { \"type\" : \"object\" , \"title\" : \"Stroke Dash\" , \"description\" : \"An item used to described the dash pattern in a stroked path\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"n\" : { \"title\" : \"Dash Type\" , \"$ref\" : \"#/$defs/constants/stroke-dash-type\" , \"default\" : \"d\" }, \"v\" : { \"title\" : \"Length\" , \"description\" : \"Length of the dash\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [] } ] }, \"gradient-fill\" : { \"type\" : \"object\" , \"title\" : \"Gradient\" , \"description\" : \"Gradient fill color\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"$ref\" : \"#/$defs/shapes/base-gradient\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"gf\" }, \"r\" : { \"title\" : \"Fill Rule\" , \"$ref\" : \"#/$defs/constants/fill-rule\" } }, \"required\" : [ \"ty\" ] } ] }, \"base-stroke\" : { \"type\" : \"object\" , \"title\" : \"Base Stroke\" , \"description\" : \"Common properties for stroke styles\" , \"allOf\" : [ { \"type\" : \"object\" , \"properties\" : { \"lc\" : { \"title\" : \"Line Cap\" , \"$ref\" : \"#/$defs/constants/line-cap\" , \"default\" : 2 }, \"lj\" : { \"title\" : \"Line Join\" , \"$ref\" : \"#/$defs/constants/line-join\" , \"default\" : 2 }, \"ml\" : { \"title\" : \"Miter Limit\" , \"type\" : \"number\" , \"default\" : 0 }, \"ml2\" : { \"title\" : \"Miter Limit\" , \"description\" : \"Animatable alternative to ml\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"w\" : { \"title\" : \"Width\" , \"description\" : \"Stroke width\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"d\" : { \"title\" : \"Dashes\" , \"description\" : \"Dashed line definition\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/shapes/stroke-dash\" } } }, \"required\" : [ \"w\" ] } ] }, \"unknown-shape\" : { \"type\" : \"object\" , \"title\" : \"Unknown shape types\" , \"description\" : \"Unknown shape types. Types not defined by the specification are still allowed.\" , \"properties\" : { \"ty\" : { \"not\" : { \"$comment\" : \"enum list is dynamically generated\" , \"enum\" : [ \"el\" , \"fl\" , \"gf\" , \"gs\" , \"gr\" , \"sh\" , \"sr\" , \"rc\" , \"st\" , \"tr\" , \"tm\" ] } } } }, \"ellipse\" : { \"type\" : \"object\" , \"title\" : \"Ellipse\" , \"description\" : \"Ellipse shape\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"el\" }, \"p\" : { \"title\" : \"Position\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"s\" : { \"title\" : \"Size\" , \"$ref\" : \"#/$defs/properties/vector-property\" } }, \"required\" : [ \"ty\" , \"s\" , \"p\" ] } ] }, \"modifier\" : { \"type\" : \"object\" , \"title\" : \"Modifier\" , \"description\" : \"Modifiers change the bezier curves of neighbouring shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" } ] }, \"stroke\" : { \"type\" : \"object\" , \"title\" : \"Stroke\" , \"description\" : \"Solid stroke\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"$ref\" : \"#/$defs/shapes/base-stroke\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"st\" }, \"c\" : { \"title\" : \"Color\" , \"description\" : \"Stroke color\" , \"$ref\" : \"#/$defs/properties/color-property\" } }, \"required\" : [ \"ty\" , \"c\" ] } ] } }, \"values\" : { \"hexcolor\" : { \"type\" : \"string\" , \"title\" : \"Hex Color\" , \"description\" : \"Color value in hexadecimal format, with two digits per component ('#RRGGBB')\" , \"pattern\" : \"^#([a-fA-F0-9]{6})$\" , \"examples\" : [ \"#FF00AA\" ] }, \"bezier\" : { \"type\" : \"object\" , \"title\" : \"Bezier\" , \"description\" : \"Cubic polybezier\" , \"properties\" : { \"c\" : { \"title\" : \"Closed\" , \"type\" : \"boolean\" , \"default\" : false }, \"i\" : { \"title\" : \"In Tangents\" , \"type\" : \"array\" , \"description\" : \"Array of points, each point is an array of coordinates.\\nThese points are along the in tangents relative to the corresponding v .\" , \"items\" : { \"$ref\" : \"#/$defs/values/vector\" , \"default\" : [] } }, \"o\" : { \"title\" : \"Out Tangents\" , \"type\" : \"array\" , \"description\" : \"Array of points, each point is an array of coordinates.\\nThese points are along the out tangents relative to the corresponding v .\" , \"items\" : { \"$ref\" : \"#/$defs/values/vector\" , \"default\" : [] } }, \"v\" : { \"title\" : \"Vertices\" , \"description\" : \"Array of points, each point is an array of coordinates.\\nThese points are along the bezier path\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/values/vector\" , \"default\" : [] } } }, \"required\" : [ \"i\" , \"v\" , \"o\" ] }, \"data-url\" : { \"type\" : \"string\" , \"title\" : \"Data URL\" , \"description\" : \"An embedded data object\" , \"pattern\" : \"^data:([\\w/]+)(;base64)?,(.+)$\" }, \"color\" : { \"type\" : \"array\" , \"title\" : \"Color\" , \"description\" : \"Color as a [r, g, b] array with values in [0, 1]\" , \"items\" : { \"type\" : \"number\" , \"minimum\" : 0 , \"maximum\" : 1 }, \"minItems\" : 3 , \"maxItems\" : 4 }, \"int-boolean\" : { \"type\" : \"integer\" , \"title\" : \"Integer Boolean\" , \"description\" : \"Represents boolean values as an integer. 0 is false, 1 is true.\" , \"default\" : 0 , \"examples\" : [ 0 ], \"enum\" : [ 0 , 1 ], \"oneOf\" : [ { \"title\" : \"True\" , \"const\" : 1 }, { \"title\" : \"False\" , \"const\" : 0 } ] }, \"vector\" : { \"type\" : \"array\" , \"title\" : \"Vector\" , \"description\" : \"An array of numbers\" , \"items\" : { \"type\" : \"number\" } }, \"gradient\" : { \"type\" : \"array\" , \"title\" : \"Gradient\" , \"description\" : \"A flat list of color stops followed by optional transparency stops. A color stop is [offset, red, green, blue]. A transparency stop is [offset, transparency]. All values are between 0 and 1\" , \"items\" : { \"type\" : \"number\" , \"minimum\" : 0 , \"maximum\" : 1 } } } } }","title":"JSON Schema"},{"location":"specs/schema/#json-schema","text":"This page shows a formatted version of the JSON schema, you can click on highlighted objects to get a link to that section of the schema. You can also click on $ref values to jump to the relevant section. If you want you can also view the raw schema file . { \"$schema\" : \"https://json-schema.org/draft/2020-12/schema\" , \"$id\" : \"https://lottie.github.io/lottie-spec/1.0/specs/schema/\" , \"$ref\" : \"#/$defs/composition/animation\" , \"$version\" : 10000 , \"$defs\" : { \"assets\" : { \"precomposition\" : { \"type\" : \"object\" , \"title\" : \"Precomposition\" , \"description\" : \"Asset containing a composition that can be referenced by layers.\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/assets/asset\" }, { \"$ref\" : \"#/$defs/composition/composition\" } ] }, \"asset\" : { \"type\" : \"object\" , \"title\" : \"Asset\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"id\" : { \"title\" : \"ID\" , \"description\" : \"Unique identifier used by layers when referencing this asset\" , \"type\" : \"string\" } }, \"required\" : [ \"id\" ] } ] }, \"image\" : { \"type\" : \"object\" , \"title\" : \"Image\" , \"description\" : \"Asset containing an image that can be referenced by layers.\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/assets/asset\" }, { \"$ref\" : \"#/$defs/helpers/slottable-object\" }, { \"type\" : \"object\" , \"properties\" : { \"w\" : { \"title\" : \"Width\" , \"description\" : \"Width of the image\" , \"type\" : \"number\" }, \"h\" : { \"title\" : \"Height\" , \"description\" : \"Height of the image\" , \"type\" : \"number\" }, \"p\" : { \"title\" : \"File Name\" , \"description\" : \"Name of the image file or a data url\" , \"type\" : \"string\" }, \"u\" : { \"title\" : \"File Path\" , \"description\" : \"Path to the image file\" , \"type\" : \"string\" }, \"e\" : { \"title\" : \"Embedded\" , \"description\" : \"If '1', 'p' is a Data URL\" , \"$ref\" : \"#/$defs/values/int-boolean\" } }, \"allOf\" : [ { \"if\" : { \"properties\" : { \"e\" : { \"const\" : 1 } }, \"required\" : [ \"e\" ] }, \"then\" : { \"properties\" : { \"p\" : { \"$ref\" : \"#/$defs/values/data-url\" } } } } ], \"if\" : { \"required\" : [ \"sid\" ] }, \"else\" : { \"required\" : [ \"w\" , \"h\" , \"p\" ] } } ] }, \"all-assets\" : { \"oneOf\" : [ { \"$ref\" : \"#/$defs/assets/precomposition\" }, { \"$ref\" : \"#/$defs/assets/image\" } ] } }, \"composition\" : { \"animation\" : { \"type\" : \"object\" , \"title\" : \"Animation\" , \"description\" : \"Top level object, describing the animation\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"ver\" : { \"title\" : \"Specification Version\" , \"description\" : \"Specification version this Lottie is targeting. This is a 6 digit number with version components encoded as MMmmpp , with MM being major version, mm being minor and pp being patch.\" , \"type\" : \"integer\" , \"minimum\" : 10000 }, \"fr\" : { \"title\" : \"Framerate\" , \"description\" : \"Framerate in frames per second\" , \"type\" : \"number\" , \"exclusiveMinimum\" : 0 }, \"ip\" : { \"title\" : \"In Point\" , \"description\" : \"Frame the animation starts at (usually 0)\" , \"type\" : \"number\" }, \"op\" : { \"title\" : \"Out Point\" , \"description\" : \"Frame the animation stops/loops at, which makes this the duration in frames when ip is 0\" , \"type\" : \"number\" }, \"w\" : { \"title\" : \"Width\" , \"description\" : \"Width of the animation\" , \"type\" : \"integer\" , \"minimum\" : 0 }, \"h\" : { \"title\" : \"Height\" , \"description\" : \"Height of the animation\" , \"type\" : \"integer\" , \"minimum\" : 0 }, \"assets\" : { \"title\" : \"Assets\" , \"type\" : \"array\" , \"description\" : \"List of assets that can be referenced by layers\" , \"items\" : { \"$ref\" : \"#/$defs/assets/all-assets\" } }, \"markers\" : { \"title\" : \"Markers\" , \"description\" : \"Markers defining named sections of the composition.\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/helpers/marker\" } }, \"slots\" : { \"title\" : \"Slots\" , \"description\" : \"Dictionary of slot ids that will replace matching properties.\" , \"type\" : \"object\" , \"additionalProperties\" : { \"$ref\" : \"#/$defs/helpers/slot\" } } }, \"required\" : [ \"w\" , \"h\" , \"fr\" , \"op\" , \"ip\" ] }, { \"$ref\" : \"#/$defs/composition/composition\" } ] }, \"composition\" : { \"type\" : \"object\" , \"title\" : \"Composition\" , \"description\" : \"An object that contains a list of layers\" , \"properties\" : { \"layers\" : { \"title\" : \"Layers\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/layers/all-layers\" } } }, \"required\" : [ \"layers\" ] } }, \"constants\" : { \"gradient-type\" : { \"type\" : \"integer\" , \"title\" : \"Gradient Type\" , \"description\" : \"Whether a Gradient is a linear or radial.\" , \"oneOf\" : [ { \"title\" : \"Linear\" , \"description\" : \"Colors transition in a single linear direction.\" , \"const\" : 1 }, { \"title\" : \"Radial\" , \"description\" : \"Colors transition outward from a center point.\" , \"const\" : 2 } ] }, \"line-cap\" : { \"type\" : \"integer\" , \"title\" : \"Line Cap\" , \"description\" : \"Style at the end of a stoked line\" , \"oneOf\" : [ { \"title\" : \"Butt\" , \"const\" : 1 }, { \"title\" : \"Round\" , \"const\" : 2 }, { \"title\" : \"Square\" , \"const\" : 3 } ] }, \"fill-rule\" : { \"type\" : \"integer\" , \"title\" : \"Fill Rule\" , \"description\" : \"Rule used to handle multiple shapes rendered with the same fill object\" , \"oneOf\" : [ { \"title\" : \"Non Zero\" , \"description\" : \"Everything is colored (You can think of this as an OR)\" , \"const\" : 1 }, { \"title\" : \"Even Odd\" , \"description\" : \"Colored based on intersections and path direction, can be used to create \\\"holes\\\"\" , \"const\" : 2 } ] }, \"matte-mode\" : { \"type\" : \"integer\" , \"title\" : \"Matte Mode\" , \"description\" : \"How a layer should mask another layer\" , \"oneOf\" : [ { \"title\" : \"Normal\" , \"description\" : \"The layer is not used as a track matte\" , \"const\" : 0 }, { \"title\" : \"Alpha\" , \"description\" : \"The masked layer opacity is modulated by the track matte layer opacity\" , \"const\" : 1 }, { \"title\" : \"Inverted Alpha\" , \"description\" : \"The masked layer opacity is modulated by the inverted track matte layer opacity\" , \"const\" : 2 }, { \"title\" : \"Luma\" , \"description\" : \"The masked layer opacity is modulated by the track matte layer luminance\" , \"const\" : 3 }, { \"title\" : \"Inverted Luma\" , \"description\" : \"The masked layer opacity is modulated by the inverted track matte layer luminance\" , \"const\" : 4 } ] }, \"star-type\" : { \"type\" : \"integer\" , \"title\" : \"Star Type\" , \"description\" : \"Whether a PolyStar is a star or a polygon\" , \"oneOf\" : [ { \"title\" : \"Star\" , \"const\" : 1 }, { \"title\" : \"Polygon\" , \"const\" : 2 } ] }, \"trim-multiple-shapes\" : { \"type\" : \"integer\" , \"title\" : \"Trim Multiple Shapes\" , \"description\" : \"How to handle multiple shapes in trim path\" , \"oneOf\" : [ { \"title\" : \"Parallel\" , \"description\" : \"All shapes apply the trim at the same time\" , \"const\" : 1 }, { \"title\" : \"Sequential\" , \"description\" : \"Shapes are considered as a continuous sequence\" , \"const\" : 2 } ] }, \"mask-mode\" : { \"type\" : \"string\" , \"title\" : \"Mask Mode\" , \"description\" : \"Describes how a mask interacts (blends) with the preceding masks in the stack.\" , \"oneOf\" : [ { \"title\" : \"None\" , \"const\" : \"n\" , \"description\" : \"The mask is ignored.\" }, { \"title\" : \"Add\" , \"const\" : \"a\" , \"description\" : \"Mask coverage is added (Normal blending).\" }, { \"title\" : \"Subtract\" , \"const\" : \"s\" , \"description\" : \"Mask coverage is subtracted (Subtract blending).\" }, { \"title\" : \"Intersect\" , \"const\" : \"i\" , \"description\" : \"Mask coverage is intersected (Source-In blending).\" } ] }, \"line-join\" : { \"type\" : \"integer\" , \"title\" : \"Line Join\" , \"description\" : \"Style at a sharp corner of a stoked line\" , \"oneOf\" : [ { \"title\" : \"Miter\" , \"const\" : 1 }, { \"title\" : \"Round\" , \"const\" : 2 }, { \"title\" : \"Bevel\" , \"const\" : 3 } ] }, \"shape-direction\" : { \"type\" : \"integer\" , \"title\" : \"Shape Direction\" , \"description\" : \"Drawing direction of the shape curve, useful for trim path\" , \"oneOf\" : [ { \"title\" : \"Normal\" , \"description\" : \"Usually clockwise\" , \"const\" : 1 }, { \"title\" : \"Reversed\" , \"description\" : \"Usually counter clockwise\" , \"const\" : 3 } ] }, \"stroke-dash-type\" : { \"type\" : \"string\" , \"title\" : \"Stroke Dash Type\" , \"description\" : \"Type of a dash item in a stroked line\" , \"oneOf\" : [ { \"title\" : \"Dash\" , \"const\" : \"d\" }, { \"title\" : \"Gap\" , \"const\" : \"g\" }, { \"title\" : \"Offset\" , \"const\" : \"o\" } ] } }, \"helpers\" : { \"marker\" : { \"type\" : \"object\" , \"title\" : \"Marker\" , \"description\" : \"Defines named portions of the composition.\" , \"properties\" : { \"cm\" : { \"title\" : \"Comment\" , \"type\" : \"string\" }, \"tm\" : { \"title\" : \"Time\" , \"type\" : \"number\" }, \"dr\" : { \"title\" : \"Duration\" , \"type\" : \"number\" } } }, \"slottable-object\" : { \"type\" : \"object\" , \"title\" : \"Slottable Object\" , \"description\" : \"Object that may have its value replaced with a slot value\" , \"properties\" : { \"sid\" : { \"title\" : \"Slot Id\" , \"description\" : \"Identifier to look up the slot\" , \"type\" : \"string\" } } }, \"transform\" : { \"type\" : \"object\" , \"title\" : \"Transform\" , \"description\" : \"Layer transform\" , \"allOf\" : [ { \"properties\" : { \"a\" : { \"title\" : \"Anchor Point\" , \"description\" : \"Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale)\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"p\" : { \"title\" : \"Position\" , \"description\" : \"Position / Translation\" , \"$ref\" : \"#/$defs/properties/splittable-position-property\" }, \"r\" : { \"title\" : \"Rotation\" , \"description\" : \"Rotation in degrees, clockwise\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"s\" : { \"title\" : \"Scale\" , \"description\" : \"Scale factor, [100, 100] for no scaling\" , \"$ref\" : \"#/$defs/properties/vector-property\" }, \"o\" : { \"title\" : \"Opacity\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"sk\" : { \"title\" : \"Skew\" , \"description\" : \"Skew amount as an angle in degrees\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"sa\" : { \"title\" : \"Skew Axis\" , \"description\" : \"Direction along which skew is applied, in degrees ( 0 skews along the X axis, 90 along the Y axis)\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } } } ] }, \"mask\" : { \"type\" : \"object\" , \"title\" : \"Mask\" , \"description\" : \"Mask for layer content.\" , \"allOf\" : [ { \"properties\" : { \"mode\" : { \"title\" : \"Mode\" , \"$ref\" : \"#/$defs/constants/mask-mode\" , \"default\" : \"i\" }, \"o\" : { \"title\" : \"Opacity\" , \"description\" : \"Mask opacity, as a percentage [0..100].\" , \"$ref\" : \"#/$defs/properties/scalar-property\" , \"default\" : 100 }, \"pt\" : { \"title\" : \"Shape\" , \"description\" : \"Mask shape\" , \"$ref\" : \"#/$defs/properties/bezier-property\" } }, \"required\" : [ \"pt\" ] } ] }, \"slot\" : { \"type\" : \"object\" , \"title\" : \"Slot\" , \"description\" : \"Defines a property value that will be set to all matched properties\" , \"properties\" : { \"p\" : { \"title\" : \"Property Value\" , \"description\" : \"Property Value\" } }, \"required\" : [ \"p\" ] }, \"slottable-property\" : { \"type\" : \"object\" , \"title\" : \"Slottable Property\" , \"description\" : \"Property that may have its value replaced with a slot value\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-object\" } ], \"if\" : { \"required\" : [ \"sid\" ] }, \"else\" : { \"required\" : [ \"a\" , \"k\" ] } }, \"visual-object\" : { \"type\" : \"object\" , \"title\" : \"Visual Object\" , \"description\" : \"\" , \"allOf\" : [ { \"type\" : \"object\" , \"properties\" : { \"nm\" : { \"title\" : \"Name\" , \"description\" : \"Human readable name, as seen from editors and the like\" , \"type\" : \"string\" } }, \"required\" : [] } ] } }, \"layers\" : { \"solid-layer\" : { \"type\" : \"object\" , \"title\" : \"Solid Layer\" , \"description\" : \"Solid color, rectangle-shaped layer\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 1 }, \"sw\" : { \"title\" : \"Width\" , \"description\" : \"Solid rectangle width\" , \"type\" : \"integer\" }, \"sh\" : { \"title\" : \"Height\" , \"description\" : \"Solid rectangle height\" , \"type\" : \"integer\" }, \"sc\" : { \"title\" : \"Color\" , \"description\" : \"Solid fill color\" , \"$ref\" : \"#/$defs/values/hexcolor\" } }, \"required\" : [ \"ty\" , \"sw\" , \"sh\" , \"sc\" ] } ] }, \"image-layer\" : { \"type\" : \"object\" , \"title\" : \"Image Layer\" , \"description\" : \"Layer containing an image\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 2 }, \"refId\" : { \"title\" : \"Reference Id\" , \"description\" : \"ID of the image as specified in the assets\" , \"type\" : \"string\" } }, \"required\" : [ \"ty\" , \"refId\" ] } ] }, \"all-layers\" : { \"oneOf\" : [ { \"$ref\" : \"#/$defs/layers/precomposition-layer\" }, { \"$ref\" : \"#/$defs/layers/image-layer\" }, { \"$ref\" : \"#/$defs/layers/null-layer\" }, { \"$ref\" : \"#/$defs/layers/solid-layer\" }, { \"$ref\" : \"#/$defs/layers/shape-layer\" }, { \"$ref\" : \"#/$defs/layers/unknown-layer\" } ] }, \"precomposition-layer\" : { \"type\" : \"object\" , \"title\" : \"Precomposition Layer\" , \"description\" : \"Layer that renders a Precomposition asset\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 0 }, \"refId\" : { \"title\" : \"Reference Id\" , \"description\" : \"ID of the precomp as specified in the assets\" , \"type\" : \"string\" }, \"w\" : { \"title\" : \"Width\" , \"description\" : \"Width of the clipping rect\" , \"type\" : \"integer\" }, \"h\" : { \"title\" : \"Height\" , \"description\" : \"Height of the clipping rect\" , \"type\" : \"integer\" }, \"sr\" : { \"title\" : \"Time Stretch\" , \"type\" : \"number\" , \"default\" : 1 }, \"st\" : { \"title\" : \"Start Time\" , \"type\" : \"number\" , \"default\" : 0 }, \"tm\" : { \"title\" : \"Time Remap\" , \"description\" : \"Timeline remap function (frame index -> time in seconds)\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"ty\" , \"refId\" ] } ] }, \"null-layer\" : { \"type\" : \"object\" , \"title\" : \"Null Layer\" , \"description\" : \"Layer with no data, useful to group layers together\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 3 } }, \"required\" : [ \"ty\" ] } ] }, \"shape-layer\" : { \"type\" : \"object\" , \"title\" : \"Shape Layer\" , \"description\" : \"Layer containing Shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/visual-layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer type\" , \"type\" : \"integer\" , \"const\" : 4 }, \"shapes\" : { \"title\" : \"Shapes\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/shapes/all-graphic-elements\" } } }, \"required\" : [ \"ty\" , \"shapes\" ] } ] }, \"unknown-layer\" : { \"type\" : \"object\" , \"title\" : \"Unknown layer types\" , \"description\" : \"Unknown layer types. Types not defined by the specification are still allowed.\" , \"properties\" : { \"ty\" : { \"not\" : { \"$comment\" : \"enum list is dynamically generated\" , \"enum\" : [ 0 , 2 , 3 , 1 , 4 ] } } } }, \"visual-layer\" : { \"type\" : \"object\" , \"title\" : \"Visual Layer\" , \"description\" : \"Layer used to affect visual elements\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/layers/layer\" }, { \"type\" : \"object\" , \"properties\" : { \"ks\" : { \"title\" : \"Transform\" , \"description\" : \"Layer transform\" , \"$ref\" : \"#/$defs/helpers/transform\" }, \"ao\" : { \"title\" : \"Auto Orient\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"default\" : 0 , \"description\" : \"If 1, the layer will rotate itself to match its animated position path\" }, \"tt\" : { \"title\" : \"Matte Mode\" , \"$ref\" : \"#/$defs/constants/matte-mode\" , \"description\" : \"Defines the track matte mode for the layer\" }, \"tp\" : { \"title\" : \"Matte Parent\" , \"type\" : \"integer\" , \"description\" : \"Index of the layer used as matte, if omitted assume the layer above the current one\" }, \"masksProperties\" : { \"title\" : \"Masks\" , \"description\" : \"Optional array of masks for the layer.\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/helpers/mask\" } } }, \"required\" : [ \"ks\" ] } ] }, \"layer\" : { \"type\" : \"object\" , \"title\" : \"Layer\" , \"description\" : \"Common properties for all layers\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"hd\" : { \"title\" : \"Hidden\" , \"description\" : \"Whether the layer is hidden\" , \"type\" : \"boolean\" }, \"ty\" : { \"title\" : \"Type\" , \"description\" : \"Layer Type\" , \"type\" : \"integer\" }, \"ind\" : { \"title\" : \"Index\" , \"type\" : \"integer\" , \"description\" : \"Index that can be used for parenting and referenced in expressions\" }, \"parent\" : { \"title\" : \"Parent Index\" , \"description\" : \"Must be the ind property of another layer\" , \"type\" : \"integer\" }, \"ip\" : { \"title\" : \"In Point\" , \"description\" : \"Frame when the layer becomes visible\" , \"type\" : \"number\" }, \"op\" : { \"title\" : \"Out Point\" , \"description\" : \"Frame when the layer becomes invisible\" , \"type\" : \"number\" } }, \"required\" : [ \"ty\" , \"ip\" , \"op\" ] } ] } }, \"properties\" : { \"vector-property\" : { \"type\" : \"object\" , \"title\" : \"Vector Property\" , \"description\" : \"An animatable property that holds an array of numbers\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/vector\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/vector-keyframe\" } } } } ] }, \"vector-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Vector Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"$ref\" : \"#/$defs/values/vector\" } } } ], \"required\" : [ \"s\" ] }, \"gradient-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Gradient Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"$ref\" : \"#/$defs/values/gradient\" } } } ], \"required\" : [ \"s\" ] }, \"bezier-property\" : { \"type\" : \"object\" , \"title\" : \"Bezier Property\" , \"description\" : \"An animatable property that holds a Bezier shape\" , \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/bezier\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/bezier-keyframe\" } } } } ], \"required\" : [ \"a\" , \"k\" ] }, \"position-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Position Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/vector-keyframe\" }, { \"properties\" : { \"ti\" : { \"title\" : \"Value In Tangent\" , \"description\" : \"Tangent for values (eg: moving position around a curved path)\" , \"$ref\" : \"#/$defs/values/vector\" }, \"to\" : { \"title\" : \"Value Out Tangent\" , \"description\" : \"Tangent for values (eg: moving position around a curved path)\" , \"$ref\" : \"#/$defs/values/vector\" } } } ] }, \"color-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Color Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"$ref\" : \"#/$defs/values/color\" } } } ], \"required\" : [ \"s\" ] }, \"scalar-property\" : { \"type\" : \"object\" , \"title\" : \"Scalar Property\" , \"description\" : \"An animatable property that holds a float\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"type\" : \"number\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/vector-keyframe\" } } } } ] }, \"gradient-property\" : { \"type\" : \"object\" , \"title\" : \"Gradient Property\" , \"description\" : \"An animatable property that holds a Gradient\" , \"properties\" : { \"p\" : { \"title\" : \"Color stop count\" , \"type\" : \"number\" }, \"k\" : { \"type\" : \"object\" , \"title\" : \"Gradient stops\" , \"description\" : \"Animatable vector representing the gradient stops\" , \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/gradient\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/gradient-keyframe\" } } } } ], \"required\" : [ \"a\" , \"k\" ] } } }, \"easing-handle\" : { \"type\" : \"object\" , \"title\" : \"Keyframe Easing\" , \"description\" : \"Bezier handle for keyframe interpolation\" , \"properties\" : { \"x\" : { \"title\" : \"X\" , \"description\" : \"Time component:\\n0 means start time of the keyframe,\\n1 means time of the next keyframe.\" , \"oneOf\" : [ { \"type\" : \"array\" , \"$ref\" : \"#/$defs/values/vector\" , \"items\" : { \"type\" : \"number\" , \"default\" : 0 , \"minimum\" : 0 , \"maximum\" : 1 }, \"minItems\" : 1 }, { \"type\" : \"number\" , \"default\" : 0 , \"minimum\" : 0 , \"maximum\" : 1 } ] }, \"y\" : { \"title\" : \"Y\" , \"description\" : \"Value interpolation component:\\n0 means start value of the keyframe,\\n1 means value at the next keyframe.\" , \"oneOf\" : [ { \"type\" : \"array\" , \"$ref\" : \"#/$defs/values/vector\" , \"items\" : { \"type\" : \"number\" , \"default\" : 0 }, \"minItems\" : 1 }, { \"type\" : \"number\" , \"default\" : 0 } ] } }, \"required\" : [ \"x\" , \"y\" ] }, \"base-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Base Keyframe\" , \"description\" : \"A Keyframes specifies the value at a specific time and the interpolation function to reach the next keyframe.\" , \"allOf\" : [ { \"properties\" : { \"t\" : { \"title\" : \"Time\" , \"description\" : \"Frame number\" , \"type\" : \"number\" , \"default\" : 0 }, \"h\" : { \"title\" : \"Hold\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"default\" : 0 }, \"i\" : { \"title\" : \"In Tangent\" , \"description\" : \"Easing tangent going into the next keyframe\" , \"$ref\" : \"#/$defs/properties/easing-handle\" }, \"o\" : { \"title\" : \"Out Tangent\" , \"description\" : \"Easing tangent leaving the current keyframe\" , \"$ref\" : \"#/$defs/properties/easing-handle\" } } } ], \"required\" : [ \"t\" ] }, \"split-position\" : { \"type\" : \"object\" , \"title\" : \"Split Position\" , \"description\" : \"An animatable position where x and y are definied and animated separately.\" , \"properties\" : { \"s\" : { \"title\" : \"Split\" , \"description\" : \"Whether the position has split values\" , \"type\" : \"boolean\" , \"const\" : true }, \"x\" : { \"title\" : \"X Position\" , \"description\" : \"X Position\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"y\" : { \"title\" : \"Y Position\" , \"description\" : \"Y Position\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"s\" , \"x\" , \"y\" ] }, \"bezier-keyframe\" : { \"type\" : \"object\" , \"title\" : \"Shape Keyframe\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/properties/base-keyframe\" }, { \"properties\" : { \"s\" : { \"title\" : \"Value\" , \"description\" : \"Value at this keyframe.\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/values/bezier\" }, \"minItems\" : 1 , \"maxItems\" : 1 } } } ], \"required\" : [ \"s\" ] }, \"position-property\" : { \"type\" : \"object\" , \"title\" : \"Position Property\" , \"description\" : \"An animatable property to represent a position in space\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/vector\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/position-keyframe\" } } } } ], \"required\" : [ \"a\" , \"k\" ] }, \"color-property\" : { \"type\" : \"object\" , \"title\" : \"Color Property\" , \"description\" : \"An animatable property that holds a Color\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/slottable-property\" } ], \"oneOf\" : [ { \"$comment\" : \"Not animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 0 }, \"k\" : { \"title\" : \"Value\" , \"description\" : \"Static Value\" , \"$ref\" : \"#/$defs/values/color\" } } }, { \"$comment\" : \"Animated\" , \"properties\" : { \"a\" : { \"title\" : \"Animated\" , \"description\" : \"Whether the property is animated\" , \"$ref\" : \"#/$defs/values/int-boolean\" , \"const\" : 1 }, \"k\" : { \"type\" : \"array\" , \"title\" : \"Keyframes\" , \"description\" : \"Array of keyframes\" , \"items\" : { \"$ref\" : \"#/$defs/properties/color-keyframe\" } } } } ] }, \"splittable-position-property\" : { \"type\" : \"object\" , \"title\" : \"Splittable Position Property\" , \"description\" : \"An animatable position where position values may be defined and animated separately.\" , \"oneOf\" : [ { \"$comment\" : \"Grouped XY position coordinates\" , \"$ref\" : \"#/$defs/properties/position-property\" , \"properties\" : { \"s\" : { \"title\" : \"Split\" , \"description\" : \"Whether the position has split values\" , \"type\" : \"boolean\" , \"const\" : false } } }, { \"$comment\" : \"Split XY position coordinates\" , \"$ref\" : \"#/$defs/properties/split-position\" } ] } }, \"shapes\" : { \"all-graphic-elements\" : { \"$comment\" : \"List of valid shapes\" , \"oneOf\" : [ { \"$ref\" : \"#/$defs/shapes/ellipse\" }, { \"$ref\" : \"#/$defs/shapes/fill\" }, { \"$ref\" : \"#/$defs/shapes/gradient-fill\" }, { \"$ref\" : \"#/$defs/shapes/gradient-stroke\" }, { \"$ref\" : \"#/$defs/shapes/group\" }, { \"$ref\" : \"#/$defs/shapes/path\" }, { \"$ref\" : \"#/$defs/shapes/polystar\" }, { \"$ref\" : \"#/$defs/shapes/rectangle\" }, { \"$ref\" : \"#/$defs/shapes/stroke\" }, { \"$ref\" : \"#/$defs/shapes/transform\" }, { \"$ref\" : \"#/$defs/shapes/trim-path\" }, { \"$ref\" : \"#/$defs/shapes/unknown-shape\" } ] }, \"polystar\" : { \"type\" : \"object\" , \"title\" : \"PolyStar\" , \"description\" : \"Star or regular polygon\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"sr\" }, \"p\" : { \"title\" : \"Position\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"or\" : { \"title\" : \"Outer Radius\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"os\" : { \"title\" : \"Outer Roundness\" , \"description\" : \"Outer Roundness as a percentage\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"r\" : { \"title\" : \"Rotation\" , \"description\" : \"Rotation, clockwise in degrees\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"pt\" : { \"title\" : \"Points\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"sy\" : { \"title\" : \"Star Type\" , \"$ref\" : \"#/$defs/constants/star-type\" , \"default\" : 1 }, \"ir\" : { \"title\" : \"Inner Radius\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"is\" : { \"title\" : \"Inner Roundness\" , \"description\" : \"Inner Roundness as a percentage\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"ty\" , \"or\" , \"os\" , \"pt\" , \"p\" , \"r\" ] }, { \"if\" : { \"properties\" : { \"sy\" : { \"const\" : 1 } } }, \"then\" : { \"required\" : [ \"ir\" , \"is\" ] } } ] }, \"group\" : { \"type\" : \"object\" , \"title\" : \"Group\" , \"description\" : \"Shape Element that can contain other shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"gr\" }, \"np\" : { \"title\" : \"Number Of Properties\" , \"type\" : \"number\" }, \"it\" : { \"title\" : \"Shapes\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/shapes/all-graphic-elements\" } } }, \"required\" : [ \"ty\" ] } ] }, \"path\" : { \"type\" : \"object\" , \"title\" : \"Path\" , \"description\" : \"Custom Bezier shape\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"sh\" }, \"ks\" : { \"title\" : \"Shape\" , \"description\" : \"Bezier path\" , \"$ref\" : \"#/$defs/properties/bezier-property\" } }, \"required\" : [ \"ty\" , \"ks\" ] } ] }, \"shape-style\" : { \"type\" : \"object\" , \"title\" : \"Shape Style\" , \"description\" : \"Describes the visual appearance (like fill and stroke) of neighbouring shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"type\" : \"object\" , \"properties\" : { \"o\" : { \"title\" : \"Opacity\" , \"description\" : \"Opacity, 100 means fully opaque\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"o\" ] } ] }, \"shape\" : { \"type\" : \"object\" , \"title\" : \"Shape\" , \"description\" : \"Drawable shape, defines the actual shape but not the style\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"type\" : \"object\" , \"properties\" : { \"d\" : { \"title\" : \"Direction\" , \"description\" : \"Direction the shape is drawn as, mostly relevant when using trim path\" , \"$ref\" : \"#/$defs/constants/shape-direction\" } } } ] }, \"fill\" : { \"type\" : \"object\" , \"title\" : \"Fill\" , \"description\" : \"Solid fill color\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"fl\" }, \"c\" : { \"title\" : \"Color\" , \"$ref\" : \"#/$defs/properties/color-property\" }, \"r\" : { \"title\" : \"Fill Rule\" , \"$ref\" : \"#/$defs/constants/fill-rule\" } }, \"required\" : [ \"ty\" , \"c\" ] } ] }, \"gradient-stroke\" : { \"type\" : \"object\" , \"title\" : \"Gradient Stroke\" , \"description\" : \"Gradient stroke\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"$ref\" : \"#/$defs/shapes/base-stroke\" }, { \"$ref\" : \"#/$defs/shapes/base-gradient\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"gs\" } }, \"required\" : [ \"ty\" ] } ] }, \"trim-path\" : { \"type\" : \"object\" , \"title\" : \"Trim Path\" , \"description\" : \"Trims shapes into a segment\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/modifier\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"tm\" }, \"s\" : { \"title\" : \"Start\" , \"description\" : \"Segment start\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"e\" : { \"title\" : \"End\" , \"description\" : \"Segment end\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"o\" : { \"title\" : \"Offset\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"m\" : { \"title\" : \"Multiple\" , \"description\" : \"How to treat multiple copies\" , \"$ref\" : \"#/$defs/constants/trim-multiple-shapes\" } }, \"required\" : [ \"ty\" , \"o\" , \"s\" , \"e\" ] } ] }, \"transform\" : { \"type\" : \"object\" , \"title\" : \"Transform Shape\" , \"description\" : \"Group transform\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" }, { \"$ref\" : \"#/$defs/helpers/transform\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"tr\" } }, \"required\" : [ \"ty\" ] } ] }, \"rectangle\" : { \"type\" : \"object\" , \"title\" : \"Rectangle\" , \"description\" : \"A simple rectangle shape\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"rc\" }, \"p\" : { \"title\" : \"Position\" , \"description\" : \"Center of the rectangle\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"s\" : { \"title\" : \"Size\" , \"$ref\" : \"#/$defs/properties/vector-property\" }, \"r\" : { \"title\" : \"Rounded\" , \"description\" : \"Rounded corners radius\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"ty\" , \"s\" , \"p\" ] } ] }, \"base-gradient\" : { \"type\" : \"object\" , \"title\" : \"Base Gradient\" , \"description\" : \"Common properties for gradients\" , \"allOf\" : [ { \"type\" : \"object\" , \"properties\" : { \"g\" : { \"title\" : \"Colors\" , \"description\" : \"Gradient colors\" , \"$ref\" : \"#/$defs/properties/gradient-property\" }, \"s\" : { \"title\" : \"Start Point\" , \"description\" : \"Starting point for the gradient\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"e\" : { \"title\" : \"End Point\" , \"description\" : \"End point for the gradient\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"t\" : { \"title\" : \"Gradient Type\" , \"description\" : \"Type of the gradient\" , \"$ref\" : \"#/$defs/constants/gradient-type\" }, \"h\" : { \"title\" : \"Highlight Length\" , \"description\" : \"Highlight Length, as a percentage between s and e \" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"a\" : { \"title\" : \"Highlight Angle\" , \"description\" : \"Highlight Angle in clockwise degrees, relative to the direction from s to e \" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [ \"s\" , \"e\" , \"g\" , \"t\" ] } ] }, \"graphic-element\" : { \"type\" : \"object\" , \"title\" : \"Graphic Element\" , \"description\" : \"Element used to display vector data in a shape layer\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"hd\" : { \"title\" : \"Hidden\" , \"description\" : \"Whether the shape is hidden\" , \"type\" : \"boolean\" }, \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" } }, \"required\" : [ \"ty\" ] } ] }, \"stroke-dash\" : { \"type\" : \"object\" , \"title\" : \"Stroke Dash\" , \"description\" : \"An item used to described the dash pattern in a stroked path\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/helpers/visual-object\" }, { \"type\" : \"object\" , \"properties\" : { \"n\" : { \"title\" : \"Dash Type\" , \"$ref\" : \"#/$defs/constants/stroke-dash-type\" , \"default\" : \"d\" }, \"v\" : { \"title\" : \"Length\" , \"description\" : \"Length of the dash\" , \"$ref\" : \"#/$defs/properties/scalar-property\" } }, \"required\" : [] } ] }, \"gradient-fill\" : { \"type\" : \"object\" , \"title\" : \"Gradient\" , \"description\" : \"Gradient fill color\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"$ref\" : \"#/$defs/shapes/base-gradient\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"gf\" }, \"r\" : { \"title\" : \"Fill Rule\" , \"$ref\" : \"#/$defs/constants/fill-rule\" } }, \"required\" : [ \"ty\" ] } ] }, \"base-stroke\" : { \"type\" : \"object\" , \"title\" : \"Base Stroke\" , \"description\" : \"Common properties for stroke styles\" , \"allOf\" : [ { \"type\" : \"object\" , \"properties\" : { \"lc\" : { \"title\" : \"Line Cap\" , \"$ref\" : \"#/$defs/constants/line-cap\" , \"default\" : 2 }, \"lj\" : { \"title\" : \"Line Join\" , \"$ref\" : \"#/$defs/constants/line-join\" , \"default\" : 2 }, \"ml\" : { \"title\" : \"Miter Limit\" , \"type\" : \"number\" , \"default\" : 0 }, \"ml2\" : { \"title\" : \"Miter Limit\" , \"description\" : \"Animatable alternative to ml\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"w\" : { \"title\" : \"Width\" , \"description\" : \"Stroke width\" , \"$ref\" : \"#/$defs/properties/scalar-property\" }, \"d\" : { \"title\" : \"Dashes\" , \"description\" : \"Dashed line definition\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/shapes/stroke-dash\" } } }, \"required\" : [ \"w\" ] } ] }, \"unknown-shape\" : { \"type\" : \"object\" , \"title\" : \"Unknown shape types\" , \"description\" : \"Unknown shape types. Types not defined by the specification are still allowed.\" , \"properties\" : { \"ty\" : { \"not\" : { \"$comment\" : \"enum list is dynamically generated\" , \"enum\" : [ \"el\" , \"fl\" , \"gf\" , \"gs\" , \"gr\" , \"sh\" , \"sr\" , \"rc\" , \"st\" , \"tr\" , \"tm\" ] } } } }, \"ellipse\" : { \"type\" : \"object\" , \"title\" : \"Ellipse\" , \"description\" : \"Ellipse shape\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"el\" }, \"p\" : { \"title\" : \"Position\" , \"$ref\" : \"#/$defs/properties/position-property\" }, \"s\" : { \"title\" : \"Size\" , \"$ref\" : \"#/$defs/properties/vector-property\" } }, \"required\" : [ \"ty\" , \"s\" , \"p\" ] } ] }, \"modifier\" : { \"type\" : \"object\" , \"title\" : \"Modifier\" , \"description\" : \"Modifiers change the bezier curves of neighbouring shapes\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/graphic-element\" } ] }, \"stroke\" : { \"type\" : \"object\" , \"title\" : \"Stroke\" , \"description\" : \"Solid stroke\" , \"allOf\" : [ { \"$ref\" : \"#/$defs/shapes/shape-style\" }, { \"$ref\" : \"#/$defs/shapes/base-stroke\" }, { \"type\" : \"object\" , \"properties\" : { \"ty\" : { \"title\" : \"Shape Type\" , \"type\" : \"string\" , \"const\" : \"st\" }, \"c\" : { \"title\" : \"Color\" , \"description\" : \"Stroke color\" , \"$ref\" : \"#/$defs/properties/color-property\" } }, \"required\" : [ \"ty\" , \"c\" ] } ] } }, \"values\" : { \"hexcolor\" : { \"type\" : \"string\" , \"title\" : \"Hex Color\" , \"description\" : \"Color value in hexadecimal format, with two digits per component ('#RRGGBB')\" , \"pattern\" : \"^#([a-fA-F0-9]{6})$\" , \"examples\" : [ \"#FF00AA\" ] }, \"bezier\" : { \"type\" : \"object\" , \"title\" : \"Bezier\" , \"description\" : \"Cubic polybezier\" , \"properties\" : { \"c\" : { \"title\" : \"Closed\" , \"type\" : \"boolean\" , \"default\" : false }, \"i\" : { \"title\" : \"In Tangents\" , \"type\" : \"array\" , \"description\" : \"Array of points, each point is an array of coordinates.\\nThese points are along the in tangents relative to the corresponding v .\" , \"items\" : { \"$ref\" : \"#/$defs/values/vector\" , \"default\" : [] } }, \"o\" : { \"title\" : \"Out Tangents\" , \"type\" : \"array\" , \"description\" : \"Array of points, each point is an array of coordinates.\\nThese points are along the out tangents relative to the corresponding v .\" , \"items\" : { \"$ref\" : \"#/$defs/values/vector\" , \"default\" : [] } }, \"v\" : { \"title\" : \"Vertices\" , \"description\" : \"Array of points, each point is an array of coordinates.\\nThese points are along the bezier path\" , \"type\" : \"array\" , \"items\" : { \"$ref\" : \"#/$defs/values/vector\" , \"default\" : [] } } }, \"required\" : [ \"i\" , \"v\" , \"o\" ] }, \"data-url\" : { \"type\" : \"string\" , \"title\" : \"Data URL\" , \"description\" : \"An embedded data object\" , \"pattern\" : \"^data:([\\w/]+)(;base64)?,(.+)$\" }, \"color\" : { \"type\" : \"array\" , \"title\" : \"Color\" , \"description\" : \"Color as a [r, g, b] array with values in [0, 1]\" , \"items\" : { \"type\" : \"number\" , \"minimum\" : 0 , \"maximum\" : 1 }, \"minItems\" : 3 , \"maxItems\" : 4 }, \"int-boolean\" : { \"type\" : \"integer\" , \"title\" : \"Integer Boolean\" , \"description\" : \"Represents boolean values as an integer. 0 is false, 1 is true.\" , \"default\" : 0 , \"examples\" : [ 0 ], \"enum\" : [ 0 , 1 ], \"oneOf\" : [ { \"title\" : \"True\" , \"const\" : 1 }, { \"title\" : \"False\" , \"const\" : 0 } ] }, \"vector\" : { \"type\" : \"array\" , \"title\" : \"Vector\" , \"description\" : \"An array of numbers\" , \"items\" : { \"type\" : \"number\" } }, \"gradient\" : { \"type\" : \"array\" , \"title\" : \"Gradient\" , \"description\" : \"A flat list of color stops followed by optional transparency stops. A color stop is [offset, red, green, blue]. A transparency stop is [offset, transparency]. All values are between 0 and 1\" , \"items\" : { \"type\" : \"number\" , \"minimum\" : 0 , \"maximum\" : 1 } } } } }","title":"JSON Schema"},{"location":"specs/shapes/","text":"Shapes The graphical elements are divided in 4 categories: Shapes that define the actual curves but have no styling information Grouping , used to organize collections of graphic elements Styles , that define the visual appearance of shapes Modifiers alter the curves of the shapes Shape Rendering Model Grouping and Ordering Rules Shapes are rendered in reverse order, bottom->top. Shapes at the beginning of the array are rendered on top of shapes with larger indices. Groups offer a scoping mechanism for transforms, styles, modifiers, and shapes. All group children, including sub-groups and their children, are considered part of the group's scope. Transforms adjust the coordinate system for all elements within their group, and transitively for all other group-nested elements. Styles and modifiers apply to all preceding shapes within the current scope, including subgroup-nested shapes. When multiple styles apply to the same shape, the shape is rendered repeatedly for each style, in reverse order. When multiple modifiers apply to the same shape, they are composed in reverse order (e.g. T r i m ( T r i m ( s h a p e ) ) ). When multiple transforms apply to the same shape due to scope nesting, they compose in group nesting order (transforms are additive). Group opacity (property of the group transform) applies atomically to all elements in scope - i.e. opacity applies to the result of compositing all group content, and not to individual elements. More formally: for each ( s h a p e , s t y l e ) tuple, where I n d e x ( s h a p e ) < I n d e x ( s t y l e ) and s h a p e \u2208 S c o p e ( s t y l e ) : for each m o d i f i e r , in increasing index order, where I n d e x ( s h a p e ) < I n d e x ( m o d i f i e r ) and s h a p e \u2208 S c o p e ( m o d i f i e r ) : s h a p e = m o d i f i e r ( s h a p e ) compute the total shape transformation by composing all transforms within the shape scope chain: \u0002 k l z z w x h : 0433 \u0003 compute the total style transformation by composing all transforms within the style scope chain: \u0002 k l z z w x h : 0441 \u0003 R e n d e r ( s h a p e \u00d7 T s h a p e , s t y l e \u00d7 T s t y l e ) Notes Certain modifier operations (e.g. sequential T r i m ) may require information about shapes from different groups, thus R e n d e r ( ) calls cannot always be issued based on single-pass local knowledge. Transforms can affect both shapes and styles (e.g. stroke width). For a given ( s h a p e , s t y l e ) , the shape and style transforms are not necessarily equal. Shapes without an applicable style are not rendered. This rendering model is based on AfterEffects' Shape Layer semantics. Rendering Convention Shapes defined in this section contain rendering instructions. These instructions are used to generate the path as a bezier curve. Implementations MAY use different algorithms or primitives to render the shapes but the result MUST be equivalent to the paths defined here. Some instructions define named values for clarity and illustrative purposes, implementations are not required to have them explicitly defined in their rendering process. When referencing animated properties, the rendering instruction will use the same name as in the JSON but it's assumed they refer to their value at a given point in time rather than the property itself. For Vector values, v a l u e . x and v a l u e . y in the instructions are equivalent to value[0] and value[1] respectively. All paths MUST be closed unless specified otherwise in the rendering instructions. When instructions call for an equality comparison between two values, implementations MAY consider similar values to be equal to overcome numerical instability. Drawing Commands Drawing instructions will contain the following commands: add vertex : Adds a vertex to the bezier shape in global coordinates set in tangent : Sets the cubic tangent to the last added vertex, with coordinates relative to it. If omitted, tangents MUST be ( 0 , 0 ) . set out tangent : Sets the cubic tangent from the last added vertex, with coordinates relative to it. If omitted, tangents MUST be ( 0 , 0 ) . lerp : Linearly interpolates two points or scalars by a given amount. Approximating Ellipses with Cubic Bezier An elliptical quadrant can be approximated by a cubic bezier segment with tangents of length $radius \\cdot E_t. Where E t \u2248 0.5519150244935105707435627 See this article for the math behind it. When implementations render elliptical arcs using bezier curves, they SHOULD use this constant, a similar approximation, or elliptical arc drawing primitives. Graphic Element Element used to display vector data in a shape layer Composition Diagram for Graphic Element Graphic Element Visual Object Group Shape Style Fill Gradient Stroke Gradient Stroke Shape PolyStar Path Rectangle Ellipse Transform Shape Modifier Trim Path Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string Shape Type Shape Type The ty property defines the specific element type based on the following values: ty Type 'el' Ellipse 'fl' Fill 'gf' Gradient 'gs' Gradient Stroke 'gr' Group 'sh' Path 'sr' PolyStar 'rc' Rectangle 'st' Stroke 'tr' Transform Shape 'tm' Trim Path None Unknown shape types Hidden shapes ( hd: True ) are ignored, and do not contribute to rendering nor modifier operations. Shapes Drawable shape, defines the actual shape but not the style Composition Diagram for Shape Shape Graphic Element Visual Object PolyStar Path Rectangle Ellipse Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path Ellipse Ellipse shape Composition Diagram for Ellipse Ellipse Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'el' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Position s Vector Size Size Example Position x 256 Position y 256 Width 256 Height 256 var lottie_player_19 = new PlaygroundPlayer( 19, 'playground_19_5', 'lottie_target_19', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Group\", \"it\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [256, 256]}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[0].shapes[0].it[0].p.k = [ data[\"Position x\"], data[\"Position y\"] ]; lottie.layers[0].shapes[0].it[0].s.k = [ data[\"Width\"], data[\"Height\"] ]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); An ellipse is drawn from the top quandrant point going clockwise: r a d i u s = s 2 t a n g e n t = r a d i u s \u00b7 E t x = p . x y = p . y Add vertex ( x , y \u2212 r a d i u s . y ) Set in tangent ( \u2212 t a n g e n t . x , 0 ) Set out tangent ( t a n g e n t . x , 0 ) Add vertex ( x + r a d i u s . x , y ) Set in tangent ( 0 , \u2212 t a n g e n t . y ) Set out tangent ( 0 , t a n g e n t . y ) Add vertex ( x , y + r a d i u s . y ) Set in tangent ( t a n g e n t . x , 0 ) Set out tangent ( \u2212 t a n g e n t . x , 0 ) Add vertex ( x \u2212 r a d i u s . x , y ) Set in tangent ( 0 , t a n g e n t . y ) Set out tangent ( 0 , \u2212 t a n g e n t . y ) Implementations MAY use elliptical arcs to render an ellipse. Rectangle A simple rectangle shape Composition Diagram for Rectangle Rectangle Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'rc' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Center of the rectangle s Vector Size Size r Scalar Rounded Rounded corners radius Example Position x 256 Position y 256 Width 256 Height 256 Roundness 0 var lottie_player_20 = new PlaygroundPlayer( 20, 'playground_20_6', 'lottie_target_20', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Group\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [256, 256]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[0].shapes[0].it[0].p.k = [ data[\"Position x\"], data[\"Position y\"] ]; lottie.layers[0].shapes[0].it[0].s.k = [ data[\"Width\"], data[\"Height\"] ]; lottie.layers[0].shapes[0].it[0].r.k = data[\"Roundness\"]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); Definitions: l e f t = p . x \u2212 s . x 2 r i g h t = p . x + s . x 2 t o p = p . y \u2212 s . y 2 b o t t o m = p . y + s . y 2 If r = 0 , then the rectangle is rendered from the top-right going clockwise: Add vertex ( r i g h t , t o p ) Add vertex ( r i g h t , b o t t o m ) Add vertex ( l e f t , b o t t o m ) Add vertex ( l e f t , t o p ) If r > 0 , the rounded corners must be taken into account. r o u n d e d = min ( s . x 2 , s . y 2 , r ) t a n g e n t = r o u n d e d \u00b7 E t Add vertex ( r i g h t , t o p + r o u n d e d ) Set in tangent ( 0 , \u2212 t a n g e n t ) Add vertex ( r i g h t , b o t t o m \u2212 r o u n d e d ) Set out tangent ( 0 , t a n g e n t ) Add vertex ( r i g h t \u2212 r o u n d e d , b o t t o m ) Set in tangent ( t a n g e n t , 0 ) Add vertex ( l e f t + r o u n d e d , b o t t o m ) Set out tangent ( \u2212 t a n g e n t , 0 ) Add vertex ( l e f t , b o t t o m \u2212 r o u n d e d ) Set in tangent ( 0 , t a n g e n t ) Add vertex ( l e f t , t o p + r o u n d e d ) Set out tangent ( 0 , \u2212 t a n g e n t ) Add vertex ( l e f t + r o u n d e d , t o p ) Set in tangent ( \u2212 t a n g e n t , 0 ) Add vertex ( r i g h t \u2212 r o u n d e d , t o p ) Set out tangent ( t a n g e n t , 0 ) Path Custom Bezier shape Composition Diagram for Path Path Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'sh' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path ks Bezier Shape Bezier path Example Shape var lottie_player_21 = new PlaygroundPlayer( 21, 'playground_21_2', 'lottie_target_21', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"ao\": 0, \"ks\": {\"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ty\": \"sh\", \"d\": 1, \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[253, 147], [56, 153], [253, 409], [450, 153]], \"i\": [[12, -57], [42, -112], [-16, -18], [46, 123]], \"o\": [[-17, -61], [-46, 125], [16, -14], [-43, -115]]}}}, {\"ty\": \"st\", \"o\": {\"a\": 0, \"k\": 100}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}]}, function (lottie, data) { var shape = lottie.layers[0].shapes[0].it[0]; if ( data[\"Shape\"] ) shape.ks.k = data[\"Shape\"]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); var playground_21_1_playground = document.getElementById(\"playground_21_1_playground\"); playground_21_1_playground.name = playground_21_1_playground.getAttribute(\"name\"); var playground_21_1_playground_editor = BezierPreviewEditor.stand_alone( playground_21_1_playground, (lottie) => { playground_21_1_playground.value = lottie; lottie_player_21.reload(); }, null, 512, 512 ); PolyStar Star or regular polygon Composition Diagram for PolyStar PolyStar Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'sr' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Position or Scalar Outer Radius Outer Radius os Scalar Outer Roundness Outer Roundness as a percentage r Scalar Rotation Rotation, clockwise in degrees pt Scalar Points Points sy Star Type Star Type Star Type ir Scalar Inner Radius Inner Radius is Scalar Inner Roundness Inner Roundness as a percentage Example Position x 256 Position y 256 Points 5 Rotation 0 Outer Radius 200 Inner Radius 100 Outer Roundness 0 Inner Roundness 0 Star Type Star Polygon var lottie_player_22 = new PlaygroundPlayer( 22, 'playground_22_10', 'lottie_target_22', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"layers\": [{\"ty\": 4, \"ddd\": 0, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ip\": 0, \"op\": 180, \"ind\": 0, \"st\": 0, \"sr\": 1, \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{9199543e-3552-4e51-a802-623f2a4a2ca1}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.979995422293431, 0.28000305180437934]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var star = { \"ty\": \"sr\", \"nm\": \"PolyStar\", \"sy\": Number(data[\"Star Type\"]), \"p\": { \"a\": 0, \"k\": [data[\"Position x\"], data[\"Position y\"]] }, \"r\": { \"a\": 0, \"k\": data[\"Rotation\"] }, \"pt\": { \"a\": 0, \"k\": data[\"Points\"] }, \"or\": { \"a\": 0, \"k\": data[\"Outer Radius\"] }, \"os\": { \"a\": 0, \"k\": data[\"Outer Roundness\"] }, }; if ( data[\"Star Type\"] == \"1\" ) { star = { ...star, \"ir\": { \"a\": 0, \"k\": data[\"Inner Radius\"] }, \"is\": { \"a\": 0, \"k\": data[\"Inner Roundness\"] }, }; } lottie.layers[0].shapes[0].it[0] = star; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); Definitions: p o i n t s = \u230a p t \u2309 \u03b8 = \u03c0 p o i n t s \u03b1 = \u03c0 180 \u00b7 r t a n o u t = o s 100 \u00b7 o r \u00b7 2 \u03c0 p o i n t s \u00b7 4 t a n i n = i s 100 \u00b7 i r \u00b7 2 \u03c0 p o i n t s \u00b7 4 For i in [ 0 , p o i n t s ) Let \u03b2 = \u2212 \u03c0 2 + \u03b1 + i \u00b7 2 \u03b8 \u02d9 Let V o u t = ( o r \u00b7 cos ( \u03b2 ) , o r \u00b7 sin ( \u03b2 ) ) Add vertex p + V o u t If o r \u2260 0 , we need to add bezier tangent Let T o u t = ( V o u t \u00b7 t a n o u t o r ) Set in tangent V o u t Set out tangent \u2212 V o u t If s y = 1 , we need to add a vertex towards the inner radius to make a star Let V i n = ( i r \u00b7 cos ( \u03b2 + \u03b8 ) , o r \u00b7 sin ( \u03b2 + \u03b8 ) ) Add vertex p + V i n If i r \u2260 0 , we need to add bezier tangent Let T i n = ( V i n \u00b7 t a n i n o r ) Set in tangent V i n Set out tangent \u2212 V i n Grouping Group Shape Element that can contain other shapes Composition Diagram for Group Group Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'gr' Shape Type Shape Type np number Number Of Properties Number Of Properties it array of Graphic Element Shapes Shapes A group defines a render stack , elements within a group MUST be rendered in reverse order (the first object in the list will appear on top of elements further down). Apply the transform Render Styles and child groups in the transformed coordinate system . Transform Group transform Composition Diagram for Transform Shape Transform Shape Graphic Element Transform Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'tr' Shape Type Shape Type a Position Anchor Point Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale) p Splittable Position Position Position / Translation r Scalar Rotation Rotation in degrees, clockwise s Vector Scale Scale factor, [100, 100] for no scaling o Scalar Opacity Opacity sk Scalar Skew Skew amount as an angle in degrees sa Scalar Skew Axis Direction along which skew is applied, in degrees ( 0 skews along the X axis, 90 along the Y axis) Transform shapes MUST always be present in the group and they MUST be the last item in the it array. They modify the group's coordinate system the same way as Layer Transform . Style Describes the visual appearance (like fill and stroke) of neighbouring shapes Composition Diagram for Shape Style Shape Style Graphic Element Visual Object Fill Gradient Stroke Gradient Stroke Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque Shapes styles MUST apply their style to the collected shapes that come before them in stacking order . Fill Solid fill color Composition Diagram for Fill Fill Shape Style Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'fl' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque c Color Color Color r Fill Rule Fill Rule Fill Rule Example Red 1 Green 0.98 Blue 0.28 Opacity 100 Fill Rule Non Zero Even Odd var lottie_player_23 = new PlaygroundPlayer( 23, 'playground_23_6', 'lottie_target_23', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{f5d94f54-bb8f-4f07-be45-232ebd4b9eb1}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{4b0993ed-e35b-48a5-ab12-687dbc147c7c}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Path\", \"mn\": \"{29196ff2-0a65-48b4-a450-f9fbc3a3640d}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"Path\", \"mn\": \"{bb7e6c60-755e-4a21-a7ba-bd054feab5c7}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[125.51641791044776, 452.20298507462684], [240.71641791044777, 38.6865671641791], [435.8686567164179, 447.9044776119403], [42.125373134328356, 173.65970149253732], [460.8, 156.46567164179103]], \"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"p\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[0].it[1]; shape.c.k = [data[\"Red\"], data[\"Green\"], data[\"Blue\"]]; shape.o.k = data[\"Opacity\"]; shape.r = Number(data[\"Fill Rule\"]); this.json_viewer_contents = lottie.layers[0].shapes[0].it[1]; }, {} ); Stroke Solid stroke Composition Diagram for Stroke Stroke Shape Style Base Stroke Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'st' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque lc Line Cap Line Cap Line Cap lj Line Join Line Join Line Join ml number Miter Limit Miter Limit ml2 Scalar Miter Limit Animatable alternative to ml w Scalar Width Stroke width d array of Stroke Dash Dashes Dashed line definition c Color Color Stroke color Example Red 1 Green 0.98 Blue 0.28 Width 32 Opacity 100 Line Cap Butt Round Square Line Join Miter Round Bevel Miter Limit 3 var lottie_player_24 = new PlaygroundPlayer( 24, 'playground_24_9', 'lottie_target_24', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.c.k = [data[\"Red\"], data[\"Green\"], data[\"Blue\"]]; shape.o.k = data[\"Opacity\"]; shape.w.k = data[\"Width\"]; shape.lc = Number(data[\"Line Cap\"]); shape.lj = Number(data[\"Line Join\"]); shape.ml = data[\"Miter Limit\"]; shape.d = undefined; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} ); Stroke Dashes An item used to described the dash pattern in a stroked path Composition Diagram for Stroke Dash Stroke Dash Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like n Stroke Dash Type Dash Type Dash Type v Scalar Length Length of the dash Example Red 1 Green 0.98 Blue 0.28 Width 32 Opacity 100 Line Cap Butt Round Square Line Join Miter Round Bevel Miter Limit 3 Dash Offset 0 Dash Length 30 Dash Gap 50 var lottie_player_25 = new PlaygroundPlayer( 25, 'playground_25_12', 'lottie_target_25', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.c.k = [data[\"Red\"], data[\"Green\"], data[\"Blue\"]]; shape.o.k = data[\"Opacity\"]; shape.w.k = data[\"Width\"]; shape.lc = Number(data[\"Line Cap\"]); shape.lj = Number(data[\"Line Join\"]); shape.ml = data[\"Miter Limit\"]; shape.d[0].v.k = data[\"Dash Offset\"]; shape.d[1].v.k = data[\"Dash Length\"]; shape.d[2].v.k = data[\"Dash Gap\"]; var trim = lottie.layers[0].shapes[1]; trim.e.k = 100; trim.o.k = 0; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} ); Gradient Fill Gradient fill color Composition Diagram for Gradient Gradient Shape Style Base Gradient Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'gf' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque g Gradient Colors Gradient colors s Position Start Point Starting point for the gradient e Position End Point End point for the gradient t Gradient Type Gradient Type Type of the gradient h Scalar Highlight Length Highlight Length, as a percentage between s and e a Scalar Highlight Angle Highlight Angle in clockwise degrees, relative to the direction from s to e r Fill Rule Fill Rule Fill Rule Example Start X 256 Start Y 496 End X 256 End Y 16 Type Linear Radial Highlight 0 Highlight Angle 0 var lottie_player_26 = new PlaygroundPlayer( 26, 'playground_26_8', 'lottie_target_26', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{3da63a46-0ec5-45b8-90fb-d31c5614d5be}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Start/End markers\", \"mn\": \"{04a8ef87-75fd-451c-868b-7413969c8ad9}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{078a0bf7-08ce-49f7-9dca-c473ad9ff09d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{efb1ff36-fe2b-4939-97a5-d75a167d003b}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{759da60a-0439-496c-89a9-66e1d721ceb7}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"\", \"mn\": \"{b56ba91b-5ef9-40d2-a1da-27265d105c7a}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{020e377d-646e-45f6-830f-756cfff57aa9}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[3.7994567051676293, -7.097994637365934], [5.33994951436286, -6.707992504500113], [6.327946284594615, -5.609490432573314], [6.672442201680043, -3.952002315682892], [6.672442201680043, -3.262995246756169], [1.901449879997, -3.262995246756169], [2.505949758118953, -1.4624984765244131], [4.124444517362934, -0.8449957342683567], [5.300948539338484, -0.968496282719568], [6.360449636240906, -1.326002681317033], [6.360449636240906, -0.32500304695117377], [5.307446162716568, 0.019500487512187806], [4.072448295582389, 0.12999817182929574], [2.3239477471311782, -0.2729992077926948], [1.1409537191554788, -1.4755013406585165], [0.7184558520213006, -3.4319943936098403], [1.1019527441311032, -5.395000304695118], [2.1809543285457136, -6.655996282719569], [3.7994567051676293, -7.097994637365934]], \"i\": [[0, 0], [-0.4290005687642191, -0.2600014219105473], [-0.22966394472361795, -0.4723332927073187], [0, -0.6326587852196304], [0, 0], [0, 0], [-0.3856627665691641, -0.411668494837371], [-0.69333373959349, 0], [-0.34233512087802254, 0.08233369896747422], [-0.3639989437235931, 0.15600390009750242], [0, 0], [0.34666686979674477, -0.07366512287807196], [0.47666504162604095, 0], [0.506997440561014, 0.2686649197479937], [0.281665244756119, 0.5330031688292207], [0, 0.7713255331383286], [-0.25566459473986836, 0.5459984155853892], [-0.4636697948698716, 0.29466556976424485], [-0.6153317895447388, 0]], \"o\": [[0.5979946373659342, 0], [0.4290005687642182, 0.2600014219105473], [0.22966394472361795, 0.47233329270731783], [0, 0], [0, 0], [0.017337152178804383, 0.7886626853171328], [0.3856627665691641, 0.411668494837371], [0.4420008937723443, 0], [0.34233512087802165, -0.08233369896747411], [0, 0], [-0.35533544588614685, 0.15600390009750242], [-0.34666686979674477, 0.07366512287807195], [-0.6586695917397929, 0], [-0.5069974405610138, -0.26866491974799367], [-0.28166524475611887, -0.5330031688292207], [0, -0.7626721918047954], [0.2556645947398686, -0.5459984155853901], [0.46366979486987203, -0.29466556976424396], [0, 0]]}}}, {\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{b3f5759c-30aa-4352-a4ea-23b71ead28ad}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[3.7864462236555916, -6.162001706292657], [2.4929545113627842, -5.635496160841521], [1.9274556082652068, -4.172997684317108], [5.476452926948174, -4.172997684317108], [5.06045268319208, -5.609498049951249], [3.7864462236555916, -6.162001706292657]], \"i\": [[0, 0], [0.3163344708617717, -0.3510036969674246], [0.06066479786994661, -0.6239952873821846], [0, 0], [0.2686699979999494, 0.36833577089427205], [0.5806676416910426, 0]], \"o\": [[-0.5459933373334334, 0], [-0.3163344708617717, 0.3510036969674246], [0, 0], [-0.008663497837446243, -0.5893311395284879], [-0.2686699979999503, -0.36833577089427205], [0, 0]]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 16]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{e16b0057-203a-4dab-8e5b-495775987f85}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{07bcfe04-40c2-4636-807c-d64982f7a44d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{0de90988-3e53-4e7a-8a7d-cb147d0c42b5}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{22460e65-f67b-48b8-844b-e361867d003b}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[5.645452073801845, -1.923997318682967], [4.891453536338409, -0.39000213286582164], [2.8634485393384836, 0.12999817182929574], [1.608957802070052, 0.013002864134103353], [0.679454876996925, -0.311992565439136], [0.679454876996925, -1.3519931748293708], [1.6869521347408687, -0.968496282719568], [2.8894542676066903, -0.7929995124878122], [4.150450245631141, -1.0724963436585915], [4.540444761119028, -1.820004875121878], [4.3974513425335635, -2.2880013406585165], [3.8839562785944652, -2.7040015844146104], [2.824447564314108, -3.171998049951249], [1.6674516472286809, -3.6919983546463664], [0.9264559738993475, -4.315998720280507], [0.666459630240756, -5.251999268731718], [1.3879548160579016, -6.616995307695193], [3.2794487830945775, -7.097994637365934], [4.468948051826296, -6.9744940889147236], [5.502443420460512, -6.629998171829296], [5.1124489049726245, -5.719995734268357], [4.189443603277582, -6.031995917085427], [3.2014468330458263, -6.162001706292657], [2.128950489387235, -5.934501096902423], [1.7584564614115354, -5.316990737268432], [1.9274556082652068, -4.82950140159754], [2.4929545113627842, -4.439499268731718], [3.552455608265207, -3.9910032907072677], [4.683453414460362, -3.4839982327683194], [5.398450976899423, -2.853500243756094], [5.645452073801845, -1.923997318682967]], \"i\": [[0, 0], [0.5026656916422914, -0.346666869796745], [0.8493376396909924, 0], [0.35099861871546767, 0.07799687179679493], [0.26866999799995006, 0.13866674791869799], [0, 0], [-0.3943313426585666, -0.11699784682117054], [-0.4073367459186481, 0], [-0.2599963436585919, 0.18633122078051945], [0, 0.31200780019500485], [0.09532894572364281, 0.13866674791869782], [0.2470010969024221, 0.13866674791869782], [0.45933804595114847, 0.17333089577239447], [0.32066621978049437, 0.17333597402435075], [0.17333089577239413, 0.24266426973174227], [0, 0.38133609590239725], [-0.48099679054476374, 0.32066621978049437], [-0.779999187479687, 0], [-0.36833577089427294, -0.08233369896747345], [-0.32066114152853853, -0.14733024575614362], [0, 0], [0.32066621978049437, 0.08667052613815329], [0.3379982937073427, 0], [0.24699601865046583, -0.15166707292682258], [0, -0.2600065001625049], [-0.11266609790244764, -0.13433499899997603], [-0.26433317082927044, -0.12566642291057306], [-0.4420008937723443, -0.17333089577239447], [-0.3119976436910923, -0.1733359740243503], [-0.16466739793494867, -0.24699601865046628], [0, -0.3726725980649519]], \"o\": [[0, 0.6759965874146854], [-0.5026656916422914, 0.3466668697967449], [-0.4853285394634863, 0], [-0.3509986187154679, -0.07799687179679493], [0, 0], [0.27733349583739597, 0.13866674791869804], [0.3943313426585664, 0.11699784682117043], [0.5806676416910421, 0], [0.2599963436585915, -0.18633122078051967], [0, -0.17333089577239424], [-0.09532894572364281, -0.13866674791869826], [-0.24700109690242256, -0.13866674791869826], [-0.45066439160979055, -0.17333089577239447], [-0.3206662197804946, -0.1733359740243503], [-0.17333089577239436, -0.24266426973174315], [0, -0.5893311395284879], [0.4809967905447634, -0.3206662197804935], [0.4246637415935397, 0], [0.36833577089427205, 0.08233369896747433], [0, 0], [-0.2946706480162007, -0.12132959573989321], [-0.3206662197804948, -0.08667052613815329], [-0.4680015437885947, 0], [-0.2469960186504665, 0.15166707292682347], [0, 0.1906578914472865], [0.11266609790244786, 0.13433499899997514], [0.26433317082927044, 0.12566642291057306], [0.44200089377234475, 0.16466739793494822], [0.3119976436910914, 0.17333597402435075], [0.16466739793494867, 0.24699601865046583], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 496]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{a5276bb6-4d7c-4b4f-b371-a0e14a279176}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Gradient\", \"mn\": \"{9df3ba96-24a3-412e-abd4-e64e2e76e6df}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{20934ad0-1c22-4752-a5b1-be99889ea79a}\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [512, 512]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"gf\", \"nm\": \"Gradient Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"r\": 1, \"s\": {\"a\": 0, \"k\": [256, 496]}, \"e\": {\"a\": 0, \"k\": [256, 16]}, \"t\": 1, \"h\": {\"a\": 0, \"k\": 0}, \"a\": {\"a\": 0, \"k\": 0}, \"g\": {\"p\": 3, \"k\": {\"a\": 0, \"k\": [0, 0.7686274509803922, 0.8509803921568627, 0.9607843137254902, 0.5, 0.19600213626306554, 0.31400015259021896, 0.6899977111467155, 1, 0.16099794003204396, 0.18399328603036547, 0.45900663767452504, 0, 1, 0.5, 1, 1, 1]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"p\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var gradient = lottie.layers[1].shapes[0].it[1]; var start_marker = lottie.layers[0].shapes[1].it[1]; var end_marker = lottie.layers[0].shapes[0].it[1]; gradient.s.k = start_marker.p.k = [data[\"Start X\"], data[\"Start Y\"]]; gradient.e.k = end_marker.p.k = [data[\"End X\"], data[\"End Y\"]]; gradient.t = Number(data[\"Type\"]); if (gradient.t === 2) { gradient.h = { a: 0, k: data[\"Highlight\"] }; gradient.a = { a: 0, k: data[\"Highlight Angle\"] }; } else { delete gradient.h; delete gradient.a; } this.json_viewer_contents = lottie.layers[1].shapes[0].it[1]; }, {} ); Gradient Stroke Gradient stroke Composition Diagram for Gradient Stroke Gradient Stroke Shape Style Base Stroke Base Gradient Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'gs' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque lc Line Cap Line Cap Line Cap lj Line Join Line Join Line Join ml number Miter Limit Miter Limit ml2 Scalar Miter Limit Animatable alternative to ml w Scalar Width Stroke width d array of Stroke Dash Dashes Dashed line definition g Gradient Colors Gradient colors s Position Start Point Starting point for the gradient e Position End Point End point for the gradient t Gradient Type Gradient Type Type of the gradient h Scalar Highlight Length Highlight Length, as a percentage between s and e a Scalar Highlight Angle Highlight Angle in clockwise degrees, relative to the direction from s to e Example Start X 256 Start Y 496 End X 256 End Y 16 Type Linear Radial Highlight 0 Highlight Angle 0 var lottie_player_27 = new PlaygroundPlayer( 27, 'playground_27_8', 'lottie_target_27', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Start/End markers\", \"mn\": \"{04a8ef87-75fd-451c-868b-7413969c8ad9}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{078a0bf7-08ce-49f7-9dca-c473ad9ff09d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{efb1ff36-fe2b-4939-97a5-d75a167d003b}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{759da60a-0439-496c-89a9-66e1d721ceb7}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"\", \"mn\": \"{b56ba91b-5ef9-40d2-a1da-27265d105c7a}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{020e377d-646e-45f6-830f-756cfff57aa9}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[3.7994567051676293, -7.097994637365934], [5.33994951436286, -6.707992504500113], [6.327946284594615, -5.609490432573314], [6.672442201680043, -3.952002315682892], [6.672442201680043, -3.262995246756169], [1.901449879997, -3.262995246756169], [2.505949758118953, -1.4624984765244131], [4.124444517362934, -0.8449957342683567], [5.300948539338484, -0.968496282719568], [6.360449636240906, -1.326002681317033], [6.360449636240906, -0.32500304695117377], [5.307446162716568, 0.019500487512187806], [4.072448295582389, 0.12999817182929574], [2.3239477471311782, -0.2729992077926948], [1.1409537191554788, -1.4755013406585165], [0.7184558520213006, -3.4319943936098403], [1.1019527441311032, -5.395000304695118], [2.1809543285457136, -6.655996282719569], [3.7994567051676293, -7.097994637365934]], \"i\": [[0, 0], [-0.4290005687642191, -0.2600014219105473], [-0.22966394472361795, -0.4723332927073187], [0, -0.6326587852196304], [0, 0], [0, 0], [-0.3856627665691641, -0.411668494837371], [-0.69333373959349, 0], [-0.34233512087802254, 0.08233369896747422], [-0.3639989437235931, 0.15600390009750242], [0, 0], [0.34666686979674477, -0.07366512287807196], [0.47666504162604095, 0], [0.506997440561014, 0.2686649197479937], [0.281665244756119, 0.5330031688292207], [0, 0.7713255331383286], [-0.25566459473986836, 0.5459984155853892], [-0.4636697948698716, 0.29466556976424485], [-0.6153317895447388, 0]], \"o\": [[0.5979946373659342, 0], [0.4290005687642182, 0.2600014219105473], [0.22966394472361795, 0.47233329270731783], [0, 0], [0, 0], [0.017337152178804383, 0.7886626853171328], [0.3856627665691641, 0.411668494837371], [0.4420008937723443, 0], [0.34233512087802165, -0.08233369896747411], [0, 0], [-0.35533544588614685, 0.15600390009750242], [-0.34666686979674477, 0.07366512287807195], [-0.6586695917397929, 0], [-0.5069974405610138, -0.26866491974799367], [-0.28166524475611887, -0.5330031688292207], [0, -0.7626721918047954], [0.2556645947398686, -0.5459984155853901], [0.46366979486987203, -0.29466556976424396], [0, 0]]}}}, {\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{b3f5759c-30aa-4352-a4ea-23b71ead28ad}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[3.7864462236555916, -6.162001706292657], [2.4929545113627842, -5.635496160841521], [1.9274556082652068, -4.172997684317108], [5.476452926948174, -4.172997684317108], [5.06045268319208, -5.609498049951249], [3.7864462236555916, -6.162001706292657]], \"i\": [[0, 0], [0.3163344708617717, -0.3510036969674246], [0.06066479786994661, -0.6239952873821846], [0, 0], [0.2686699979999494, 0.36833577089427205], [0.5806676416910426, 0]], \"o\": [[-0.5459933373334334, 0], [-0.3163344708617717, 0.3510036969674246], [0, 0], [-0.008663497837446243, -0.5893311395284879], [-0.2686699979999503, -0.36833577089427205], [0, 0]]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 16]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{e16b0057-203a-4dab-8e5b-495775987f85}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{07bcfe04-40c2-4636-807c-d64982f7a44d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{0de90988-3e53-4e7a-8a7d-cb147d0c42b5}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{22460e65-f67b-48b8-844b-e361867d003b}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[5.645452073801845, -1.923997318682967], [4.891453536338409, -0.39000213286582164], [2.8634485393384836, 0.12999817182929574], [1.608957802070052, 0.013002864134103353], [0.679454876996925, -0.311992565439136], [0.679454876996925, -1.3519931748293708], [1.6869521347408687, -0.968496282719568], [2.8894542676066903, -0.7929995124878122], [4.150450245631141, -1.0724963436585915], [4.540444761119028, -1.820004875121878], [4.3974513425335635, -2.2880013406585165], [3.8839562785944652, -2.7040015844146104], [2.824447564314108, -3.171998049951249], [1.6674516472286809, -3.6919983546463664], [0.9264559738993475, -4.315998720280507], [0.666459630240756, -5.251999268731718], [1.3879548160579016, -6.616995307695193], [3.2794487830945775, -7.097994637365934], [4.468948051826296, -6.9744940889147236], [5.502443420460512, -6.629998171829296], [5.1124489049726245, -5.719995734268357], [4.189443603277582, -6.031995917085427], [3.2014468330458263, -6.162001706292657], [2.128950489387235, -5.934501096902423], [1.7584564614115354, -5.316990737268432], [1.9274556082652068, -4.82950140159754], [2.4929545113627842, -4.439499268731718], [3.552455608265207, -3.9910032907072677], [4.683453414460362, -3.4839982327683194], [5.398450976899423, -2.853500243756094], [5.645452073801845, -1.923997318682967]], \"i\": [[0, 0], [0.5026656916422914, -0.346666869796745], [0.8493376396909924, 0], [0.35099861871546767, 0.07799687179679493], [0.26866999799995006, 0.13866674791869799], [0, 0], [-0.3943313426585666, -0.11699784682117054], [-0.4073367459186481, 0], [-0.2599963436585919, 0.18633122078051945], [0, 0.31200780019500485], [0.09532894572364281, 0.13866674791869782], [0.2470010969024221, 0.13866674791869782], [0.45933804595114847, 0.17333089577239447], [0.32066621978049437, 0.17333597402435075], [0.17333089577239413, 0.24266426973174227], [0, 0.38133609590239725], [-0.48099679054476374, 0.32066621978049437], [-0.779999187479687, 0], [-0.36833577089427294, -0.08233369896747345], [-0.32066114152853853, -0.14733024575614362], [0, 0], [0.32066621978049437, 0.08667052613815329], [0.3379982937073427, 0], [0.24699601865046583, -0.15166707292682258], [0, -0.2600065001625049], [-0.11266609790244764, -0.13433499899997603], [-0.26433317082927044, -0.12566642291057306], [-0.4420008937723443, -0.17333089577239447], [-0.3119976436910923, -0.1733359740243503], [-0.16466739793494867, -0.24699601865046628], [0, -0.3726725980649519]], \"o\": [[0, 0.6759965874146854], [-0.5026656916422914, 0.3466668697967449], [-0.4853285394634863, 0], [-0.3509986187154679, -0.07799687179679493], [0, 0], [0.27733349583739597, 0.13866674791869804], [0.3943313426585664, 0.11699784682117043], [0.5806676416910421, 0], [0.2599963436585915, -0.18633122078051967], [0, -0.17333089577239424], [-0.09532894572364281, -0.13866674791869826], [-0.24700109690242256, -0.13866674791869826], [-0.45066439160979055, -0.17333089577239447], [-0.3206662197804946, -0.1733359740243503], [-0.17333089577239436, -0.24266426973174315], [0, -0.5893311395284879], [0.4809967905447634, -0.3206662197804935], [0.4246637415935397, 0], [0.36833577089427205, 0.08233369896747433], [0, 0], [-0.2946706480162007, -0.12132959573989321], [-0.3206662197804948, -0.08667052613815329], [-0.4680015437885947, 0], [-0.2469960186504665, 0.15166707292682347], [0, 0.1906578914472865], [0.11266609790244786, 0.13433499899997514], [0.26433317082927044, 0.12566642291057306], [0.44200089377234475, 0.16466739793494822], [0.3119976436910914, 0.17333597402435075], [0.16466739793494867, 0.24699601865046583], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 496]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"gs\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}], \"r\": 1, \"s\": {\"a\": 0, \"k\": [256, 496]}, \"e\": {\"a\": 0, \"k\": [256, 16]}, \"t\": 1, \"h\": {\"a\": 0, \"k\": 0}, \"a\": {\"a\": 0, \"k\": 0}, \"g\": {\"p\": 3, \"k\": {\"a\": 0, \"k\": [0, 0.7686274509803922, 0.8509803921568627, 0.9607843137254902, 0.5, 0.19600213626306554, 0.31400015259021896, 0.6899977111467155, 1, 0.16099794003204396, 0.18399328603036547, 0.45900663767452504, 0, 1, 0.5, 1, 1, 1]}}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var gradient = lottie.layers[1].shapes[1]; var start_marker = lottie.layers[0].shapes[1].it[1]; var end_marker = lottie.layers[0].shapes[0].it[1]; gradient.s.k = start_marker.p.k = [data[\"Start X\"], data[\"Start Y\"]]; gradient.e.k = end_marker.p.k = [data[\"End X\"], data[\"End Y\"]]; gradient.t = Number(data[\"Type\"]); if (gradient.t === 2) { gradient.h = { a: 0, k: data[\"Highlight\"] }; gradient.a = { a: 0, k: data[\"Highlight Angle\"] }; } else { delete gradient.h; delete gradient.a; } this.json_viewer_contents = lottie.layers[1].shapes[1]; }, {} ); Modifiers Modifiers change the bezier curves of neighbouring shapes Modifiers replace shapes in the render stack by applying operating on the bezier path of to the collected shapes that come before it in stacking order . Trim Path Trims shapes into a segment Composition Diagram for Trim Path Trim Path Modifier Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'tm' Shape Type Shape Type s Scalar Start Segment start e Scalar End Segment end o Scalar Offset Offset m Trim Multiple Shapes Multiple How to treat multiple copies Start 0 End 50 Offset 0 Multiple Shapes Parallel Sequential var lottie_player_28 = new PlaygroundPlayer( 28, 'playground_28_5', 'lottie_target_28', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [128, 128]}, \"or\": {\"a\": 0, \"k\": 100}, \"ir\": {\"a\": 0, \"k\": 50}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [384, 128]}, \"s\": {\"a\": 0, \"k\": [200, 200]}}, {\"ty\": \"rc\", \"nm\": \"Rect\", \"mn\": \"{0776f2df-2619-415c-b10d-f648f2edfa0f}\", \"d\": 1, \"p\": {\"a\": 0, \"k\": [128, 384]}, \"s\": {\"a\": 0, \"k\": [200, 200]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"sr\", \"nm\": \"Triangle\", \"mn\": \"{db373594-d0ae-44ff-9295-30ff72616af2}\", \"p\": {\"a\": 0, \"k\": [384, 384]}, \"or\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 3}, \"sy\": 2, \"os\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 50}, \"o\": {\"a\": 0, \"k\": 0}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 20}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { lottie.layers[0].shapes[4].s.k = data[\"Start\"]; lottie.layers[0].shapes[4].e.k = data[\"End\"]; lottie.layers[0].shapes[4].o.k = data[\"Offset\"]; lottie.layers[0].shapes[4].m = Number(data[\"Multiple Shapes\"]); this.json_viewer_contents = lottie.layers[0].shapes[4]; }, {} ); When rendering trim path, the order of bezier points MUST be the same as rendering instructions given for each shape in this section. Rendering trim path can be rather complex. Given o f f s e t = { o 360 \u2212 \u230a o 360 \u230b o \u2265 0 o 360 \u2212 \u2308 o 360 \u2309 o < 0 s t a r t = o f f s e t + min ( 1 , max ( 0 , min ( s , e ) 100 ) ) e n d = o f f s e t + min ( 1 , max ( 0 , max ( s , e ) 100 ) ) If s and e are equal, implementations MUST NOT render any shapes. If s = 0 and e = 1 , the input shape MUST be rendered as-is. To render trim path, implementations MUST consider the actual length of each shape (they MAY use approximations). Once the shapes are collected, the segment to render is given by the percentages s t a r t and e n d . When trim path is applied to multiple shapes, the m property MUST be considered when applying the modifier: When m has a value of 1 (Parallel), each shape MUST considered separately, s t a r t and e n d being applied to each shape. When m has a value of 2 (Sequential), all the shapes MUST be considered as following each other in render order. s t a r t and e n d refer to the whole length created by concatenating each shape.","title":"Shapes"},{"location":"specs/shapes/#shapes","text":"The graphical elements are divided in 4 categories: Shapes that define the actual curves but have no styling information Grouping , used to organize collections of graphic elements Styles , that define the visual appearance of shapes Modifiers alter the curves of the shapes","title":"Shapes"},{"location":"specs/shapes/#shape-rendering-model","text":"","title":"Shape Rendering Model"},{"location":"specs/shapes/#grouping-and-ordering-rules","text":"Shapes are rendered in reverse order, bottom->top. Shapes at the beginning of the array are rendered on top of shapes with larger indices. Groups offer a scoping mechanism for transforms, styles, modifiers, and shapes. All group children, including sub-groups and their children, are considered part of the group's scope. Transforms adjust the coordinate system for all elements within their group, and transitively for all other group-nested elements. Styles and modifiers apply to all preceding shapes within the current scope, including subgroup-nested shapes. When multiple styles apply to the same shape, the shape is rendered repeatedly for each style, in reverse order. When multiple modifiers apply to the same shape, they are composed in reverse order (e.g. T r i m ( T r i m ( s h a p e ) ) ). When multiple transforms apply to the same shape due to scope nesting, they compose in group nesting order (transforms are additive). Group opacity (property of the group transform) applies atomically to all elements in scope - i.e. opacity applies to the result of compositing all group content, and not to individual elements. More formally: for each ( s h a p e , s t y l e ) tuple, where I n d e x ( s h a p e ) < I n d e x ( s t y l e ) and s h a p e \u2208 S c o p e ( s t y l e ) : for each m o d i f i e r , in increasing index order, where I n d e x ( s h a p e ) < I n d e x ( m o d i f i e r ) and s h a p e \u2208 S c o p e ( m o d i f i e r ) : s h a p e = m o d i f i e r ( s h a p e ) compute the total shape transformation by composing all transforms within the shape scope chain: \u0002 k l z z w x h : 0433 \u0003 compute the total style transformation by composing all transforms within the style scope chain: \u0002 k l z z w x h : 0441 \u0003 R e n d e r ( s h a p e \u00d7 T s h a p e , s t y l e \u00d7 T s t y l e )","title":"Grouping and Ordering Rules"},{"location":"specs/shapes/#notes","text":"Certain modifier operations (e.g. sequential T r i m ) may require information about shapes from different groups, thus R e n d e r ( ) calls cannot always be issued based on single-pass local knowledge. Transforms can affect both shapes and styles (e.g. stroke width). For a given ( s h a p e , s t y l e ) , the shape and style transforms are not necessarily equal. Shapes without an applicable style are not rendered. This rendering model is based on AfterEffects' Shape Layer semantics.","title":"Notes"},{"location":"specs/shapes/#rendering-convention","text":"Shapes defined in this section contain rendering instructions. These instructions are used to generate the path as a bezier curve. Implementations MAY use different algorithms or primitives to render the shapes but the result MUST be equivalent to the paths defined here. Some instructions define named values for clarity and illustrative purposes, implementations are not required to have them explicitly defined in their rendering process. When referencing animated properties, the rendering instruction will use the same name as in the JSON but it's assumed they refer to their value at a given point in time rather than the property itself. For Vector values, v a l u e . x and v a l u e . y in the instructions are equivalent to value[0] and value[1] respectively. All paths MUST be closed unless specified otherwise in the rendering instructions. When instructions call for an equality comparison between two values, implementations MAY consider similar values to be equal to overcome numerical instability.","title":"Rendering Convention"},{"location":"specs/shapes/#drawing-commands","text":"Drawing instructions will contain the following commands: add vertex : Adds a vertex to the bezier shape in global coordinates set in tangent : Sets the cubic tangent to the last added vertex, with coordinates relative to it. If omitted, tangents MUST be ( 0 , 0 ) . set out tangent : Sets the cubic tangent from the last added vertex, with coordinates relative to it. If omitted, tangents MUST be ( 0 , 0 ) . lerp : Linearly interpolates two points or scalars by a given amount.","title":"Drawing Commands"},{"location":"specs/shapes/#approximating-ellipses-with-cubic-bezier","text":"An elliptical quadrant can be approximated by a cubic bezier segment with tangents of length $radius \\cdot E_t. Where E t \u2248 0.5519150244935105707435627 See this article for the math behind it. When implementations render elliptical arcs using bezier curves, they SHOULD use this constant, a similar approximation, or elliptical arc drawing primitives.","title":"Approximating Ellipses with Cubic Bezier"},{"location":"specs/shapes/#graphic-element","text":"Element used to display vector data in a shape layer Composition Diagram for Graphic Element Graphic Element Visual Object Group Shape Style Fill Gradient Stroke Gradient Stroke Shape PolyStar Path Rectangle Ellipse Transform Shape Modifier Trim Path Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string Shape Type Shape Type The ty property defines the specific element type based on the following values: ty Type 'el' Ellipse 'fl' Fill 'gf' Gradient 'gs' Gradient Stroke 'gr' Group 'sh' Path 'sr' PolyStar 'rc' Rectangle 'st' Stroke 'tr' Transform Shape 'tm' Trim Path None Unknown shape types Hidden shapes ( hd: True ) are ignored, and do not contribute to rendering nor modifier operations.","title":"Graphic Element"},{"location":"specs/shapes/#shape","text":"Drawable shape, defines the actual shape but not the style Composition Diagram for Shape Shape Graphic Element Visual Object PolyStar Path Rectangle Ellipse Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path","title":"Shapes"},{"location":"specs/shapes/#ellipse","text":"Ellipse shape Composition Diagram for Ellipse Ellipse Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'el' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Position s Vector Size Size Example Position x 256 Position y 256 Width 256 Height 256 var lottie_player_19 = new PlaygroundPlayer( 19, 'playground_19_5', 'lottie_target_19', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Group\", \"it\": [{\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [256, 256]}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[0].shapes[0].it[0].p.k = [ data[\"Position x\"], data[\"Position y\"] ]; lottie.layers[0].shapes[0].it[0].s.k = [ data[\"Width\"], data[\"Height\"] ]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); An ellipse is drawn from the top quandrant point going clockwise: r a d i u s = s 2 t a n g e n t = r a d i u s \u00b7 E t x = p . x y = p . y Add vertex ( x , y \u2212 r a d i u s . y ) Set in tangent ( \u2212 t a n g e n t . x , 0 ) Set out tangent ( t a n g e n t . x , 0 ) Add vertex ( x + r a d i u s . x , y ) Set in tangent ( 0 , \u2212 t a n g e n t . y ) Set out tangent ( 0 , t a n g e n t . y ) Add vertex ( x , y + r a d i u s . y ) Set in tangent ( t a n g e n t . x , 0 ) Set out tangent ( \u2212 t a n g e n t . x , 0 ) Add vertex ( x \u2212 r a d i u s . x , y ) Set in tangent ( 0 , t a n g e n t . y ) Set out tangent ( 0 , \u2212 t a n g e n t . y ) Implementations MAY use elliptical arcs to render an ellipse.","title":"Ellipse"},{"location":"specs/shapes/#rectangle","text":"A simple rectangle shape Composition Diagram for Rectangle Rectangle Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'rc' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Center of the rectangle s Vector Size Size r Scalar Rounded Rounded corners radius Example Position x 256 Position y 256 Width 256 Height 256 Roundness 0 var lottie_player_20 = new PlaygroundPlayer( 20, 'playground_20_6', 'lottie_target_20', {\"v\": \"5.5.7\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Group\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [256, 256]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-26-g7b05e75c\"}}, function (lottie, data) { lottie.layers[0].shapes[0].it[0].p.k = [ data[\"Position x\"], data[\"Position y\"] ]; lottie.layers[0].shapes[0].it[0].s.k = [ data[\"Width\"], data[\"Height\"] ]; lottie.layers[0].shapes[0].it[0].r.k = data[\"Roundness\"]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); Definitions: l e f t = p . x \u2212 s . x 2 r i g h t = p . x + s . x 2 t o p = p . y \u2212 s . y 2 b o t t o m = p . y + s . y 2 If r = 0 , then the rectangle is rendered from the top-right going clockwise: Add vertex ( r i g h t , t o p ) Add vertex ( r i g h t , b o t t o m ) Add vertex ( l e f t , b o t t o m ) Add vertex ( l e f t , t o p ) If r > 0 , the rounded corners must be taken into account. r o u n d e d = min ( s . x 2 , s . y 2 , r ) t a n g e n t = r o u n d e d \u00b7 E t Add vertex ( r i g h t , t o p + r o u n d e d ) Set in tangent ( 0 , \u2212 t a n g e n t ) Add vertex ( r i g h t , b o t t o m \u2212 r o u n d e d ) Set out tangent ( 0 , t a n g e n t ) Add vertex ( r i g h t \u2212 r o u n d e d , b o t t o m ) Set in tangent ( t a n g e n t , 0 ) Add vertex ( l e f t + r o u n d e d , b o t t o m ) Set out tangent ( \u2212 t a n g e n t , 0 ) Add vertex ( l e f t , b o t t o m \u2212 r o u n d e d ) Set in tangent ( 0 , t a n g e n t ) Add vertex ( l e f t , t o p + r o u n d e d ) Set out tangent ( 0 , \u2212 t a n g e n t ) Add vertex ( l e f t + r o u n d e d , t o p ) Set in tangent ( \u2212 t a n g e n t , 0 ) Add vertex ( r i g h t \u2212 r o u n d e d , t o p ) Set out tangent ( t a n g e n t , 0 )","title":"Rectangle"},{"location":"specs/shapes/#path","text":"Custom Bezier shape Composition Diagram for Path Path Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'sh' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path ks Bezier Shape Bezier path Example Shape var lottie_player_21 = new PlaygroundPlayer( 21, 'playground_21_2', 'lottie_target_21', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"ao\": 0, \"ks\": {\"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"it\": [{\"ty\": \"sh\", \"d\": 1, \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[253, 147], [56, 153], [253, 409], [450, 153]], \"i\": [[12, -57], [42, -112], [-16, -18], [46, 123]], \"o\": [[-17, -61], [-46, 125], [16, -14], [-43, -115]]}}}, {\"ty\": \"st\", \"o\": {\"a\": 0, \"k\": 100}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}]}, function (lottie, data) { var shape = lottie.layers[0].shapes[0].it[0]; if ( data[\"Shape\"] ) shape.ks.k = data[\"Shape\"]; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); var playground_21_1_playground = document.getElementById(\"playground_21_1_playground\"); playground_21_1_playground.name = playground_21_1_playground.getAttribute(\"name\"); var playground_21_1_playground_editor = BezierPreviewEditor.stand_alone( playground_21_1_playground, (lottie) => { playground_21_1_playground.value = lottie; lottie_player_21.reload(); }, null, 512, 512 );","title":"Path"},{"location":"specs/shapes/#polystar","text":"Star or regular polygon Composition Diagram for PolyStar PolyStar Shape Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'sr' Shape Type Shape Type d Shape Direction Direction Direction the shape is drawn as, mostly relevant when using trim path p Position Position Position or Scalar Outer Radius Outer Radius os Scalar Outer Roundness Outer Roundness as a percentage r Scalar Rotation Rotation, clockwise in degrees pt Scalar Points Points sy Star Type Star Type Star Type ir Scalar Inner Radius Inner Radius is Scalar Inner Roundness Inner Roundness as a percentage Example Position x 256 Position y 256 Points 5 Rotation 0 Outer Radius 200 Inner Radius 100 Outer Roundness 0 Inner Roundness 0 Star Type Star Polygon var lottie_player_22 = new PlaygroundPlayer( 22, 'playground_22_10', 'lottie_target_22', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"layers\": [{\"ty\": 4, \"ddd\": 0, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ip\": 0, \"op\": 180, \"ind\": 0, \"st\": 0, \"sr\": 1, \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"PolyStar\", \"mn\": \"{9199543e-3552-4e51-a802-623f2a4a2ca1}\", \"it\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.979995422293431, 0.28000305180437934]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 30}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var star = { \"ty\": \"sr\", \"nm\": \"PolyStar\", \"sy\": Number(data[\"Star Type\"]), \"p\": { \"a\": 0, \"k\": [data[\"Position x\"], data[\"Position y\"]] }, \"r\": { \"a\": 0, \"k\": data[\"Rotation\"] }, \"pt\": { \"a\": 0, \"k\": data[\"Points\"] }, \"or\": { \"a\": 0, \"k\": data[\"Outer Radius\"] }, \"os\": { \"a\": 0, \"k\": data[\"Outer Roundness\"] }, }; if ( data[\"Star Type\"] == \"1\" ) { star = { ...star, \"ir\": { \"a\": 0, \"k\": data[\"Inner Radius\"] }, \"is\": { \"a\": 0, \"k\": data[\"Inner Roundness\"] }, }; } lottie.layers[0].shapes[0].it[0] = star; this.json_viewer_contents = lottie.layers[0].shapes[0].it[0]; }, {} ); Definitions: p o i n t s = \u230a p t \u2309 \u03b8 = \u03c0 p o i n t s \u03b1 = \u03c0 180 \u00b7 r t a n o u t = o s 100 \u00b7 o r \u00b7 2 \u03c0 p o i n t s \u00b7 4 t a n i n = i s 100 \u00b7 i r \u00b7 2 \u03c0 p o i n t s \u00b7 4 For i in [ 0 , p o i n t s ) Let \u03b2 = \u2212 \u03c0 2 + \u03b1 + i \u00b7 2 \u03b8 \u02d9 Let V o u t = ( o r \u00b7 cos ( \u03b2 ) , o r \u00b7 sin ( \u03b2 ) ) Add vertex p + V o u t If o r \u2260 0 , we need to add bezier tangent Let T o u t = ( V o u t \u00b7 t a n o u t o r ) Set in tangent V o u t Set out tangent \u2212 V o u t If s y = 1 , we need to add a vertex towards the inner radius to make a star Let V i n = ( i r \u00b7 cos ( \u03b2 + \u03b8 ) , o r \u00b7 sin ( \u03b2 + \u03b8 ) ) Add vertex p + V i n If i r \u2260 0 , we need to add bezier tangent Let T i n = ( V i n \u00b7 t a n i n o r ) Set in tangent V i n Set out tangent \u2212 V i n","title":"PolyStar"},{"location":"specs/shapes/#grouping","text":"","title":"Grouping"},{"location":"specs/shapes/#group","text":"Shape Element that can contain other shapes Composition Diagram for Group Group Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'gr' Shape Type Shape Type np number Number Of Properties Number Of Properties it array of Graphic Element Shapes Shapes A group defines a render stack , elements within a group MUST be rendered in reverse order (the first object in the list will appear on top of elements further down). Apply the transform Render Styles and child groups in the transformed coordinate system .","title":"Group"},{"location":"specs/shapes/#transform","text":"Group transform Composition Diagram for Transform Shape Transform Shape Graphic Element Transform Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'tr' Shape Type Shape Type a Position Anchor Point Anchor point: a position (relative to its parent) around which transformations are applied (ie: center for rotation / scale) p Splittable Position Position Position / Translation r Scalar Rotation Rotation in degrees, clockwise s Vector Scale Scale factor, [100, 100] for no scaling o Scalar Opacity Opacity sk Scalar Skew Skew amount as an angle in degrees sa Scalar Skew Axis Direction along which skew is applied, in degrees ( 0 skews along the X axis, 90 along the Y axis) Transform shapes MUST always be present in the group and they MUST be the last item in the it array. They modify the group's coordinate system the same way as Layer Transform .","title":"Transform"},{"location":"specs/shapes/#shape-style","text":"Describes the visual appearance (like fill and stroke) of neighbouring shapes Composition Diagram for Shape Style Shape Style Graphic Element Visual Object Fill Gradient Stroke Gradient Stroke Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque Shapes styles MUST apply their style to the collected shapes that come before them in stacking order .","title":"Style"},{"location":"specs/shapes/#fill","text":"Solid fill color Composition Diagram for Fill Fill Shape Style Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'fl' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque c Color Color Color r Fill Rule Fill Rule Fill Rule Example Red 1 Green 0.98 Blue 0.28 Opacity 100 Fill Rule Non Zero Even Odd var lottie_player_23 = new PlaygroundPlayer( 23, 'playground_23_6', 'lottie_target_23', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{f5d94f54-bb8f-4f07-be45-232ebd4b9eb1}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{4b0993ed-e35b-48a5-ab12-687dbc147c7c}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Path\", \"mn\": \"{29196ff2-0a65-48b4-a450-f9fbc3a3640d}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"Path\", \"mn\": \"{bb7e6c60-755e-4a21-a7ba-bd054feab5c7}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[125.51641791044776, 452.20298507462684], [240.71641791044777, 38.6865671641791], [435.8686567164179, 447.9044776119403], [42.125373134328356, 173.65970149253732], [460.8, 156.46567164179103]], \"i\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], \"o\": [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"p\": {\"a\": 0, \"k\": [251.46268656716418, 245.4447761194029]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[0].it[1]; shape.c.k = [data[\"Red\"], data[\"Green\"], data[\"Blue\"]]; shape.o.k = data[\"Opacity\"]; shape.r = Number(data[\"Fill Rule\"]); this.json_viewer_contents = lottie.layers[0].shapes[0].it[1]; }, {} );","title":"Fill"},{"location":"specs/shapes/#stroke","text":"Solid stroke Composition Diagram for Stroke Stroke Shape Style Base Stroke Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'st' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque lc Line Cap Line Cap Line Cap lj Line Join Line Join Line Join ml number Miter Limit Miter Limit ml2 Scalar Miter Limit Animatable alternative to ml w Scalar Width Stroke width d array of Stroke Dash Dashes Dashed line definition c Color Color Stroke color Example Red 1 Green 0.98 Blue 0.28 Width 32 Opacity 100 Line Cap Butt Round Square Line Join Miter Round Bevel Miter Limit 3 var lottie_player_24 = new PlaygroundPlayer( 24, 'playground_24_9', 'lottie_target_24', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.c.k = [data[\"Red\"], data[\"Green\"], data[\"Blue\"]]; shape.o.k = data[\"Opacity\"]; shape.w.k = data[\"Width\"]; shape.lc = Number(data[\"Line Cap\"]); shape.lj = Number(data[\"Line Join\"]); shape.ml = data[\"Miter Limit\"]; shape.d = undefined; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} );","title":"Stroke"},{"location":"specs/shapes/#stroke-dash","text":"An item used to described the dash pattern in a stroked path Composition Diagram for Stroke Dash Stroke Dash Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like n Stroke Dash Type Dash Type Dash Type v Scalar Length Length of the dash Example Red 1 Green 0.98 Blue 0.28 Width 32 Opacity 100 Line Cap Butt Round Square Line Join Miter Round Bevel Miter Limit 3 Dash Offset 0 Dash Length 30 Dash Gap 50 var lottie_player_25 = new PlaygroundPlayer( 25, 'playground_25_12', 'lottie_target_25', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"mn\": \"{dcd7570f-5105-485b-bd43-42ad990b01e8}\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 70}, \"o\": {\"a\": 0, \"k\": -125}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var shape = lottie.layers[0].shapes[2]; shape.c.k = [data[\"Red\"], data[\"Green\"], data[\"Blue\"]]; shape.o.k = data[\"Opacity\"]; shape.w.k = data[\"Width\"]; shape.lc = Number(data[\"Line Cap\"]); shape.lj = Number(data[\"Line Join\"]); shape.ml = data[\"Miter Limit\"]; shape.d[0].v.k = data[\"Dash Offset\"]; shape.d[1].v.k = data[\"Dash Length\"]; shape.d[2].v.k = data[\"Dash Gap\"]; var trim = lottie.layers[0].shapes[1]; trim.e.k = 100; trim.o.k = 0; this.json_viewer_contents = lottie.layers[0].shapes[2]; }, {} );","title":"Stroke Dashes"},{"location":"specs/shapes/#gradient-fill","text":"Gradient fill color Composition Diagram for Gradient Gradient Shape Style Base Gradient Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'gf' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque g Gradient Colors Gradient colors s Position Start Point Starting point for the gradient e Position End Point End point for the gradient t Gradient Type Gradient Type Type of the gradient h Scalar Highlight Length Highlight Length, as a percentage between s and e a Scalar Highlight Angle Highlight Angle in clockwise degrees, relative to the direction from s to e r Fill Rule Fill Rule Fill Rule Example Start X 256 Start Y 496 End X 256 End Y 16 Type Linear Radial Highlight 0 Highlight Angle 0 var lottie_player_26 = new PlaygroundPlayer( 26, 'playground_26_8', 'lottie_target_26', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{3da63a46-0ec5-45b8-90fb-d31c5614d5be}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Start/End markers\", \"mn\": \"{04a8ef87-75fd-451c-868b-7413969c8ad9}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{078a0bf7-08ce-49f7-9dca-c473ad9ff09d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{efb1ff36-fe2b-4939-97a5-d75a167d003b}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{759da60a-0439-496c-89a9-66e1d721ceb7}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"\", \"mn\": \"{b56ba91b-5ef9-40d2-a1da-27265d105c7a}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{020e377d-646e-45f6-830f-756cfff57aa9}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[3.7994567051676293, -7.097994637365934], [5.33994951436286, -6.707992504500113], [6.327946284594615, -5.609490432573314], [6.672442201680043, -3.952002315682892], [6.672442201680043, -3.262995246756169], [1.901449879997, -3.262995246756169], [2.505949758118953, -1.4624984765244131], [4.124444517362934, -0.8449957342683567], [5.300948539338484, -0.968496282719568], [6.360449636240906, -1.326002681317033], [6.360449636240906, -0.32500304695117377], [5.307446162716568, 0.019500487512187806], [4.072448295582389, 0.12999817182929574], [2.3239477471311782, -0.2729992077926948], [1.1409537191554788, -1.4755013406585165], [0.7184558520213006, -3.4319943936098403], [1.1019527441311032, -5.395000304695118], [2.1809543285457136, -6.655996282719569], [3.7994567051676293, -7.097994637365934]], \"i\": [[0, 0], [-0.4290005687642191, -0.2600014219105473], [-0.22966394472361795, -0.4723332927073187], [0, -0.6326587852196304], [0, 0], [0, 0], [-0.3856627665691641, -0.411668494837371], [-0.69333373959349, 0], [-0.34233512087802254, 0.08233369896747422], [-0.3639989437235931, 0.15600390009750242], [0, 0], [0.34666686979674477, -0.07366512287807196], [0.47666504162604095, 0], [0.506997440561014, 0.2686649197479937], [0.281665244756119, 0.5330031688292207], [0, 0.7713255331383286], [-0.25566459473986836, 0.5459984155853892], [-0.4636697948698716, 0.29466556976424485], [-0.6153317895447388, 0]], \"o\": [[0.5979946373659342, 0], [0.4290005687642182, 0.2600014219105473], [0.22966394472361795, 0.47233329270731783], [0, 0], [0, 0], [0.017337152178804383, 0.7886626853171328], [0.3856627665691641, 0.411668494837371], [0.4420008937723443, 0], [0.34233512087802165, -0.08233369896747411], [0, 0], [-0.35533544588614685, 0.15600390009750242], [-0.34666686979674477, 0.07366512287807195], [-0.6586695917397929, 0], [-0.5069974405610138, -0.26866491974799367], [-0.28166524475611887, -0.5330031688292207], [0, -0.7626721918047954], [0.2556645947398686, -0.5459984155853901], [0.46366979486987203, -0.29466556976424396], [0, 0]]}}}, {\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{b3f5759c-30aa-4352-a4ea-23b71ead28ad}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[3.7864462236555916, -6.162001706292657], [2.4929545113627842, -5.635496160841521], [1.9274556082652068, -4.172997684317108], [5.476452926948174, -4.172997684317108], [5.06045268319208, -5.609498049951249], [3.7864462236555916, -6.162001706292657]], \"i\": [[0, 0], [0.3163344708617717, -0.3510036969674246], [0.06066479786994661, -0.6239952873821846], [0, 0], [0.2686699979999494, 0.36833577089427205], [0.5806676416910426, 0]], \"o\": [[-0.5459933373334334, 0], [-0.3163344708617717, 0.3510036969674246], [0, 0], [-0.008663497837446243, -0.5893311395284879], [-0.2686699979999503, -0.36833577089427205], [0, 0]]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 16]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{e16b0057-203a-4dab-8e5b-495775987f85}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{07bcfe04-40c2-4636-807c-d64982f7a44d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{0de90988-3e53-4e7a-8a7d-cb147d0c42b5}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{22460e65-f67b-48b8-844b-e361867d003b}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[5.645452073801845, -1.923997318682967], [4.891453536338409, -0.39000213286582164], [2.8634485393384836, 0.12999817182929574], [1.608957802070052, 0.013002864134103353], [0.679454876996925, -0.311992565439136], [0.679454876996925, -1.3519931748293708], [1.6869521347408687, -0.968496282719568], [2.8894542676066903, -0.7929995124878122], [4.150450245631141, -1.0724963436585915], [4.540444761119028, -1.820004875121878], [4.3974513425335635, -2.2880013406585165], [3.8839562785944652, -2.7040015844146104], [2.824447564314108, -3.171998049951249], [1.6674516472286809, -3.6919983546463664], [0.9264559738993475, -4.315998720280507], [0.666459630240756, -5.251999268731718], [1.3879548160579016, -6.616995307695193], [3.2794487830945775, -7.097994637365934], [4.468948051826296, -6.9744940889147236], [5.502443420460512, -6.629998171829296], [5.1124489049726245, -5.719995734268357], [4.189443603277582, -6.031995917085427], [3.2014468330458263, -6.162001706292657], [2.128950489387235, -5.934501096902423], [1.7584564614115354, -5.316990737268432], [1.9274556082652068, -4.82950140159754], [2.4929545113627842, -4.439499268731718], [3.552455608265207, -3.9910032907072677], [4.683453414460362, -3.4839982327683194], [5.398450976899423, -2.853500243756094], [5.645452073801845, -1.923997318682967]], \"i\": [[0, 0], [0.5026656916422914, -0.346666869796745], [0.8493376396909924, 0], [0.35099861871546767, 0.07799687179679493], [0.26866999799995006, 0.13866674791869799], [0, 0], [-0.3943313426585666, -0.11699784682117054], [-0.4073367459186481, 0], [-0.2599963436585919, 0.18633122078051945], [0, 0.31200780019500485], [0.09532894572364281, 0.13866674791869782], [0.2470010969024221, 0.13866674791869782], [0.45933804595114847, 0.17333089577239447], [0.32066621978049437, 0.17333597402435075], [0.17333089577239413, 0.24266426973174227], [0, 0.38133609590239725], [-0.48099679054476374, 0.32066621978049437], [-0.779999187479687, 0], [-0.36833577089427294, -0.08233369896747345], [-0.32066114152853853, -0.14733024575614362], [0, 0], [0.32066621978049437, 0.08667052613815329], [0.3379982937073427, 0], [0.24699601865046583, -0.15166707292682258], [0, -0.2600065001625049], [-0.11266609790244764, -0.13433499899997603], [-0.26433317082927044, -0.12566642291057306], [-0.4420008937723443, -0.17333089577239447], [-0.3119976436910923, -0.1733359740243503], [-0.16466739793494867, -0.24699601865046628], [0, -0.3726725980649519]], \"o\": [[0, 0.6759965874146854], [-0.5026656916422914, 0.3466668697967449], [-0.4853285394634863, 0], [-0.3509986187154679, -0.07799687179679493], [0, 0], [0.27733349583739597, 0.13866674791869804], [0.3943313426585664, 0.11699784682117043], [0.5806676416910421, 0], [0.2599963436585915, -0.18633122078051967], [0, -0.17333089577239424], [-0.09532894572364281, -0.13866674791869826], [-0.24700109690242256, -0.13866674791869826], [-0.45066439160979055, -0.17333089577239447], [-0.3206662197804946, -0.1733359740243503], [-0.17333089577239436, -0.24266426973174315], [0, -0.5893311395284879], [0.4809967905447634, -0.3206662197804935], [0.4246637415935397, 0], [0.36833577089427205, 0.08233369896747433], [0, 0], [-0.2946706480162007, -0.12132959573989321], [-0.3206662197804948, -0.08667052613815329], [-0.4680015437885947, 0], [-0.2469960186504665, 0.15166707292682347], [0, 0.1906578914472865], [0.11266609790244786, 0.13433499899997514], [0.26433317082927044, 0.12566642291057306], [0.44200089377234475, 0.16466739793494822], [0.3119976436910914, 0.17333597402435075], [0.16466739793494867, 0.24699601865046583], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 496]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{a5276bb6-4d7c-4b4f-b371-a0e14a279176}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"Gradient\", \"mn\": \"{9df3ba96-24a3-412e-abd4-e64e2e76e6df}\", \"it\": [{\"ty\": \"rc\", \"nm\": \"Rectangle\", \"mn\": \"{20934ad0-1c22-4752-a5b1-be99889ea79a}\", \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [512, 512]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"gf\", \"nm\": \"Gradient Fill\", \"o\": {\"a\": 0, \"k\": 100}, \"r\": 1, \"s\": {\"a\": 0, \"k\": [256, 496]}, \"e\": {\"a\": 0, \"k\": [256, 16]}, \"t\": 1, \"h\": {\"a\": 0, \"k\": 0}, \"a\": {\"a\": 0, \"k\": 0}, \"g\": {\"p\": 3, \"k\": {\"a\": 0, \"k\": [0, 0.7686274509803922, 0.8509803921568627, 0.9607843137254902, 0.5, 0.19600213626306554, 0.31400015259021896, 0.6899977111467155, 1, 0.16099794003204396, 0.18399328603036547, 0.45900663767452504, 0, 1, 0.5, 1, 1, 1]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"p\": {\"a\": 0, \"k\": [257.4805970149254, 255.76119402985074]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var gradient = lottie.layers[1].shapes[0].it[1]; var start_marker = lottie.layers[0].shapes[1].it[1]; var end_marker = lottie.layers[0].shapes[0].it[1]; gradient.s.k = start_marker.p.k = [data[\"Start X\"], data[\"Start Y\"]]; gradient.e.k = end_marker.p.k = [data[\"End X\"], data[\"End Y\"]]; gradient.t = Number(data[\"Type\"]); if (gradient.t === 2) { gradient.h = { a: 0, k: data[\"Highlight\"] }; gradient.a = { a: 0, k: data[\"Highlight Angle\"] }; } else { delete gradient.h; delete gradient.a; } this.json_viewer_contents = lottie.layers[1].shapes[0].it[1]; }, {} );","title":"Gradient Fill"},{"location":"specs/shapes/#gradient-stroke","text":"Gradient stroke Composition Diagram for Gradient Stroke Gradient Stroke Shape Style Base Stroke Base Gradient Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'gs' Shape Type Shape Type o Scalar Opacity Opacity, 100 means fully opaque lc Line Cap Line Cap Line Cap lj Line Join Line Join Line Join ml number Miter Limit Miter Limit ml2 Scalar Miter Limit Animatable alternative to ml w Scalar Width Stroke width d array of Stroke Dash Dashes Dashed line definition g Gradient Colors Gradient colors s Position Start Point Starting point for the gradient e Position End Point End point for the gradient t Gradient Type Gradient Type Type of the gradient h Scalar Highlight Length Highlight Length, as a percentage between s and e a Scalar Highlight Angle Highlight Angle in clockwise degrees, relative to the direction from s to e Example Start X 256 Start Y 496 End X 256 End Y 16 Type Linear Radial Highlight 0 Highlight Angle 0 var lottie_player_27 = new PlaygroundPlayer( 27, 'playground_27_8', 'lottie_target_27', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 1, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Start/End markers\", \"mn\": \"{04a8ef87-75fd-451c-868b-7413969c8ad9}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{078a0bf7-08ce-49f7-9dca-c473ad9ff09d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{efb1ff36-fe2b-4939-97a5-d75a167d003b}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"e\", \"mn\": \"{759da60a-0439-496c-89a9-66e1d721ceb7}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"\", \"mn\": \"{b56ba91b-5ef9-40d2-a1da-27265d105c7a}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{020e377d-646e-45f6-830f-756cfff57aa9}\", \"ks\": {\"a\": 0, \"k\": {\"c\": true, \"v\": [[3.7994567051676293, -7.097994637365934], [5.33994951436286, -6.707992504500113], [6.327946284594615, -5.609490432573314], [6.672442201680043, -3.952002315682892], [6.672442201680043, -3.262995246756169], [1.901449879997, -3.262995246756169], [2.505949758118953, -1.4624984765244131], [4.124444517362934, -0.8449957342683567], [5.300948539338484, -0.968496282719568], [6.360449636240906, -1.326002681317033], [6.360449636240906, -0.32500304695117377], [5.307446162716568, 0.019500487512187806], [4.072448295582389, 0.12999817182929574], [2.3239477471311782, -0.2729992077926948], [1.1409537191554788, -1.4755013406585165], [0.7184558520213006, -3.4319943936098403], [1.1019527441311032, -5.395000304695118], [2.1809543285457136, -6.655996282719569], [3.7994567051676293, -7.097994637365934]], \"i\": [[0, 0], [-0.4290005687642191, -0.2600014219105473], [-0.22966394472361795, -0.4723332927073187], [0, -0.6326587852196304], [0, 0], [0, 0], [-0.3856627665691641, -0.411668494837371], [-0.69333373959349, 0], [-0.34233512087802254, 0.08233369896747422], [-0.3639989437235931, 0.15600390009750242], [0, 0], [0.34666686979674477, -0.07366512287807196], [0.47666504162604095, 0], [0.506997440561014, 0.2686649197479937], [0.281665244756119, 0.5330031688292207], [0, 0.7713255331383286], [-0.25566459473986836, 0.5459984155853892], [-0.4636697948698716, 0.29466556976424485], [-0.6153317895447388, 0]], \"o\": [[0.5979946373659342, 0], [0.4290005687642182, 0.2600014219105473], [0.22966394472361795, 0.47233329270731783], [0, 0], [0, 0], [0.017337152178804383, 0.7886626853171328], [0.3856627665691641, 0.411668494837371], [0.4420008937723443, 0], [0.34233512087802165, -0.08233369896747411], [0, 0], [-0.35533544588614685, 0.15600390009750242], [-0.34666686979674477, 0.07366512287807195], [-0.6586695917397929, 0], [-0.5069974405610138, -0.26866491974799367], [-0.28166524475611887, -0.5330031688292207], [0, -0.7626721918047954], [0.2556645947398686, -0.5459984155853901], [0.46366979486987203, -0.29466556976424396], [0, 0]]}}}, {\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{b3f5759c-30aa-4352-a4ea-23b71ead28ad}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[3.7864462236555916, -6.162001706292657], [2.4929545113627842, -5.635496160841521], [1.9274556082652068, -4.172997684317108], [5.476452926948174, -4.172997684317108], [5.06045268319208, -5.609498049951249], [3.7864462236555916, -6.162001706292657]], \"i\": [[0, 0], [0.3163344708617717, -0.3510036969674246], [0.06066479786994661, -0.6239952873821846], [0, 0], [0.2686699979999494, 0.36833577089427205], [0.5806676416910426, 0]], \"o\": [[-0.5459933373334334, 0], [-0.3163344708617717, 0.3510036969674246], [0, 0], [-0.008663497837446243, -0.5893311395284879], [-0.2686699979999503, -0.36833577089427205], [0, 0]]}}}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 16]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{e16b0057-203a-4dab-8e5b-495775987f85}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{07bcfe04-40c2-4636-807c-d64982f7a44d}\", \"it\": [{\"ty\": \"gr\", \"nm\": \"s\", \"mn\": \"{0de90988-3e53-4e7a-8a7d-cb147d0c42b5}\", \"it\": [{\"ty\": \"sh\", \"nm\": \"\", \"mn\": \"{22460e65-f67b-48b8-844b-e361867d003b}\", \"ks\": {\"a\": 0, \"k\": {\"c\": false, \"v\": [[5.645452073801845, -1.923997318682967], [4.891453536338409, -0.39000213286582164], [2.8634485393384836, 0.12999817182929574], [1.608957802070052, 0.013002864134103353], [0.679454876996925, -0.311992565439136], [0.679454876996925, -1.3519931748293708], [1.6869521347408687, -0.968496282719568], [2.8894542676066903, -0.7929995124878122], [4.150450245631141, -1.0724963436585915], [4.540444761119028, -1.820004875121878], [4.3974513425335635, -2.2880013406585165], [3.8839562785944652, -2.7040015844146104], [2.824447564314108, -3.171998049951249], [1.6674516472286809, -3.6919983546463664], [0.9264559738993475, -4.315998720280507], [0.666459630240756, -5.251999268731718], [1.3879548160579016, -6.616995307695193], [3.2794487830945775, -7.097994637365934], [4.468948051826296, -6.9744940889147236], [5.502443420460512, -6.629998171829296], [5.1124489049726245, -5.719995734268357], [4.189443603277582, -6.031995917085427], [3.2014468330458263, -6.162001706292657], [2.128950489387235, -5.934501096902423], [1.7584564614115354, -5.316990737268432], [1.9274556082652068, -4.82950140159754], [2.4929545113627842, -4.439499268731718], [3.552455608265207, -3.9910032907072677], [4.683453414460362, -3.4839982327683194], [5.398450976899423, -2.853500243756094], [5.645452073801845, -1.923997318682967]], \"i\": [[0, 0], [0.5026656916422914, -0.346666869796745], [0.8493376396909924, 0], [0.35099861871546767, 0.07799687179679493], [0.26866999799995006, 0.13866674791869799], [0, 0], [-0.3943313426585666, -0.11699784682117054], [-0.4073367459186481, 0], [-0.2599963436585919, 0.18633122078051945], [0, 0.31200780019500485], [0.09532894572364281, 0.13866674791869782], [0.2470010969024221, 0.13866674791869782], [0.45933804595114847, 0.17333089577239447], [0.32066621978049437, 0.17333597402435075], [0.17333089577239413, 0.24266426973174227], [0, 0.38133609590239725], [-0.48099679054476374, 0.32066621978049437], [-0.779999187479687, 0], [-0.36833577089427294, -0.08233369896747345], [-0.32066114152853853, -0.14733024575614362], [0, 0], [0.32066621978049437, 0.08667052613815329], [0.3379982937073427, 0], [0.24699601865046583, -0.15166707292682258], [0, -0.2600065001625049], [-0.11266609790244764, -0.13433499899997603], [-0.26433317082927044, -0.12566642291057306], [-0.4420008937723443, -0.17333089577239447], [-0.3119976436910923, -0.1733359740243503], [-0.16466739793494867, -0.24699601865046628], [0, -0.3726725980649519]], \"o\": [[0, 0.6759965874146854], [-0.5026656916422914, 0.3466668697967449], [-0.4853285394634863, 0], [-0.3509986187154679, -0.07799687179679493], [0, 0], [0.27733349583739597, 0.13866674791869804], [0.3943313426585664, 0.11699784682117043], [0.5806676416910421, 0], [0.2599963436585915, -0.18633122078051967], [0, -0.17333089577239424], [-0.09532894572364281, -0.13866674791869826], [-0.24700109690242256, -0.13866674791869826], [-0.45066439160979055, -0.17333089577239447], [-0.3206662197804946, -0.1733359740243503], [-0.17333089577239436, -0.24266426973174315], [0, -0.5893311395284879], [0.4809967905447634, -0.3206662197804935], [0.4246637415935397, 0], [0.36833577089427205, 0.08233369896747433], [0, 0], [-0.2946706480162007, -0.12132959573989321], [-0.3206662197804948, -0.08667052613815329], [-0.4680015437885947, 0], [-0.2469960186504665, 0.15166707292682347], [0, 0.1906578914472865], [0.11266609790244786, 0.13433499899997514], [0.26433317082927044, 0.12566642291057306], [0.44200089377234475, 0.16466739793494822], [0.3119976436910914, 0.17333597402435075], [0.16466739793494867, 0.24699601865046583], [0, 0]]}}}, {\"ty\": \"fl\", \"nm\": \"Fill 1\", \"mn\": \"{2fcb588a-7de7-4cba-8508-46952f160940}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [0.9411764705882353, 0.11372549019607843, 0.0392156862745098]}, \"r\": 1}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [0, 0]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [-2.7166567164177735, 3.822454790113566]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}, {\"ty\": \"tr\", \"a\": {\"a\": 0, \"k\": [0, 0]}, \"p\": {\"a\": 0, \"k\": [256, 496]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}]}]}, {\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [249.3134328358209, 254.47164179104476]}, \"or\": {\"a\": 0, \"k\": 200}, \"ir\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"gs\", \"nm\": \"Stroke\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.98, 0.28]}, \"lc\": 2, \"lj\": 2, \"ml\": 3, \"w\": {\"a\": 0, \"k\": 30}, \"d\": [{\"n\": \"o\", \"nm\": \"offset\", \"v\": {\"a\": 0, \"k\": 0}}, {\"n\": \"d\", \"nm\": \"dash\", \"v\": {\"a\": 0, \"k\": 100}}, {\"n\": \"g\", \"nm\": \"gap\", \"v\": {\"a\": 0, \"k\": 0}}], \"r\": 1, \"s\": {\"a\": 0, \"k\": [256, 496]}, \"e\": {\"a\": 0, \"k\": [256, 16]}, \"t\": 1, \"h\": {\"a\": 0, \"k\": 0}, \"a\": {\"a\": 0, \"k\": 0}, \"g\": {\"p\": 3, \"k\": {\"a\": 0, \"k\": [0, 0.7686274509803922, 0.8509803921568627, 0.9607843137254902, 0.5, 0.19600213626306554, 0.31400015259021896, 0.6899977111467155, 1, 0.16099794003204396, 0.18399328603036547, 0.45900663767452504, 0, 1, 0.5, 1, 1, 1]}}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { var gradient = lottie.layers[1].shapes[1]; var start_marker = lottie.layers[0].shapes[1].it[1]; var end_marker = lottie.layers[0].shapes[0].it[1]; gradient.s.k = start_marker.p.k = [data[\"Start X\"], data[\"Start Y\"]]; gradient.e.k = end_marker.p.k = [data[\"End X\"], data[\"End Y\"]]; gradient.t = Number(data[\"Type\"]); if (gradient.t === 2) { gradient.h = { a: 0, k: data[\"Highlight\"] }; gradient.a = { a: 0, k: data[\"Highlight Angle\"] }; } else { delete gradient.h; delete gradient.a; } this.json_viewer_contents = lottie.layers[1].shapes[1]; }, {} );","title":"Gradient Stroke"},{"location":"specs/shapes/#modifier","text":"Modifiers change the bezier curves of neighbouring shapes Modifiers replace shapes in the render stack by applying operating on the bezier path of to the collected shapes that come before it in stacking order .","title":"Modifiers"},{"location":"specs/shapes/#trim-path","text":"Trims shapes into a segment Composition Diagram for Trim Path Trim Path Modifier Graphic Element Visual Object Attribute Type Title Description nm string Name Human readable name, as seen from editors and the like hd boolean Hidden Whether the shape is hidden ty string = 'tm' Shape Type Shape Type s Scalar Start Segment start e Scalar End Segment end o Scalar Offset Offset m Trim Multiple Shapes Multiple How to treat multiple copies Start 0 End 50 Offset 0 Multiple Shapes Parallel Sequential var lottie_player_28 = new PlaygroundPlayer( 28, 'playground_28_5', 'lottie_target_28', {\"v\": \"5.7.1\", \"ip\": 0, \"op\": 180, \"nm\": \"Animation\", \"mn\": \"{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}\", \"fr\": 60, \"w\": 512, \"h\": 512, \"assets\": [], \"layers\": [{\"ddd\": 0, \"ty\": 4, \"ind\": 0, \"st\": 0, \"ip\": 0, \"op\": 180, \"nm\": \"Layer\", \"mn\": \"{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}\", \"ks\": {\"a\": {\"a\": 0, \"k\": [256, 256]}, \"p\": {\"a\": 0, \"k\": [256, 256]}, \"s\": {\"a\": 0, \"k\": [100, 100]}, \"r\": {\"a\": 0, \"k\": 0}, \"o\": {\"a\": 0, \"k\": 100}}, \"shapes\": [{\"ty\": \"sr\", \"nm\": \"PolyStar\", \"mn\": \"{57cff206-c227-4a14-a679-195157be886b}\", \"p\": {\"a\": 0, \"k\": [128, 128]}, \"or\": {\"a\": 0, \"k\": 100}, \"ir\": {\"a\": 0, \"k\": 50}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 5}, \"sy\": 1, \"os\": {\"a\": 0, \"k\": 0}, \"is\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"el\", \"nm\": \"Ellipse\", \"p\": {\"a\": 0, \"k\": [384, 128]}, \"s\": {\"a\": 0, \"k\": [200, 200]}}, {\"ty\": \"rc\", \"nm\": \"Rect\", \"mn\": \"{0776f2df-2619-415c-b10d-f648f2edfa0f}\", \"d\": 1, \"p\": {\"a\": 0, \"k\": [128, 384]}, \"s\": {\"a\": 0, \"k\": [200, 200]}, \"r\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"sr\", \"nm\": \"Triangle\", \"mn\": \"{db373594-d0ae-44ff-9295-30ff72616af2}\", \"p\": {\"a\": 0, \"k\": [384, 384]}, \"or\": {\"a\": 0, \"k\": 100}, \"r\": {\"a\": 0, \"k\": 0}, \"pt\": {\"a\": 0, \"k\": 3}, \"sy\": 2, \"os\": {\"a\": 0, \"k\": 0}}, {\"ty\": \"tm\", \"nm\": \"Trim Path\", \"s\": {\"a\": 0, \"k\": 0}, \"e\": {\"a\": 0, \"k\": 50}, \"o\": {\"a\": 0, \"k\": 0}, \"m\": 1}, {\"ty\": \"st\", \"nm\": \"Stroke\", \"mn\": \"{0930ce27-c8f9-4371-b0cf-111a859abfaf}\", \"o\": {\"a\": 0, \"k\": 100}, \"c\": {\"a\": 0, \"k\": [1, 0.9803921568627451, 0.2823529411764706]}, \"lc\": 2, \"lj\": 2, \"ml\": 0, \"w\": {\"a\": 0, \"k\": 20}}]}], \"meta\": {\"g\": \"Glaxnimate 0.4.6-32-gb62899be\"}}, function (lottie, data) { lottie.layers[0].shapes[4].s.k = data[\"Start\"]; lottie.layers[0].shapes[4].e.k = data[\"End\"]; lottie.layers[0].shapes[4].o.k = data[\"Offset\"]; lottie.layers[0].shapes[4].m = Number(data[\"Multiple Shapes\"]); this.json_viewer_contents = lottie.layers[0].shapes[4]; }, {} ); When rendering trim path, the order of bezier points MUST be the same as rendering instructions given for each shape in this section. Rendering trim path can be rather complex. Given o f f s e t = { o 360 \u2212 \u230a o 360 \u230b o \u2265 0 o 360 \u2212 \u2308 o 360 \u2309 o < 0 s t a r t = o f f s e t + min ( 1 , max ( 0 , min ( s , e ) 100 ) ) e n d = o f f s e t + min ( 1 , max ( 0 , max ( s , e ) 100 ) ) If s and e are equal, implementations MUST NOT render any shapes. If s = 0 and e = 1 , the input shape MUST be rendered as-is. To render trim path, implementations MUST consider the actual length of each shape (they MAY use approximations). Once the shapes are collected, the segment to render is given by the percentages s t a r t and e n d . When trim path is applied to multiple shapes, the m property MUST be considered when applying the modifier: When m has a value of 1 (Parallel), each shape MUST considered separately, s t a r t and e n d being applied to each shape. When m has a value of 2 (Sequential), all the shapes MUST be considered as following each other in render order. s t a r t and e n d refer to the whole length created by concatenating each shape.","title":"Trim Path"},{"location":"specs/values/","text":"Values Integer Boolean Represents boolean values as an integer. `0` is false, `1` is true. Vector Vector data is represented by an array of numbers. This is used any time a property with multiple components is needed. An example would be a position, which would be represented as an array with two numbers, the first corresponding to the X coordinate and the second corresponding to the Y . Color Colors are Vectors with values between 0 and 1 for the RGB components. For example: [1, 0, 0] [1, 0.5, 0] Note: sometimes you might find color values with 4 components (the 4th being alpha) but most players ignore the last component. Hex Color Colors represented as a \"#\"-prefixed string, with two hexadecimal digits per RGB component. #FF8000 Gradient The gradient appearance is specified in terms of color stops and opacity stops. Color stops are defined as (position, color) tuples, where the position is a normalized [0..1] value along the gradient axis [startpoint -> endpoint] , and the color is 3 floats representing the RGB components. Transparency (opacity) stops are defined as (position, color) tuples, where position is similar to color stops' position. All color and opacity stops are stored sequentially by ascending offsets in a flattened float array (color stops followed by opacity stops), with 4 floats per color stop and 2 floats per opacity stops. Thus, given color stops and opacity stops, the expected size for the gradient data array is 4 * Nc + 2 * No . The color stop count is typically specified in a separate field from the gradient values, while the count of opacity stops can be inferred from the data array length: No = (length - 4 * Nc)/2 . Gradient without transparency So let's say you want these colors: [0.16, 0.18, 0.46] [0.2, 0.31, 0.69] [0.77, 0.85, 0.96] the array will look like the following: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96] Value Description 0 Offset of the 1st color ( 0 means at the start) 0.16 Red component for the 1st color 0.18 Green component for the 1st color 0.46 Blue component for the 1st color 0.5 Offset of the 2nd color ( 0.5 means half way) 0.2 Red component for the 2nd color 0.31 Green component for the 2nd color 0.69 Blue component for the 2nd color 1 Offset of the 3rd color ( 1 means at the end) 0.77 Red component for the 3rd color 0.85 Green component for the 3rd color 0.96 Blue component for the 3rd color Gradient with transparency Transparency stops are added at the end. Transparency stops may or may not match the count and offset of color stops. So assume the same colors as before, but opacity of 80% for the first color and 100% for the other two. The array will look like this: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1] It's the same array as the case without transparency but with the following values added at the end: Value Description 0 Offset of the 1st color ( 0 means at the start) 0.8 Alpha component for the 1st color 0.5 Offset of the 2nd color ( 0.5 means half way) 0.2 Alpha component for the 2nd color 1 Offset of the 3rd color ( 1 means at the end) 1 Alpha component for the 3rd color Gradient Example GradientPreviewEditor.stand_alone(document.getElementById(\"editor_29\"), (lottie) => { var raw_json = JSON.stringify(lottie, undefined, 4); var pretty_json = hljs.highlight(\"json\", raw_json).value; document.getElementById(\"json_viewer_29\").innerHTML = pretty_json; }, ); Bezier Shape Cubic polybezier Attribute Type Title Description c boolean Closed Closed i array of Vector In Tangents Array of points, each point is an array of coordinates. These points are along the in tangents relative to the corresponding v . o array of Vector Out Tangents Array of points, each point is an array of coordinates. These points are along the out tangents relative to the corresponding v . v array of Vector Vertices Array of points, each point is an array of coordinates. These points are along the bezier path BezierPreviewEditor.stand_alone(document.getElementById(\"editor_30\"), (lottie) => { var raw_json = JSON.stringify(lottie, undefined, 4); var pretty_json = hljs.highlight(\"json\", raw_json).value; document.getElementById(\"json_viewer_30\").innerHTML = pretty_json; }, ); Data URL Data URLs are embedded files (such as images) as defined in [ RFC2397 ] .","title":"Values"},{"location":"specs/values/#values","text":"","title":"Values"},{"location":"specs/values/#int-boolean","text":"Represents boolean values as an integer. `0` is false, `1` is true.","title":"Integer Boolean"},{"location":"specs/values/#vector","text":"Vector data is represented by an array of numbers. This is used any time a property with multiple components is needed. An example would be a position, which would be represented as an array with two numbers, the first corresponding to the X coordinate and the second corresponding to the Y .","title":"Vector"},{"location":"specs/values/#color","text":"Colors are Vectors with values between 0 and 1 for the RGB components. For example: [1, 0, 0] [1, 0.5, 0] Note: sometimes you might find color values with 4 components (the 4th being alpha) but most players ignore the last component.","title":"Color"},{"location":"specs/values/#hexcolor","text":"Colors represented as a \"#\"-prefixed string, with two hexadecimal digits per RGB component. #FF8000","title":"Hex Color"},{"location":"specs/values/#gradient","text":"The gradient appearance is specified in terms of color stops and opacity stops. Color stops are defined as (position, color) tuples, where the position is a normalized [0..1] value along the gradient axis [startpoint -> endpoint] , and the color is 3 floats representing the RGB components. Transparency (opacity) stops are defined as (position, color) tuples, where position is similar to color stops' position. All color and opacity stops are stored sequentially by ascending offsets in a flattened float array (color stops followed by opacity stops), with 4 floats per color stop and 2 floats per opacity stops. Thus, given color stops and opacity stops, the expected size for the gradient data array is 4 * Nc + 2 * No . The color stop count is typically specified in a separate field from the gradient values, while the count of opacity stops can be inferred from the data array length: No = (length - 4 * Nc)/2 .","title":"Gradient"},{"location":"specs/values/#gradient-without-transparency","text":"So let's say you want these colors: [0.16, 0.18, 0.46] [0.2, 0.31, 0.69] [0.77, 0.85, 0.96] the array will look like the following: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96] Value Description 0 Offset of the 1st color ( 0 means at the start) 0.16 Red component for the 1st color 0.18 Green component for the 1st color 0.46 Blue component for the 1st color 0.5 Offset of the 2nd color ( 0.5 means half way) 0.2 Red component for the 2nd color 0.31 Green component for the 2nd color 0.69 Blue component for the 2nd color 1 Offset of the 3rd color ( 1 means at the end) 0.77 Red component for the 3rd color 0.85 Green component for the 3rd color 0.96 Blue component for the 3rd color","title":"Gradient without transparency"},{"location":"specs/values/#gradient-with-transparency","text":"Transparency stops are added at the end. Transparency stops may or may not match the count and offset of color stops. So assume the same colors as before, but opacity of 80% for the first color and 100% for the other two. The array will look like this: [0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1] It's the same array as the case without transparency but with the following values added at the end: Value Description 0 Offset of the 1st color ( 0 means at the start) 0.8 Alpha component for the 1st color 0.5 Offset of the 2nd color ( 0.5 means half way) 0.2 Alpha component for the 2nd color 1 Offset of the 3rd color ( 1 means at the end) 1 Alpha component for the 3rd color","title":"Gradient with transparency"},{"location":"specs/values/#gradient-example","text":"GradientPreviewEditor.stand_alone(document.getElementById(\"editor_29\"), (lottie) => { var raw_json = JSON.stringify(lottie, undefined, 4); var pretty_json = hljs.highlight(\"json\", raw_json).value; document.getElementById(\"json_viewer_29\").innerHTML = pretty_json; }, );","title":"Gradient Example"},{"location":"specs/values/#bezier","text":"Cubic polybezier Attribute Type Title Description c boolean Closed Closed i array of Vector In Tangents Array of points, each point is an array of coordinates. These points are along the in tangents relative to the corresponding v . o array of Vector Out Tangents Array of points, each point is an array of coordinates. These points are along the out tangents relative to the corresponding v . v array of Vector Vertices Array of points, each point is an array of coordinates. These points are along the bezier path BezierPreviewEditor.stand_alone(document.getElementById(\"editor_30\"), (lottie) => { var raw_json = JSON.stringify(lottie, undefined, 4); var pretty_json = hljs.highlight(\"json\", raw_json).value; document.getElementById(\"json_viewer_30\").innerHTML = pretty_json; }, );","title":"Bezier Shape"},{"location":"specs/values/#data-url","text":"Data URLs are embedded files (such as images) as defined in [ RFC2397 ] .","title":"Data URL"},{"location":"validator/","text":"Lottie Validator .hidden { display: none !important; } textarea { display: block; width: 100%; min-height: 500px; font-family: monospace; tab-size: 4; } #error-out td:first-child { font-family: monospace; } .tabs { display: flex; gap: 5px; padding: 0; margin: 0; list-style: none; } .tabs li { display: flex; } .tabs a { border-radius: 5px 5px 0 0; padding: 10px; text-decoration: none !important; background-color: #ccc; } .tabs a:not(.active) { cursor: pointer; } .tabs a.active, .tab-content { background-color: #eee; } .tab-content { padding: 1em; } .tab-content input:not([type=\"checkbox\"]) { width: 100%; } .tab-content label { display: block; } .validate-button { margin: 1em auto 0; display: block; } #tab-content-upload { border: 1px solid black; margin: 20px auto; padding: 60px; box-sizing: border-box; text-align: center; border-radius: 5px; position: relative; background: #fff; } #tab-content-upload input { position: absolute; width: 100%; height: 100%; opacity: 0; left: 0px; top: 0px; cursor: pointer; } #error-out.hide-warning-property .warning-property, #error-out.hide-warning-type .warning-type { display: none; } Loading the JSON schema... Could not load the JSON schema. Validate by URL Validate by File Upload Validate by Direct Input Options Validate Drop a JSON file or click to browse Validate Warn about unknown object types Warn about unknown properties Path Named Path Severity Message Docs function show_element(element) { element.classList.remove(\"hidden\") } function hide_element(element) { element.classList.add(\"hidden\") } function on_load_error(err) { hide_element(document.getElementById(\"system-loading\")); show_element(document.getElementById(\"system-error\")); console.error(err); } function on_load_ok(schema_obj) { validator = new Validator(ajv2020.Ajv2020, schema_obj, base_url); hide_element(document.getElementById(\"system-loading\")); show_element(document.getElementById(\"validator-container\")); } function show_errors(errors) { var container = document.getElementById(\"error-out\"); container.classList.remove(\"table-striped\"); if ( errors.length == 0 ) { hide_element(container); return; } show_element(container); var body = container.querySelector(\"tbody\"); body.innerHTML = \"\"; for ( let error of errors ) { let tr = body.appendChild(document.createElement(\"tr\")); tr.classList.add(error.type == \"error\" ? \"danger\" : error.type); if ( error.type == \"warning\" ) tr.classList.add(\"warning-\" + error.warning); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.path ?? \"\")); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.path_names ? error.path_names.map(n => n ?? \"(unnamed)\").join(' > ') : \"\")); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.type)); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.message)); let td = tr.appendChild(document.createElement(\"td\")); if ( error.docs ) { let link = td.appendChild(document.createElement(\"a\")); link.setAttribute(\"href\", error.docs); link.appendChild(document.createTextNode(error.name)); } } } function validate_string(value) { var errors = validator.validate(value); if ( !errors.some(e => e.type == \"error\") ) errors.unshift({ type: \"success\", message: \"Validation successful with no errors\" }); show_errors(errors); } function on_file_input(ev) { const files = ev.target.files; if ( files.length > 0 ) { show_errors([]); validate_file(files[0]); } else { show_errors([{ \"type\": \"error\", \"message\": \"No file selected\" }]); } } function validate_file(file) { const reader = new FileReader(); reader.onload = function (e) { validate_string(e.target.result); }; reader.onerror = e => show_errors([{ \"type\": \"error\", \"message\": \"Could not load file\" }]) reader.readAsText(file); } function validate_url(url) { fetch(url).then(r => r.text()).then(validate_string).catch(e => show_errors([{ type: \"error\", message: \"Failed to load from URL\", }])); } function initialize() { fetch(base_url + \"/lottie.schema.json\").then(response => { if ( !response.ok ) throw new Error(\"Request failed\"); return response.json(); }).then(json => on_load_ok(json)).catch(e => on_load_error(e)); update_filters(); } function tab_click(tab) { let id = tab.id.replace(\"head\", \"content\"); document.querySelectorAll(\"#tab-content > div\").forEach(element => { if ( element.id == id ) show_element(element); else hide_element(element); }); document.querySelectorAll(\".tabs a\").forEach(element => { if ( element !== tab ) element.classList.remove(\"active\"); else element.classList.add(\"active\"); }) } function update_filters() { let container = document.getElementById(\"error-out\"); for ( let type of [\"property\", \"type\"] ) { if ( document.getElementById(\"check-warning-\" + type).checked ) container.classList.remove(\"hide-warning-\" + type) else container.classList.add(\"hide-warning-\" + type) } } var validator; initialize();","title":"Lottie Validator"},{"location":"validator/#lottie-validator","text":".hidden { display: none !important; } textarea { display: block; width: 100%; min-height: 500px; font-family: monospace; tab-size: 4; } #error-out td:first-child { font-family: monospace; } .tabs { display: flex; gap: 5px; padding: 0; margin: 0; list-style: none; } .tabs li { display: flex; } .tabs a { border-radius: 5px 5px 0 0; padding: 10px; text-decoration: none !important; background-color: #ccc; } .tabs a:not(.active) { cursor: pointer; } .tabs a.active, .tab-content { background-color: #eee; } .tab-content { padding: 1em; } .tab-content input:not([type=\"checkbox\"]) { width: 100%; } .tab-content label { display: block; } .validate-button { margin: 1em auto 0; display: block; } #tab-content-upload { border: 1px solid black; margin: 20px auto; padding: 60px; box-sizing: border-box; text-align: center; border-radius: 5px; position: relative; background: #fff; } #tab-content-upload input { position: absolute; width: 100%; height: 100%; opacity: 0; left: 0px; top: 0px; cursor: pointer; } #error-out.hide-warning-property .warning-property, #error-out.hide-warning-type .warning-type { display: none; } Loading the JSON schema... Could not load the JSON schema. Validate by URL Validate by File Upload Validate by Direct Input Options Validate Drop a JSON file or click to browse Validate Warn about unknown object types Warn about unknown properties Path Named Path Severity Message Docs function show_element(element) { element.classList.remove(\"hidden\") } function hide_element(element) { element.classList.add(\"hidden\") } function on_load_error(err) { hide_element(document.getElementById(\"system-loading\")); show_element(document.getElementById(\"system-error\")); console.error(err); } function on_load_ok(schema_obj) { validator = new Validator(ajv2020.Ajv2020, schema_obj, base_url); hide_element(document.getElementById(\"system-loading\")); show_element(document.getElementById(\"validator-container\")); } function show_errors(errors) { var container = document.getElementById(\"error-out\"); container.classList.remove(\"table-striped\"); if ( errors.length == 0 ) { hide_element(container); return; } show_element(container); var body = container.querySelector(\"tbody\"); body.innerHTML = \"\"; for ( let error of errors ) { let tr = body.appendChild(document.createElement(\"tr\")); tr.classList.add(error.type == \"error\" ? \"danger\" : error.type); if ( error.type == \"warning\" ) tr.classList.add(\"warning-\" + error.warning); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.path ?? \"\")); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.path_names ? error.path_names.map(n => n ?? \"(unnamed)\").join(' > ') : \"\")); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.type)); tr.appendChild(document.createElement(\"td\")).appendChild(document.createTextNode(error.message)); let td = tr.appendChild(document.createElement(\"td\")); if ( error.docs ) { let link = td.appendChild(document.createElement(\"a\")); link.setAttribute(\"href\", error.docs); link.appendChild(document.createTextNode(error.name)); } } } function validate_string(value) { var errors = validator.validate(value); if ( !errors.some(e => e.type == \"error\") ) errors.unshift({ type: \"success\", message: \"Validation successful with no errors\" }); show_errors(errors); } function on_file_input(ev) { const files = ev.target.files; if ( files.length > 0 ) { show_errors([]); validate_file(files[0]); } else { show_errors([{ \"type\": \"error\", \"message\": \"No file selected\" }]); } } function validate_file(file) { const reader = new FileReader(); reader.onload = function (e) { validate_string(e.target.result); }; reader.onerror = e => show_errors([{ \"type\": \"error\", \"message\": \"Could not load file\" }]) reader.readAsText(file); } function validate_url(url) { fetch(url).then(r => r.text()).then(validate_string).catch(e => show_errors([{ type: \"error\", message: \"Failed to load from URL\", }])); } function initialize() { fetch(base_url + \"/lottie.schema.json\").then(response => { if ( !response.ok ) throw new Error(\"Request failed\"); return response.json(); }).then(json => on_load_ok(json)).catch(e => on_load_error(e)); update_filters(); } function tab_click(tab) { let id = tab.id.replace(\"head\", \"content\"); document.querySelectorAll(\"#tab-content > div\").forEach(element => { if ( element.id == id ) show_element(element); else hide_element(element); }); document.querySelectorAll(\".tabs a\").forEach(element => { if ( element !== tab ) element.classList.remove(\"active\"); else element.classList.add(\"active\"); }) } function update_filters() { let container = document.getElementById(\"error-out\"); for ( let type of [\"property\", \"type\"] ) { if ( document.getElementById(\"check-warning-\" + type).checked ) container.classList.remove(\"hide-warning-\" + type) else container.classList.add(\"hide-warning-\" + type) } } var validator; initialize();","title":"Lottie Validator"}]} \ No newline at end of file diff --git a/dev/single-page/index.html b/dev/single-page/index.html index bc5079c..5a429c2 100644 --- a/dev/single-page/index.html +++ b/dev/single-page/index.html @@ -9674,9 +9674,9 @@

Mask

{
     "$schema": "https://json-schema.org/draft/2020-12/schema",
-    "$id": "https://lottie.github.io/lottie-spec/specs/schema/0.1.0",
+    "$id": "https://lottie.github.io/lottie-spec/1.0/specs/schema/",
     "$ref": "#/$defs/composition/animation",
-    "$version": 100,
+    "$version": 10000,
     "$defs": {
         "assets": {
             "precomposition"  : {
@@ -9817,7 +9817,7 @@ 
Mask

                                 "title": "Specification Version",
                                 "description": "Specification version this Lottie is targeting. This is a 6 digit number with version components encoded as MMmmpp, with MM being major version, mm being minor and pp being patch.",
                                 "type": "integer",
-                                "minimum": 100
+                                "minimum": 10000
                             },
                             "fr": {
                                 "title": "Framerate",
diff --git a/dev/sitemap.xml b/dev/sitemap.xml
index 304d07c..b642a39 100644
--- a/dev/sitemap.xml
+++ b/dev/sitemap.xml
@@ -2,107 +2,107 @@
 
     
          https://lottie.github.io/lottie-spec/dev/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/editing/extensions/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/editing/schema/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/governance/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/governance/CONTRIBUTING/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/governance/Code_of_Conduct/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/governance/Community_Specification_License-v1/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/governance/Governance/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/governance/License/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/governance/Notices/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/specs/assets/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/specs/composition/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/specs/constants/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/specs/glossary/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/specs/helpers/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/specs/layers/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/specs/properties/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/specs/schema/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/specs/shapes/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/specs/values/
-         2024-09-10
+         2024-09-17
          daily
     
     
          https://lottie.github.io/lottie-spec/dev/validator/
-         2024-09-10
+         2024-09-17
          daily
     
 
\ No newline at end of file
diff --git a/dev/sitemap.xml.gz b/dev/sitemap.xml.gz
index e12a56e..d08d7df 100644
Binary files a/dev/sitemap.xml.gz and b/dev/sitemap.xml.gz differ
diff --git a/dev/specs/schema/index.html b/dev/specs/schema/index.html
index 8a283db..7a6aecc 100644
--- a/dev/specs/schema/index.html
+++ b/dev/specs/schema/index.html
@@ -288,9 +288,9 @@ 
JSON Schema

 

 
{
     "$schema": "https://json-schema.org/draft/2020-12/schema",
-    "$id": "https://lottie.github.io/lottie-spec/specs/schema/0.1.0",
+    "$id": "https://lottie.github.io/lottie-spec/1.0/specs/schema/",
     "$ref": "#/$defs/composition/animation",
-    "$version": 100,
+    "$version": 10000,
     "$defs": {
         "assets": {
             "precomposition"  : {
@@ -431,7 +431,7 @@ 
JSON Schema

                                 "title": "Specification Version",
                                 "description": "Specification version this Lottie is targeting. This is a 6 digit number with version components encoded as MMmmpp, with MM being major version, mm being minor and pp being patch.",
                                 "type": "integer",
-                                "minimum": 100
+                                "minimum": 10000
                             },
                             "fr": {
                                 "title": "Framerate",