├── 0._CS_Contributor_License_Agreement.md ├── 1._Community_Specification_License-v1.md ├── 2._Scope.md ├── 3._Notices.md ├── 4._License.md ├── 5._Governance.md ├── 6._Contributing.md ├── 7._CS_Template.md ├── 8._Code_of_Conduct.md ├── FAQ.md ├── Lottie_Rendering_Model.md ├── Lottie_Specification.md ├── Notices.md └── README.md /0._CS_Contributor_License_Agreement.md: -------------------------------------------------------------------------------- 1 | # Community Specification Contributor License Agreement 1.0 2 | 3 | By making a Contribution to this repository, I agree to the terms of the 4 | following documents located at 5 | [https://github.com/CommunitySpecification/1.0](https://github.com/CommunitySpecification/1.0): 6 | 7 | (a) Community Specification License 1.0 8 | (0.\_Community_Specification_License-v1.md) 9 | 10 | (b) Community Specification Governance Policy 1.0 (5.\_Governance.md) 11 | 12 | (c) Community Specification Contribution Policy 1.0 (6.\_Contributing.md) 13 | 14 | (d) Community Specification Code of Conduct (8.\_Code_of_Conduct.md) 15 | 16 | In addition, for source code contributions, I certify that: 17 | 18 | (a) The contribution was created in whole or in part by me and I have the right 19 | to submit it under the open source license indicated in the file; or (b) The 20 | contribution is based upon previous work that, to the best of my knowledge, is 21 | covered under an appropriate open source license and I have the right under that 22 | license to submit that work with modifications, whether created in whole or in 23 | part by me, under the same open source license (unless I am permitted to submit 24 | under a different license), as indicated in the file; or (c) The contribution 25 | was provided directly to me by some other person who certified (a), (b) or (c) 26 | and I have not modified it. (d) I understand and agree that this working group 27 | and the contribution may be public and that a record of the contribution 28 | (including all personal information I submit with it, including my sign-off) is 29 | maintained indefinitely and may be redistributed consistent with this agreement 30 | or the open source license(s) involved. 31 | 32 | I represent that I am legally entitled to make the grants set forth in the 33 | documents above. If my employer(s) has rights to intellectual property that may 34 | be infringed by the materials developed by this Working Group, I represent that 35 | I have received permission to enter these agreements on behalf of that employer. 36 | -------------------------------------------------------------------------------- /1._Community_Specification_License-v1.md: -------------------------------------------------------------------------------- 1 | # Community Specification License 1.0 2 | 3 | **The Purpose of this License.** This License sets forth the terms under 4 | which 1) Contributor will participate in and contribute to the development of 5 | specifications, standards, best practices, guidelines, and other similar 6 | materials under this Working Group, and 2) how the materials developed under 7 | this License may be used. It is not intended for source code. Capitalized terms 8 | are defined in the License’s last section. 9 | 10 | **1. Copyright.** 11 | 12 | **1.1. Copyright License.** Contributor grants everyone a non-sublicensable, 13 | perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable 14 | (except as expressly stated in this License) copyright license, without any 15 | obligation for accounting, to reproduce, prepare derivative works of, publicly 16 | display, publicly perform, and distribute any materials it submits to the full 17 | extent of its copyright interest in those materials. Contributor also 18 | acknowledges that the Working Group may exercise copyright rights in the 19 | Specification, including the rights to submit the Specification to another 20 | standards organization. 21 | 22 | **1.2. Copyright Attribution.** As a condition, anyone exercising this copyright 23 | license must include attribution to the Working Group in any derivative work 24 | based on materials developed by the Working Group. That attribution must 25 | include, at minimum, the material’s name, version number, and source from where 26 | the materials were retrieved. Attribution is not required for implementations of 27 | the Specification. 28 | 29 | **2. Patents.** 30 | 31 | **2.1. Patent License.** 32 | 33 | **2.1.1. As a Result of Contributions.** 34 | 35 | **2.1.1.1. As a Result of Contributions to Draft Specifications.** Contributor 36 | grants Licensee a non-sublicensable, perpetual, worldwide, non-exclusive, 37 | no-charge, royalty-free, irrevocable (except as expressly stated in this 38 | License) license to its Necessary Claims in 1) Contributor’s Contributions 39 | and 2) to the Draft Specification that is within Scope as of the date of that 40 | Contribution, in both cases for Licensee’s Implementation of the Draft 41 | Specification, except for those patent claims excluded by Contributor under 42 | Section 3. 43 | 44 | **2.1.1.2. For Approved Specifications.** Contributor grants Licensee a 45 | non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, 46 | irrevocable (except as expressly stated in this License) license to its 47 | Necessary Claims included the Approved Specification that are within Scope for 48 | Licensee’s Implementation of the Approved Specification, except for those patent 49 | claims excluded by Contributor under Section 3. 50 | 51 | **2.1.2. Patent Grant from Licensee.** Licensee grants each other Licensee a 52 | non-sublicensable, perpetual, worldwide, non-exclusive, no-charge, royalty-free, 53 | irrevocable (except as expressly stated in this License) license to its 54 | Necessary Claims for its Implementation, except for those patent claims excluded 55 | under Section 3. 56 | 57 | **2.1.3. Licensee Acceptance.** The patent grants set forth in Section 2.1 58 | extend only to Licensees that have indicated their agreement to this License as 59 | follows: 60 | 61 | **2.1.3.1. Source Code Distributions.** For distribution in source code, by 62 | including this License in the root directory of the source code with the 63 | Implementation; 64 | 65 | **2.1.3.2. Non-Source Code Distributions.** For distribution in any form other 66 | than source code, by including this License in the documentation, legal notices, 67 | via notice in the software, and/or other written materials provided with the 68 | Implementation; or 69 | 70 | **2.1.3.3. Via Notices.md.** By issuing pull request or commit to the 71 | Specification’s repository’s Notices.md file by the Implementer’s authorized 72 | representative, including the Implementer’s name, authorized individual and 73 | system identifier, and Specification version. 74 | 75 | **2.1.4. Defensive Termination.** If any Licensee files or maintains a claim in 76 | a court asserting that a Necessary Claim is infringed by an Implementation, any 77 | licenses granted under this License to the Licensee are immediately terminated 78 | unless 1) that claim is directly in response to a claim against Licensee 79 | regarding an Implementation, or 2) that claim was brought to enforce the terms 80 | of this License, including intervention in a third-party action by a Licensee. 81 | 82 | **2.1.5. Additional Conditions.** This License is not an assurance (i) that any 83 | of Contributor’s copyrights or issued patent claims cover an Implementation of 84 | the Specification or are enforceable or (ii) that an Implementation of the 85 | Specification would not infringe intellectual property rights of any third 86 | party. 87 | 88 | **2.2. Patent Licensing Commitment.** In addition to the rights granted in 89 | Section 2.1, Contributor agrees to grant everyone a no charge, royalty-free 90 | license on reasonable and non-discriminatory terms to Contributor’s Necessary 91 | Claims that are within Scope for: 92 | 93 | 1. Implementations of a Draft Specification, where such license applies only to 94 | those Necessary Claims infringed by implementing Contributor's 95 | Contribution(s) included in that Draft Specification, and 96 | 2. Implementations of the Approved Specification. 97 | 98 | This patent licensing commitment does not apply to those claims subject to 99 | Contributor’s Exclusion Notice under Section 3. 100 | 101 | **2.3. Effect of Withdrawal.** Contributor may withdraw from the Working Group 102 | by issuing a pull request or commit providing notice of withdrawal to the 103 | Working Group repository’s Notices.md file. All of Contributor’s existing 104 | commitments and obligations with respect to the Working Group up to the date of 105 | that withdrawal notice will remain in effect, but no new obligations will be 106 | incurred. 107 | 108 | **2.4. Binding Encumbrance.** This License is binding on any future owner, 109 | assignee, or party who has been given the right to enforce any Necessary Claims 110 | against third parties. 111 | 112 | **3. Patent Exclusion.** 113 | 114 | **3.1. As a Result of Contributions.** Contributor may exclude Necessary Claims 115 | from its licensing commitments incurred under Section 2.1.1 by issuing an 116 | Exclusion Notice within 45 days of the date of that Contribution. Contributor 117 | may not issue an Exclusion Notice for any material that has been included in a 118 | Draft Deliverable for more than 45 days prior to the date of that Contribution. 119 | 120 | **3.2. As a Result of a Draft Specification Becoming an Approved 121 | Specification.** Prior to the adoption of a Draft Specification as an Approved 122 | Specification, Contributor may exclude Necessary Claims from its licensing 123 | commitments under this Agreement by issuing an Exclusion Notice. Contributor may 124 | not issue an Exclusion Notice for patents that were eligible to have been 125 | excluded pursuant to Section 3.1. 126 | 127 | **4. Source Code License.** Any source code developed by the Working Group is 128 | solely subject the source code license included in the Working Group’s 129 | repository for that code. If no source code license is included, the source code 130 | will be subject to the MIT License. 131 | 132 | **5. No Other Rights.** Except as specifically set forth in this License, no 133 | other express or implied patent, trademark, copyright, or other rights are 134 | granted under this License, including by implication, waiver, or estoppel. 135 | 136 | **6. Antitrust Compliance.** Contributor acknowledge that it may compete with 137 | other participants in various lines of business and that it is therefore 138 | imperative that they and their respective representatives act in a manner that 139 | does not violate any applicable antitrust laws and regulations. This License 140 | does not restrict any Contributor from engaging in similar specification 141 | development projects. Each Contributor may design, develop, manufacture, acquire 142 | or market competitive deliverables, products, and services, and conduct its 143 | business, in whatever way it chooses. No Contributor is obligated to announce or 144 | market any products or services. Without limiting the generality of the 145 | foregoing, the Contributors agree not to have any discussion relating to any 146 | product pricing, methods or channels of product distribution, division of 147 | markets, allocation of customers or any other topic that should not be discussed 148 | among competitors under the auspices of the Working Group. 149 | 150 | **7. Non-Circumvention.** Contributor agrees that it will not intentionally take 151 | or willfully assist any third party to take any action for the purpose of 152 | circumventing any obligations under this License. 153 | 154 | **8. Representations, Warranties and Disclaimers.** 155 | 156 | **8.1. Representations, Warranties and Disclaimers.** Contributor and Licensee 157 | represents and warrants that 1) it is legally entitled to grant the rights set 158 | forth in this License and 2) it will not intentionally include any third party 159 | materials in any Contribution unless those materials are available under terms 160 | that do not conflict with this License. IN ALL OTHER RESPECTS ITS CONTRIBUTIONS 161 | ARE PROVIDED "AS IS." The entire risk as to implementing or otherwise using the 162 | Contribution or the Specification is assumed by the implementer and user. Except 163 | as stated herein, CONTRIBUTOR AND LICENSEE EXPRESSLY DISCLAIM ANY WARRANTIES 164 | (EXPRESS, IMPLIED, OR OTHERWISE), INCLUDING IMPLIED WARRANTIES OF 165 | MERCHANTABILITY, NON-INFRINGEMENT, FITNESS FOR A PARTICULAR PURPOSE, CONDITIONS 166 | OF QUALITY, OR TITLE, RELATED TO THE CONTRIBUTION OR THE SPECIFICATION. IN NO 167 | EVENT WILL ANY PARTY BE LIABLE TO ANY OTHER PARTY FOR LOST PROFITS OR ANY FORM 168 | OF INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER FROM 169 | ANY CAUSES OF ACTION OF ANY KIND WITH RESPECT TO THIS AGREEMENT, WHETHER BASED 170 | ON BREACH OF CONTRACT, TORT (INCLUDING NEGLIGENCE), OR OTHERWISE, AND WHETHER OR 171 | NOT THE OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. Any 172 | obligations regarding the transfer, successors in interest, or assignment of 173 | Necessary Claims will be satisfied if Contributor or Licensee notifies the 174 | transferee or assignee of any patent that it knows contains Necessary Claims or 175 | necessary claims under this License. Nothing in this License requires 176 | Contributor to undertake a patent search. If Contributor is 1) employed by or 177 | acting on behalf of an employer, 2) is making a Contribution under the direction 178 | or control of a third party, or 3) is making the Contribution as a consultant, 179 | contractor, or under another similar relationship with a third party, 180 | Contributor represents that they have been authorized by that party to enter 181 | into this License on its behalf. 182 | 183 | **8.2. Distribution Disclaimer.** Any distributions of technical information to 184 | third parties must include a notice materially similar to the following: “THESE 185 | MATERIALS ARE PROVIDED “AS IS.” The Contributors and Licensees expressly 186 | disclaim any warranties (express, implied, or otherwise), including implied 187 | warranties of merchantability, non-infringement, fitness for a particular 188 | purpose, or title, related to the materials. The entire risk as to implementing 189 | or otherwise using the materials is assumed by the implementer and user. IN NO 190 | EVENT WILL THE CONTRIBUTORS OR LICENSEES BE LIABLE TO ANY OTHER PARTY FOR LOST 191 | PROFITS OR ANY FORM OF INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES 192 | OF ANY CHARACTER FROM ANY CAUSES OF ACTION OF ANY KIND WITH RESPECT TO THIS 193 | DELIVERABLE OR ITS GOVERNING AGREEMENT, WHETHER BASED ON BREACH OF CONTRACT, 194 | TORT (INCLUDING NEGLIGENCE), OR OTHERWISE, AND WHETHER OR NOT THE OTHER MEMBER 195 | HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.” 196 | 197 | **9. Definitions.** 198 | 199 | **9.1. Affiliate.** “Affiliate” means an entity that directly or indirectly 200 | Controls, is Controlled by, or is under common Control of that party. 201 | 202 | **9.2. Approved Specification.** “Approved Specification” means the final 203 | version and contents of any Draft Specification designated as an Approved 204 | Specification as set forth in the accompanying Governance.md file. 205 | 206 | **9.3. Contribution.** “Contribution” means any original work of authorship, 207 | including any modifications or additions to an existing work, that Contributor 208 | submits for inclusion in a Draft Specification, which is included in a Draft 209 | Specification or Approved Specification. 210 | 211 | **9.4. Contributor.** “Contributor” means any person or entity that has 212 | indicated its acceptance of the License 1) by making a Contribution to the 213 | Specification, or 2) by entering into the Community Specification Contributor 214 | License Agreement for the Specification. Contributor includes its Affiliates, 215 | assigns, agents, and successors in interest. 216 | 217 | **9.5. Control.** “Control” means direct or indirect control of more than 50% of 218 | the voting power to elect directors of that corporation, or for any other 219 | entity, the power to direct management of such entity. 220 | 221 | **9.6. Draft Specification.** “Draft Specification” means all versions of the 222 | material (except an Approved Specification) developed by this Working Group for 223 | the purpose of creating, commenting on, revising, updating, modifying, or adding 224 | to any document that is to be considered for inclusion in the Approved 225 | Specification. 226 | 227 | **9.7. Exclusion Notice.** “Exclusion Notice” means a written notice made by 228 | making a pull request or commit to the repository’s Notices.md file that 229 | identifies patents that Contributor is excluding from its patent licensing 230 | commitments under this License. The Exclusion Notice for issued patents and 231 | published applications must include the Draft Specification’s name, patent 232 | number(s) or title and application number(s), as the case may be, for each of 233 | the issued patent(s) or pending patent application(s) that the Contributor is 234 | excluding from the royalty-free licensing commitment set forth in this License. 235 | If an issued patent or pending patent application that may contain Necessary 236 | Claims is not set forth in the Exclusion Notice, those Necessary Claims shall 237 | continue to be subject to the licensing commitments under this License. The 238 | Exclusion Notice for unpublished patent applications must provide either: (i) 239 | the text of the filed application; or (ii) identification of the specific 240 | part(s) of the Draft Specification whose implementation makes the excluded claim 241 | a Necessary Claim. If (ii) is chosen, the effect of the exclusion will be 242 | limited to the identified part(s) of the Draft Specification. 243 | 244 | **9.8. Implementation.** “Implementation” means making, using, selling, offering 245 | for sale, importing or distributing any implementation of the Specification 1) 246 | only to the extent it implements the Specification and 2) so long as all 247 | required portions of the Specification are implemented. 248 | 249 | **9.9. License.** “License” means this Community Specification License. 250 | 251 | **9.10. Licensee.** “Licensee” means any person or entity that has indicated its 252 | acceptance of the License as set forth in Section 2.1.3. Licensee includes its 253 | Affiliates, assigns, agents, and successors in interest. 254 | 255 | **9.11. Necessary Claims.** “Necessary Claims” are those patent claims, if any, 256 | that a party owns or controls, including those claims later acquired, that are 257 | necessary to implement the required portions (including the required elements of 258 | optional portions) of the Specification that are described in detail and not 259 | merely referenced in the Specification. 260 | 261 | **9.12. Specification.** “Specification” means a Draft Specification or Approved 262 | Specification included in the Working Group’s repository subject to this 263 | License, and the version of the Specification implemented by the Licensee. 264 | 265 | **9.13. Scope.** “Scope” has the meaning as set forth in the accompanying 266 | Scope.md file included in this Specification’s repository. Changes to Scope do 267 | not apply retroactively. If no Scope is provided, each Contributor’s Necessary 268 | Claims are limited to that Contributor’s Contributions. 269 | 270 | **9.14. Working Group.** “Working Group” means this project to develop 271 | specifications, standards, best practices, guidelines, and other similar 272 | materials under this License. 273 | 274 | _The text of this Community Specification License is Copyright 2020 Joint 275 | Development Foundation and is licensed under the Creative Commons Attribution 276 | 4.0 International License available at 277 | https://creativecommons.org/licenses/by/4.0/._ 278 | 279 | SPDX-License-Identifier: CC-BY-4.0 280 | -------------------------------------------------------------------------------- /2._Scope.md: -------------------------------------------------------------------------------- 1 | # Scope 2 | 3 | The scope of this Working Group is to specify the format of the Lottie Animation Format, both 4 | the allowed JSON structure, the semantics of that structure, and how such Lottie files are to be 5 | rendered. The definition of the correct rendering will be specified by a combination of verbiage 6 | in the written specification and by exemplar Lottie files and their desired renderings committed 7 | to the [`tests`](https://github.com/lottie-animation-community/tests) repo. 8 | -------------------------------------------------------------------------------- /3._Notices.md: -------------------------------------------------------------------------------- 1 | # Notices 2 | 3 | ## Code of Conduct 4 | 5 | Contact for Code of Conduct issues or inquires: jcgregorio@google.com / hcm@google.com 6 | 7 | ## License Acceptance 8 | 9 | Per Community Specification License 1.0 Section 2.1.3.3, Licensees may indicate 10 | their acceptance of the Community Specification License by issuing a pull 11 | request to the Specification’s repository’s Notice.md file, including the 12 | Licensee’s name, authorized individuals' names, and repository system identifier 13 | (e.g. GitHub ID), and specification version. 14 | 15 | A Licensee may consent to accepting the current Community Specification License 16 | version or any future version of the Community Specification License by 17 | indicating "or later" after their specification version. 18 | 19 | --- 20 | 21 | Licensee’s name: 22 | 23 | Authorized individual and system identifier: 24 | 25 | Specification version: 26 | 27 | --- 28 | 29 | ## Withdrawals 30 | 31 | Name of party withdrawing: 32 | 33 | Date of withdrawal: 34 | 35 | --- 36 | 37 | ## Exclusions 38 | 39 | This section includes any Exclusion Notices made against a Draft Deliverable or 40 | Approved Deliverable as set forth in the Community Specification Development 41 | License. Each Exclusion Notice must include the following information: 42 | 43 | - Name of party making the Exclusion Notice: 44 | 45 | - Name of patent owner: 46 | 47 | - Specification: 48 | 49 | - Version number: 50 | 51 | **For issued patents and published patent applications:** 52 | 53 | (i) patent number(s) or title and application number(s), as the case may be: 54 | 55 | (ii) identification of the specific part(s) of the Specification whose implementation makes the excluded claim a Necessary Claim. 56 | 57 | **For unpublished patent applications must provide either:** 58 | 59 | (i) the text of the filed application; or 60 | 61 | (ii) identification of the specific part(s) of the Specification whose implementation makes the excluded claim a Necessary Claim. 62 | 63 | --- 64 | -------------------------------------------------------------------------------- /4._License.md: -------------------------------------------------------------------------------- 1 | # Licenses 2 | 3 | ## Specification License 4 | 5 | Specifications in the repository are subject to the **Community Specification 6 | License 1.0** available at 7 | [https://github.com/CommunitySpecification/1.0](https://github.com/CommunitySpecification/1.0). 8 | 9 | ## Source Code License 10 | 11 | If source code is included in this repository, or for sample or reference code 12 | included in the specification itself, that code is subject to the MIT license 13 | unless otherwise designated. In the case of any conflict or confusion within 14 | this specification repository between the Community Specification License and 15 | the MIT or other designated license, the terms of the Community Specification 16 | License shall apply. 17 | 18 | If source code is included in this repository, or for sample or reference code 19 | included in the specification itself, that code is subject to the MIT license 20 | unless otherwise marked. 21 | 22 | In the case of any conflict or confusion within this specification repository 23 | between the Community Specification License and the designated source code 24 | license, the terms of the Community Specification License shall apply. 25 | -------------------------------------------------------------------------------- /5._Governance.md: -------------------------------------------------------------------------------- 1 | # Community Specification Governance Policy 1.0 2 | 3 | This document provides the governance policy for specifications and other 4 | documents developed using the Community Specification process in a repository 5 | (each a “Working Group”). Each Working Group and must adhere to the requirements 6 | in this document. 7 | 8 | ## 1. Roles. 9 | 10 | Each Working Group may include the following roles. Additional roles may be 11 | adopted and documented by the Working Group. 12 | 13 | **1.1. Maintainer.** “Maintainers” are responsible for organizing activities 14 | around developing, maintaining, and updating the specification(s) developed by 15 | the Working Group. Maintainers are also responsible for determining consensus 16 | and coordinating appeals. Each Working Group will designate one or more 17 | Maintainer for that Working Group. A Working Group may select a new or 18 | additional Maintainer(s) upon Approval of the Working Group Participants. 19 | 20 | **1.2. Editor.** “Editors” are responsible for ensuring that the contents of the 21 | document accurately reflect the decisions that have been made by the group, and 22 | that the specification adheres to formatting and content guidelines. Each 23 | Working Group will designate an Editor for that Working Group. A Working Group 24 | may select a new Editor upon Approval of the Working Group Participants. 25 | 26 | **1.3. Participants.** “Participants” are those that have made Contributions to 27 | the Working Group subject to the Community Specification License. 28 | 29 | ## 2. Decision Making. 30 | 31 | **2.1. Consensus-Based Decision Making.** Working Groups make decisions through 32 | a consensus process (“Approval” or “Approved”). While the agreement of all 33 | Participants is preferred, it is not required for consensus. Rather, the 34 | Maintainer will determine consensus based on their good faith consideration of a 35 | number of factors, including the dominant view of the Working Group Participants 36 | and nature of support and objections. The Maintainer will document evidence of 37 | consensus in accordance with these requirements. 38 | 39 | **2.2. Appeal Process.** Decisions may be appealed be via a pull request or an 40 | issue, and that appeal will be considered by the Maintainer in good faith, who 41 | will respond in writing within a reasonable time. 42 | 43 | ## 3. Ways of Working. 44 | 45 | Inspired by 46 | [ANSI’s Essential Requirements for Due Process](https://share.ansi.org/Shared%20Documents/Standards%20Activities/American%20National%20Standards/Procedures,%20Guides,%20and%20Forms/2020_ANSI_Essential_Requirements.pdf), 47 | Community Specification Working Groups must adhere to consensus-based due 48 | process requirements. These requirements apply to activities related to the 49 | development of consensus for approval, revision, reaffirmation, and withdrawal 50 | of Community Specifications. Due process means that any person (organization, 51 | company, government agency, individual, etc.) with a direct and material 52 | interest has a right to participate by: a) expressing a position and its basis, 53 | b) having that position considered, and c) having the right to appeal. Due 54 | process allows for equity and fair play. The following constitute the minimum 55 | acceptable due process requirements for the development of consensus. 56 | 57 | **3.1. Openness.** Participation shall be open to all persons who are directly 58 | and materially affected by the activity in question. There shall be no undue 59 | financial barriers to participation. Voting membership on the consensus body 60 | shall not be conditional upon membership in any organization, nor unreasonably 61 | restricted on the basis of technical qualifications or other such requirements. 62 | Membership in a Working Group’s parent organization, if any, may be required. 63 | 64 | **3.2. Lack of Dominance.** The development process shall not be dominated by 65 | any single interest category, individual or organization. Dominance means a 66 | position or exercise of dominant authority, leadership, or influence by reason 67 | of superior leverage, strength, or representation to the exclusion of fair and 68 | equitable consideration of other viewpoints. 69 | 70 | **3.3. Balance.** The development process should have a balance of interests. 71 | Participants from diverse interest categories shall be sought with the objective 72 | of achieving balance. 73 | 74 | **3.4. Coordination and Harmonization.** Good faith efforts shall be made to 75 | resolve potential conflicts between and among deliverables developed under this 76 | Working Group and existing industry standards. 77 | 78 | **3.5. Consideration of Views and Objections.** Prompt consideration shall be 79 | given to the written views and objections of all Participants. 80 | 81 | **3.6. Written procedures.** This governance document and other materials 82 | documenting the Community Specification development process shall be available 83 | to any interested person. 84 | 85 | ## 4. Specification Development Process. 86 | 87 | **4.1. Pre-Draft.** Any Participant may submit a proposed initial draft document 88 | as a candidate Draft Specification of that Working Group. The Maintainer will 89 | designate each submission as a “Pre-Draft” document. 90 | 91 | **4.2. Draft.** Each Pre-Draft document of a Working Group must first be 92 | Approved to become a” Draft Specification”. Once the Working Group approves a 93 | document as a Draft Specification, the Draft Specification becomes the basis for 94 | all going forward work on that specification. 95 | 96 | **4.3. Working Group Approval.** Once a Working Group believes it has achieved 97 | the objectives for its specification as described in the Scope, it will Approve 98 | that Draft Specification and progress it to “Approved Specification” status. 99 | 100 | **4.4. Publication and Submission.** Upon the designation of a Draft 101 | Specification as an Approved Specification, the Maintainer will publish the 102 | Approved Specification in a manner agreed upon by the Working Group Participants 103 | (i.e., Working Group Participant only location, publicly available location, 104 | Working Group maintained website, Working Group member website, etc.). The 105 | publication of an Approved Specification in a publicly accessible manner must 106 | include the terms under which the Approved Specification is being made available 107 | under. 108 | 109 | **4.5. Submissions to Standards Bodies.** No Draft Specification or Approved 110 | Specification may be submitted to another standards development organization 111 | without Working group Approval. Upon reaching Approval, the Maintainer will 112 | coordinate the submission of the applicable Draft Specification or Approved 113 | Specification to another standards development organization. Working Group 114 | Participants that developed that Draft Specification or Approved Specification 115 | agree to grant the copyright rights necessary to make those submissions. 116 | 117 | ## 5. Non-Confidential, Restricted Disclosure. 118 | 119 | Information disclosed in connection with any Working Group activity, including 120 | but not limited to meetings, Contributions, and submissions, is not 121 | confidential, regardless of any markings or statements to the contrary. 122 | Notwithstanding the foregoing, if the Working Group is collaborating via a 123 | private repository, the Participants will not make any public disclosures of 124 | that information contained in that private repository without the Approval of 125 | the Working Group. 126 | -------------------------------------------------------------------------------- /6._Contributing.md: -------------------------------------------------------------------------------- 1 | # Community Specification Contribution Policy 1.0 2 | 3 | This document provides the contribution policy for specifications and other 4 | documents developed using the Community Specification process in a repository 5 | (each a “Working Group”). Additional or alternate contribution policies may be 6 | adopted and documented by the Working Group. 7 | 8 | ## 1. Contribution Guidelines. 9 | 10 | This Working Group accepts contributions via pull requests. The following 11 | section outlines the process for merging contributions to the specification 12 | 13 | **1.1. Issues.** Issues are used as the primary method for tracking anything to 14 | do with this specification Working Group. 15 | 16 | **1.1.1. Issue Types.** There are three types of issues (each with their own 17 | corresponding label): 18 | 19 | **1.1.1.1. Discussion.** These are support or functionality inquiries that we 20 | want to have a record of for future reference. Depending on the discussion, 21 | these can turn into "Spec Change" issues. 22 | 23 | **1.1.1.2. Proposal.** Used for items that propose a new ideas or functionality 24 | that require a larger discussion. This allows for feedback from others before a 25 | specification change is actually written. All issues that are proposals should 26 | both have a label and an issue title of "Proposal: [the rest of the title]." A 27 | proposal can become a "Spec Change" and does not require a milestone. 28 | 29 | **1.1.1.3. Spec Change:** These track specific spec changes and ideas until they 30 | are complete. They can evolve from "Proposal" and "Discussion" items, or can be 31 | submitted individually depending on the size. Each spec change should be placed 32 | into a milestone. 33 | 34 | ## 2. Issue Lifecycle. 35 | 36 | The issue lifecycle is mainly driven by the Maintainer. All issue types follow 37 | the same general lifecycle. Differences are noted below. 38 | 39 | **2.1. Issue Creation.** 40 | 41 | **2.2. Triage.** 42 | 43 | o The Editor in charge of triaging will apply the proper labels for the issue. 44 | This includes labels for priority, type, and metadata. 45 | 46 | o (If needed) Clean up the title to succinctly and clearly state the issue. Also 47 | ensure that proposals are prefaced with "Proposal". 48 | 49 | **2.3. Discussion.** 50 | 51 | o "Spec Change" issues should be connected to the pull request that resolves it. 52 | 53 | o Whoever is working on a "Spec Change" issue should either assign the issue to 54 | themselves or make a comment in the issue saying that they are taking it. 55 | 56 | o "Proposal" and "Discussion" issues should stay open until resolved. 57 | 58 | **2.4. Issue Closure.** 59 | 60 | ## 3. How to Contribute a Patch. 61 | 62 | The Working Group uses pull requests to track changes. To submit a change to the 63 | specification: 64 | 65 | **3.1 Fork the Repo, modify the Specification to Address the Issue.** 66 | 67 | **3.2. Submit a Pull Request.** 68 | 69 | ## 4. Pull Request Workflow. 70 | 71 | The next section contains more information on the workflow followed for Pull 72 | Requests. 73 | 74 | **4.1. Pull Request Creation.** 75 | 76 | o We welcome pull requests that are currently in progress. They are a great way 77 | to keep track of important work that is in-flight, but useful for others to see. 78 | If a pull request is a work in progress, it should be prefaced with "WIP: 79 | [title]". You should also add the wip label Once the pull request is ready for 80 | review, remove "WIP" from the title and label. 81 | 82 | o It is preferred, but not required, to have a pull request tied to a specific 83 | issue. There can be circumstances where if it is a quick fix then an issue might 84 | be overkill. The details provided in the pull request description would suffice 85 | in this case. 86 | 87 | **4.2. Triage** 88 | 89 | o The Editor in charge of triaging will apply the proper labels for the issue. 90 | This should include at least a size label, a milestone, and awaiting review once 91 | all labels are applied. 92 | 93 | **4.3. Reviewing/Discussion.** 94 | 95 | o All reviews will be completed using the review tool. 96 | 97 | o A "Comment" review should be used when there are questions about the spec that 98 | should be answered, but that don't involve spec changes. This type of review 99 | does not count as approval. 100 | 101 | o A "Changes Requested" review indicates that changes to the spec need to be 102 | made before they will be merged. 103 | 104 | o Reviewers should update labels as needed (such as needs rebase). 105 | 106 | o When a review is approved, the reviewer should add LGTM as a comment. 107 | 108 | o Final approval is required by a designated Editor. Merging is blocked without 109 | this final approval. Editors will factor reviews from all other reviewers into 110 | their approval process. 111 | 112 | **4.4. Responsive.** Pull request owner should try to be responsive to comments 113 | by answering questions or changing text. Once all comments have been addressed, 114 | the pull request is ready to be merged. 115 | 116 | **4.5. Merge or Close.** 117 | 118 | o A pull request should stay open until a Maintainer has marked the pull request 119 | as approved. 120 | 121 | o Pull requests can be closed by the author without merging. 122 | 123 | o Pull requests may be closed by a Maintainer if the decision is made that it is 124 | not going to be merged. 125 | -------------------------------------------------------------------------------- /7._CS_Template.md: -------------------------------------------------------------------------------- 1 | # Community Specification Template 1.0 2 | 3 | Community Specifications are recommended to be drafted in accordance with 4 | international best practices. Doing so provides clarity, helps adoption, and 5 | also eases the transition of this specification to other standards body if so 6 | desired. Accordingly, the recommended template below is based on ISO standard 7 | drafting conventions. 8 | 9 | To help you, this guide on writing standards was produced by the ISO/TMB and is 10 | available at https://www.iso.org/iso/how-to-write-standards.pdf. 11 | 12 | A model manuscript of a draft International Standard (known as “The Rice Model”) 13 | is available at https://www.iso.org/iso/model_document-rice_model.pdf. 14 | 15 | In addition, we recommend using the key words "MUST", "MUST NOT", "REQUIRED", 16 | "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and 17 | "OPTIONAL" as described in RFC 2119 - https://tools.ietf.org/html/rfc2119 18 | 19 | ## Title 20 | 21 | ### Version **\_\_\_** 22 | 23 | ### Status (Pre-draft, Draft, Approved) 24 | 25 | © ********\_******** 26 | 27 | This specification is subject to the Community Specification License 1.0, 28 | available at 29 | [https://github.com/CommunitySpecification/1.0](https://github.com/CommunitySpecification/1.0). 30 | 31 | 32 | 33 | ## Contents 34 | 35 | Foreword i 36 | 37 | Introduction i 38 | 39 | 1 Scope (mandatory) 1 40 | 41 | 2 Normative references (mandatory) 1 42 | 43 | 3 Terms and definitions (mandatory) 1 44 | 45 | 4 Clause title autonumber 1 46 | 47 | 5 Clause title 1 48 | 49 | 5.1 Subclause autonumber 1 50 | 51 | 5.1.1 Subclause autonumber 1 52 | 53 | 6 Clause title 1 54 | 55 | Annex A (informative) 56 | 57 | Bibliography 1 58 | 59 | ## Foreword 60 | 61 | Attention is drawn to the possibility that some of the elements of this document 62 | may be the subject of patent rights. No party shall not be held responsible for 63 | identifying any or all such patent rights. 64 | 65 | Any trade name used in this document is information given for the convenience of 66 | users and does not constitute an endorsement. 67 | 68 | This document was prepared by [Insert name of group]. 69 | 70 | This second/third/… edition cancels and replaces the first/second/… edition 71 | (#####:####), which has been technically revised. The main changes compared to 72 | the previous edition are as follows: — xxx xxxxxxx xxx xxxx 73 | 74 | Known patent licensing exclusions are available in the specification’s 75 | repository’s Notices.md file. 76 | 77 | Any feedback or questions on this document should be directed to specifications 78 | repository, located at ********\_********. 79 | 80 | THESE MATERIALS ARE PROVIDED “AS IS.” The Contributors and Licensees expressly 81 | disclaim any warranties (express, implied, or otherwise), including implied 82 | warranties of merchantability, non-infringement, fitness for a particular 83 | purpose, or title, related to the materials. The entire risk as to implementing 84 | or otherwise using the materials is assumed by the implementer and user. IN NO 85 | EVENT WILL THE CONTRIBUTORS OR LICENSEES BE LIABLE TO ANY OTHER PARTY FOR LOST 86 | PROFITS OR ANY FORM OF INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES 87 | OF ANY CHARACTER FROM ANY CAUSES OF ACTION OF ANY KIND WITH RESPECT TO THIS 88 | DELIVERABLE OR ITS GOVERNING AGREEMENT, WHETHER BASED ON BREACH OF CONTRACT, 89 | TORT (INCLUDING NEGLIGENCE), OR OTHERWISE, AND WHETHER OR NOT THE OTHER MEMBER 90 | HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 91 | 92 | Introduction Type text. 93 | 94 | ## Title (Introductory element — Main element — Part : Part title) 95 | 96 | 1 Scope (mandatory) 97 | 98 | Type text. 99 | 100 | 2 Normative references (mandatory) 101 | 102 | Two options of text (remove the inappropriate option). 103 | 104 | 1. The normative references shall be introduced by the following wording. 105 | 106 | The following documents are referred to in the text in such a way that some or 107 | all of their content constitutes requirements of this document. For dated 108 | references, only the edition cited applies. For undated references, the latest 109 | edition of the referenced document (including any amendments) applies. 110 | 111 | ISO ##### #, General title — Part #: Title of part 112 | 113 | ISO ##### ##:20##, General title — Part ##: Title of part 114 | 115 | 2. If no references exist, include the following phrase below the clause title: 116 | There are no normative references in this document. 117 | 118 | 3 Terms and definitions (mandatory) 119 | 120 | Four options of text (remove the inappropriate options). 121 | 122 | 1. If all the specific terms and definitions are provided in Clause 3, use the 123 | following introductory text: 124 | 125 | For the purposes of this document, the following terms and definitions apply. 126 | 127 | 2. If reference is given to an external document, use the following introductory 128 | text: 129 | 130 | For the purposes of this document, the terms and definitions given in [external 131 | document reference xxx] apply. 132 | 133 | 3. If terms and definitions are provided in Clause 3, in addition to a reference 134 | to an external document, use the following introductory text: 135 | 136 | For the purposes of this document, the terms and definitions given in [external 137 | document reference xxx] and the following apply. 138 | 139 | 4. If there are no terms and definitions provided, use the following 140 | introductory text: 141 | 142 | No terms and definitions are listed in this document. 143 | 144 | The list below is always included after each option: 145 | 146 | ISO and IEC maintain terminological databases for use in standardization at the 147 | following addresses: 148 | 149 | — ISO Online browsing platform: available at https://www.iso.org/obp 150 | 151 | — IEC Electropedia: available at http://www.electropedia.org/ 152 | 153 | 3.1 154 | 155 | term 156 | 157 | text of the definition 158 | 159 | Note 1 to entry: Text of the note. 160 | 161 | [SOURCE: …] 162 | 163 | 3.2 164 | 165 | term 166 | 167 | text of the definition 168 | 169 | 4 Clause title 170 | 171 | Type text. 172 | 173 | 5 Clause title 174 | 175 | Type text. 176 | 177 | Use subclauses if required e.g. 5.1 or 5.1.1. For example: 178 | 179 | 5.1 Subclause 180 | 181 | 5.1.1 Subclause 182 | 183 | 6 Clause title 184 | 185 | Example of codes: 186 | 187 | ## Annex A 188 | 189 | (informative) 190 | 191 | Annex title e.g. Example of a figure and a table 192 | 193 | A.1 Clause title autonumber 194 | 195 | Use subclauses if required e.g. A.1.1 or A.1.1.1. For example: 196 | 197 | A.1.1 Subclause autonumber 198 | 199 | A.1.1.1 Subclause autonumber 200 | 201 | Type text. 202 | 203 | Dimensions in millimetres 204 | 205 | ## Bibliography 206 | 207 | [1] ISO ##### #, General title — Part #: Title of part 208 | 209 | [2] ISO ##### ##:20##, General title — Part ##: Title of part 210 | -------------------------------------------------------------------------------- /8._Code_of_Conduct.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the overall 26 | community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or advances of 31 | any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email address, 35 | without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement as set forth in 63 | the repository's Notice.md file. All complaints will be reviewed and 64 | investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series of 86 | actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or permanent 93 | ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within the 113 | project community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by 122 | [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /FAQ.md: -------------------------------------------------------------------------------- 1 | # FAQ 2 | 3 | ## Scope 4 | 5 | Q: Does the specification cover an API for manipulating Lottie Animation playback, such as setting the refresh rate? 6 | 7 | A: Not at this time. 8 | 9 | Q: Does the specification cover an API for changing a Lottie Animation during playback, such as substituting text programmatically? 10 | 11 | A: Not at this time. 12 | -------------------------------------------------------------------------------- /Lottie_Rendering_Model.md: -------------------------------------------------------------------------------- 1 | # Lottie Rendering Model 2 | 3 | ## Introduction 4 | 5 | Any implementation of the Lottie format must follow the rendering model 6 | described in this document. Some degree of variability can be accepted both in 7 | terms of refresh rate or visual fidelity if the device in use has any type of 8 | time or graphic limitation. 9 | 10 | ## Rendering tree 11 | 12 | The object model described by the lottie format does not describe a one to one 13 | relationship with the rendering tree. There are objects that are not directly 14 | rendered on the tree but they are referenced from within other layers, for 15 | example those on the assets model. These assets can also be used multiple times 16 | on the render tree, with different spatial matrices applied to them and rendered 17 | at different points in time. 18 | 19 | There are also other assets that do not have a representation on the render tree 20 | but that are auxiliary elements useful to complement it. For example font data 21 | and marker data. 22 | 23 | Finally, some other elements don’t have any visual representation on the render 24 | tree but act as containers of properties that affect rendered elements. Null 25 | layers for example aren’t drawn on the canvas but can be used as parents for 26 | multiple other types of elements that will inherit its transform matrix. 27 | 28 | Other elements act as modifiers of the rendered shapes like fills, strokes, and 29 | trim paths. And there are other types of modifiers, like repeaters, that can 30 | have a multiplying effect on the render tree, increasing the number of nodes 31 | that were originally defined on the object model. 32 | 33 | ## Definitions 34 | 35 | ### Rendering tree 36 | 37 | The rendering tree is the final output of properly combining all layers and 38 | modifiers defined in the lottie format. It might vary throughout the lifetime of 39 | the animation since layers have In Points and Out Points limiting their presence 40 | on the canvas to a certain amount of time. 41 | 42 | ### Renderable Elements 43 | 44 | Any element that needs to be displayed on the screen and is part of the render 45 | tree. It can be a Solid which is the output of the Solid Layer Object, a path 46 | which can be part of the Shape Layer Object or Text Layer Object, or any other 47 | drawable element. 48 | 49 | ### Non Renderable Elements 50 | 51 | Many elements on the Document Object Model don’t have a direct representation on 52 | the render tree. For example layers like Null Layer Object, or modifiers like 53 | Gradient Fill, Trim Paths or Masks 54 | 55 | ### Reusable Assets 56 | 57 | Some elements on the DOM are containers of Renderable Elements or Non Renderable 58 | Elements that can be reused multiple times on the render tree. PreComps can be 59 | rendered at different places and at different times in a single animation. Other 60 | examples are character data related to a specific font that can be used to draw 61 | multiple instances of a single letter. 62 | 63 | ## Rendered vs Non Rendered Elements 64 | 65 | During the lifetime of a lottie animation, multiple factors can affect what 66 | elements will be rendered on the canvas. 67 | 68 | This is the list of conditions that need to be met for an element to be included 69 | on the render tree: 70 | 71 | * **In Point and Out Point.** Any element whose time bounds don’t contain the 72 | current position of the time cursor need to be excluded from the render tree. 73 | This condition also applies if the element is a child of a PreComp. A 74 | necessary condition for the element to be rendered is that the containing 75 | PreComp is also rendered within the time boundaries. Since PreComps can have a 76 | separate timeline and that timeline can be affected by time effects like time 77 | remapping or time stretching, the In Point and Out Point of the element might 78 | end up shifted, excluding the element from the render tree. 79 | 80 | * **Spatial boundaries.** If an element’s bounding box doesn’t overlap with the 81 | boundaries of the animation canvas, it will be excluded from the tree. When an 82 | element is rendered within a PreComp, only the overlapping area of the 83 | PreComp, the rendered element and the PreComp’s container should be rendered. 84 | 85 | * **Paint modifiers.** Some layers have a fixed explicit paint modifier like 86 | Solid Layers. Those layers are always defined with a specified color. On the 87 | other hand, some layers can have nested definitions and even multiple painting 88 | rules applied to them. On the contrary, some other layers or shapes defined 89 | within the layer can lack all types of painting operations. If that’s the 90 | case, those shapes should be excluded from the render tree. Some examples can 91 | be text layers with no fill color or stroke color defined, or shape elements 92 | defined within a group that have no fills or stroke. 93 | 94 | * **Clipping Masks.** When a layer has a clipping mask or any kind of track 95 | matte mask linked to them, if their boundaries don’t overlap with the rendered 96 | element, they should be excluded from the render tree. 97 | 98 | * **Repeaters.** Shape layers can include in their stack of modifiers, a 99 | repeater that will affect any shape in that stack above them. If the amount of 100 | copies defined by the repeater is 0, no elements should be added to the render 101 | tree. On the contrary, if more than one copy is set, those same elements will 102 | be added multiple times to the stack. 103 | 104 | * **Opacity.** Elements might have their opacity set to 0 because of a direct 105 | effect of their opacity property, or as a consequence of the nested containers 106 | that can affect it. Although this means that visually, the element will have 107 | no effect on the final output, it is recommended to keep the element in the 108 | render tree if that tree is used for collision detection or interaction with 109 | user input. 110 | 111 | ## Painting model 112 | 113 | Lottie frames are rendered in a sequence of paint operations. Each element is 114 | rendered on top of the current canvas and becomes part of the background for the 115 | next paint operation. 116 | 117 | ### Precomps 118 | 119 | Layers that belong to a precomp should be treated as a separate painting stack. 120 | They should be drawn on a temporary canvas and once the stack is traversed, the 121 | final canvas should be painted on the containing canvas. 122 | 123 | This allows application of blend modes, clipping or any other type of effect to the 124 | resulting temporary canvas before painting on the containing canvas. 125 | 126 | Since precomps can be nested within precomps, this should be a recursive 127 | operation until the main canvas is reached. 128 | 129 | Precomps can have different dimensions than the root element. In consequence, 130 | this stacking context should respect the width and height of the layer and clip 131 | out anything that exceeds it; even if the containing canvas is larger and could 132 | display the exceeding texture. 133 | 134 | ### Shape Layers 135 | 136 | Shape layers define a collection of four different types of objects: Groups, 137 | Shapes, Shape Modifiers and Paint Operations. The order by which the collection 138 | should be read starting at the end of the stack and traversed upwards. 139 | 140 | #### Groups 141 | 142 | Each group can contain any number of children belonging to the four types of 143 | objects. The children stack includes as the last child a transform object that 144 | is applied to the full set of its siblings of type Shapes and Groups. Any Paint 145 | Operation or Shape Modifier defined within a group has no effect on sibling 146 | Shapes, regardless of them being defined before or after in the containing 147 | stack. 148 | 149 | #### Shapes 150 | 151 | Shapes are types of objects that define a paintable surface. They can be 152 | parametric, like rectangles, or a collection or vertices. They must be painted 153 | following the inverse stack order, starting from the last. 154 | 155 | #### Shape Modifiers 156 | 157 | Shape Modifiers, like trim path, or rounded corners, are not part of the render 158 | tree but modify any Shape that is declared before them on the element stack. The 159 | order of those modifiers should be applied from last to first in the stack, and 160 | should be chained such as the output of the previous one becomes the input of 161 | the following one. They affect both sibling Shapes and Shapes defined within a 162 | Group, as long as it is located on the stack before them. 163 | 164 | #### Paint Operations 165 | Paint Operations, like stroke and fill, are not part of the render tree but 166 | define the types of paints that should be applied to Shapes. The order of those 167 | paints should be applied frop last to first and they affect both sibling Shapes 168 | and Shapes defined within a Group, as long as it is located on the stack before 169 | them. 170 | 171 | 172 | ### Track matte layers 173 | 174 | Track matte layers are pairs of layers where one acts as a mask for the other. 175 | Those layers are indicated by a *tt* property on the masked layer and a *td* on 176 | the masking one. They are always stacked one next to the other on the stacking 177 | order. 178 | 179 | Since the masked layer is always below the masking layer and painting order 180 | starts from the end, when a masked layer is found, before painting it, the 181 | canvas should be prepared with the preceding layer to clip or composite with it. 182 | As a side effect of this, the masking layer should not be directly rendered on 183 | the canvas. 184 | 185 | ## Painting order 186 | 187 | Order of painting of elements should always start with the last layer on the 188 | layers stack and traverse the stack upwards. 189 | 190 | Unless specified explicitly by the layer, elements are painted on a 2 191 | dimensional space. But painting order implicitly works as a z axis, where the 192 | next layer should be painted above the previous one, obscuring what is already 193 | painted on the surface. 194 | 195 | When encountering a precomp layer, the painting of the current stack should be 196 | paused and a new context created. Within that context, the painting order should 197 | respect the same rules described above. 198 | 199 | ## Stacking context 200 | 201 | Stacking contexts can contain further stacking contexts. A stacking context is 202 | atomic from the point of view of its parent stacking context; elements in 203 | ancestor stacking contexts may not come between any of its elements. 204 | 205 | As mentioned before, certain layers or operations applied to layers might need 206 | creating a separate stacking context. Depending on the capabilities of the 207 | underlying device, these conditions may vary, but here are some common cases 208 | where a new context might be needed: 209 | 210 | * The root element 211 | 212 | * A layer of type precomp is encountered where a new context will contain the 213 | inner layers. 214 | 215 | * Track matte layers 216 | 217 | * Effects applied to the layer like blur, displacement map 218 | 219 | * Clipping masks 220 | 221 | * Shape layers with inner groups or modifiers 222 | 223 | ## Rendering elements 224 | 225 | In general, a layer could be considered as a single element. But there are 226 | certain layers that contain multiple individual shapes, such as shape layers or 227 | text layers. 228 | 229 | For this section, an element means any operation that will paint to the current 230 | context. This operation can be the result of previous painted individual 231 | elements that once processed are part of a larger single paint operation. 232 | 233 | ### Time constraints 234 | 235 | Elements should only be rendered if their ancestors can be rendered on a 236 | specific frame. Any ancestor whose time boundaries don’t overlap with the 237 | current frame will prevent its children from being rendered. For example, there 238 | could be situations where a child element has an explicit *inPoint* and 239 | *outPoint* that would be renderable at the current frame, but if the ancestor’s 240 | *inPoint* and *outPoint* are not, the child element should be excluded as well. 241 | 242 | Elements that don’t possess an *inPoint *and *outPoint* property should 243 | implicitly share those values with its closest ancestor. 244 | 245 | Precomps possess a special property called time remapping. Same rendering 246 | constraints apply to this case. Its children will be rendered only if the 247 | precomp is within the time boundaries. More information about this property can 248 | be found on the format specifications. 249 | 250 | ### Spatial constraints 251 | 252 | Any child layer that is outside the boundaries of the containing context should 253 | be excluded from the render. If the child is partially outside the boundaries, 254 | only the visible part should be rendered. 255 | 256 | Before rendering an element, a set of transformations should be applied to set 257 | the final coordinates to perform the painting operation. Layers need to follow 258 | the parenting hierarchy and shape groups must apply the transform chain defined 259 | by the containing groups. 260 | 261 | Shape repeaters also define a set of transformations that must be calculated and 262 | multiplied before applying each one of the copies. 263 | 264 | ## Rendering Groups 265 | 266 | Groups create a new drawing context. Certain operations should be applied to 267 | them once the individual operations have been rendered. 268 | 269 | For example, when a group has a certain opacity applied to it, its value cannot 270 | be propagated downwards to each internal element as a multiplier, because it 271 | might have unexpected results. If there are two overlapping rectangles and 272 | opacity is applied individually to each one of them, the overlapping area will 273 | reveal the layer that’s below. Instead, what should be done is paint both 274 | rectangles on its own context and apply the opacity to the result, thus making 275 | sure that the shape below won’t be visible in the final result. 276 | 277 | ### Precomps 278 | 279 | Precomps are a type of group. These are the steps that must be followed to paint 280 | them. 281 | 282 | * A new empty canvas should be created with its corresponding width and height. 283 | 284 | * Layers should be iterated and painted following the rendering order and the 285 | time remapping if present. 286 | 287 | * Effects should be applied in the order they are defined where the output of 288 | one acts as the input of the following one 289 | 290 | * Clipping and/or masking. 291 | 292 | * Transform hierarchy. 293 | 294 | * Blend mode. 295 | 296 | * Paint. 297 | 298 | ### Shape Groups 299 | 300 | Shape groups are also types of groups. For more information about them, see the 301 | shape specification. These are the steps that must be followed to paint them. 302 | 303 | * A new empty canvas should be created. Width and height are inherited from the 304 | closest parent precomp or root element. 305 | 306 | * Layers should be iterated and painted. 307 | 308 | * Transform applied. 309 | 310 | * Blend mode. 311 | 312 | * Paint. 313 | 314 | ## Types of graphics elements 315 | 316 | There are several types of elements that contain graphic information to be 317 | painted within the corresponding context. 318 | 319 | ### Shapes 320 | 321 | Shapes describe a surface that can be painted. The type of fill can be a stroke 322 | operation or a fill operation. And those operations in turn can be described 323 | with a single color or a type of gradient. 324 | 325 | Since a shape is potentially accompanied by multiple color operations, it should 326 | be drawn as many times as the colors in the stack are available at that time. 327 | 328 | The surface described by the shape can be parametrized as a rectangle, polystar, 329 | path. More information about them is available on the format specification. 330 | 331 | ### Texts 332 | 333 | Text layers contain a sequence of code points that should be drawn as a group. 334 | Depending on the device capabilities and rendering information, text will be 335 | drawn as a set of shapes available in the format itself, retrieved from a font 336 | file, or from the system font if available. 337 | 338 | ### Images 339 | 340 | Image layers use an original texture as input and should be modified according 341 | to any layer specification before painted on the containing canvas. 342 | 343 | ### Videos 344 | 345 | Video layers should be treated as image layers in regards to its painting rules, 346 | but they should also follow the time constraints to keep them in sync with the 347 | main timeline of the animation. 348 | 349 | ## Clipping and Masking 350 | 351 | There are several ways of applying masks to a layer. Both track matte masks and 352 | maskProperties can be combined and stacked to affect a single layer before it 353 | gets painted. More information about them is available on the lottie format 354 | specification. 355 | 356 | -------------------------------------------------------------------------------- /Lottie_Specification.md: -------------------------------------------------------------------------------- 1 | # Lottie Animation Format 2 | 3 | ### Version 1.0.0 4 | 5 | ### Status Draft 6 | 7 | # Contents 8 | 9 | [Abstract](#abstract) 10 | 11 | [Rendering Model](#rendering-model) 12 | 13 | [Animation](#animation) 14 | 15 | [Property Types](#property-types) 16 | 17 | [Animatable properties](#animatable-properties) 18 | 19 | [Assets](#assets) 20 | 21 | [Text Data](#text-data) 22 | 23 | [Layers](#layers) 24 | 25 | # Abstract 26 | 27 | The Lottie Animation Format is a vector format focused on animation, 28 | interaction, real-time updates and multi-platform support. This document 29 | describes the specifications of the format and its extensibility. It will also 30 | describe how to specify supported layer types and properties. 31 | 32 | Given its objective of being a global animation vector format, the Lottie 33 | Animation Format does not focus on performance improvements for a single 34 | platform. Instead it tries to be as simple and extendable as possible. 35 | 36 | The format is influenced by the Adobe After Effects Render Model, from which it 37 | draws the layer, keyframes, and properties structure. 38 | 39 | This specification defines a model for drawing and animating a set of layers on 40 | a canvas. 41 | 42 | # Rendering Model 43 | 44 | TBD 45 | 46 | # Animation 47 | 48 | ## General Considerations 49 | 50 | ### Floating-point coordinates 51 | 52 | All values (both time and spatial) are defined as floating point numbers unless 53 | otherwise specified. Values do not have units to accommodate for different 54 | programming language capabilities, format preferences, and varying pixel density 55 | devices. 56 | 57 | ### Required properties 58 | 59 | It is recommended that any required property that is not defined in the format 60 | should throw an exception and the animation should refuse to play. Although in 61 | some cases a default value could fill the missing property, or an element could 62 | be ejected from the animation, to preserve consistency and fidelity to the 63 | original animation it is better to reject the animation altogether. 64 | 65 | ## Width and Height 66 | 67 | **Property names:** *w / h* 68 | 69 | **Property type:** Number 70 | 71 | **Required** 72 | 73 | An animation has a defined width and height. These two values will define the 74 | visible drawing area. The (0,0) coordinate is positioned at the top, left corner 75 | of the resulting rectangle. 76 | 77 | All coordinates both positive and negative are valid. The width and height will 78 | work as a visible frame of all the drawn scene. 79 | 80 | ## Duration 81 | 82 | An animation must have a duration set in the number of frames. Its value is 83 | expressed as a pair of properties: In point and Out point. 84 | 85 | By definition the Out point should be larger or equal to the In point. 86 | 87 | If this condition is not met, the player should refuse to play and throw an 88 | exception. 89 | 90 | Since these properties indicate a segment of an implicit timeline that goes from 91 | *-Infinity* to *Infinity*, any keyframe that is out of bounds won’t be rendered 92 | and only the parts that are within the segment will. Segments can nonetheless 93 | have keyframes defined outside the time segment; but only the overlapping part 94 | of the segment with the animation time boundaries will be rendered. 95 | 96 | Exposing an API to adjust the segment at runtime could be helpful, for example 97 | to animate various states responding to an interaction, or simply to allow for 98 | multiple animations to be in a single file. 99 | 100 | ### In point 101 | 102 | **Property name:** *ip* 103 | 104 | **Property type:** Number 105 | 106 | **Required** 107 | 108 | The In point can be any number, positive or negative, and indicates the initial 109 | frame of the animation that should be rendered. 110 | 111 | ### Out point 112 | 113 | **Property name:** *op* 114 | 115 | **Property type:** Number 116 | 117 | The Out point can be any number, positive or negative, and indicates the final 118 | frame (not included) of the animation that should be rendered. 119 | 120 | ## Frame Rate 121 | 122 | **Property name:** *fr* 123 | 124 | **Property type:** Number 125 | 126 | **Required** 127 | 128 | An animation has a defined framerate. It represents the number of frames per 129 | second that should be used to calculate time interpolations. Its value can range 130 | from 0 (not included) to any positive number. 131 | 132 | The larger the frame rate, the more time-based resolution the animation will 133 | have. This allows for more fine grained interpolations, specially useful for 134 | heavy based discrete effects. 135 | 136 | On the other hand, a large frame rate will need an equally large refresh rate, 137 | which will be covered in the next section. 138 | 139 | ## Refresh Rate 140 | 141 | The refresh rate of an animation is not explicitly defined in the animation 142 | definition. It can depend on platform capabilities, engine preferences, and 143 | could change during the course of an animation. 144 | 145 | It describes the number of times per second the engine should compute new values 146 | and redraw the canvas. The larger its value, the smoother the animation will 147 | look, but it will also require more computational power to calculate values and 148 | redraw the result. 149 | 150 | In general, devices have a refresh rate of 60Hz or 120Hz which means that 151 | animations have a 16ms or 8ms budget, respectively, to redraw. A 60Hz default 152 | refresh rate should be enough to render a smooth looking animation. 153 | 154 | It is encouraged to develop an API to modify this value. This API can be used 155 | for different scenarios: 156 | 157 | * When performance issues can be detected and signaled, modifying the refresh 158 | rate should reduce per frame calculations and hence free computing cycles for 159 | other requirements. 160 | 161 | * When the animation is not the most relevant element in the view, a lower 162 | refresh rate should be enough and it can be modified when the animation is 163 | front and center. 164 | 165 | * When a user has reduced motion settings enabled. 166 | 167 | * When a specific refresh rate reflects a particular design decision to convey a 168 | message, effect or experience. 169 | 170 | Note: If the refresh rate differs from the defined original frame rate, it can 171 | have unexpected values when interpolating between keyframes. Particularly when 172 | two keyframes are positioned on consecutive frames, with different values, and 173 | its easing expects an interpolation between them. 174 | 175 | Relying on how the animation looks in the authoring tool is not enough, since it 176 | can have a fixed refresh rate that doesn’t match the default one used inthe 177 | runtime environment. 178 | 179 | This issue can be solved in two ways. The first is to make sure that when 180 | designing the animation, frames that should not interpolate are correctly set to 181 | behave that way by using the hold type interpolation. 182 | 183 | The second is to match refresh rate and frame rate. This should guarantee parity 184 | between authoring tools and runtimes, but it can be a limitation to take 185 | advantage of the full display rate of the device. The animation might look 186 | degraded compared to other transitions. Nevertheless, this feature can be 187 | especially useful for testing purposes where one set of stills has to match 188 | another set. 189 | 190 | ## Playback speed 191 | 192 | Playback speed is a value that describes the ratio between the total duration of 193 | the original animation and the duration at which the animation is playing. 194 | 195 | This value is not part of the animation format but it should be an implicit or 196 | explicit value of the runtime engine. Default playback speed is 1 which means 197 | that the animation duration and playback duration are equal. 198 | 199 | Negative values are supported, and they describe an animation that is played in 200 | a reverse direction. (See direction as another option to reverse animation 201 | playback.) 202 | 203 | It is encouraged to expose an API to modify this value, but there is no 204 | specification on how that API should be implemented. 205 | 206 | This capability, combined with the previous refresh rate, allows for effects 207 | like slow motion or high rate animations. 208 | 209 | ## Direction 210 | 211 | Playback direction describes the direction at which the animation is 212 | progressing. This value is not part of the animation format, but it is part of 213 | the runtime engine. Its value can be either 1 or -1. Implicitly it has a default 214 | value of 1, which means that the animation is running in its original direction. 215 | 216 | It is encouraged to expose an API to modify this value, but there is no 217 | specification on how that API should be implemented. 218 | 219 | ## Loop 220 | 221 | Loop describes if the animation should restart once it reaches the end. This 222 | value is not part of the animation format, but it is part of the runtime engine. 223 | Its value can be either a boolean or a natural number including the 0 value. If 224 | the value is 1, the animation should loop one time after it reaches the end, 225 | totalling a number of 2 full cycles. 226 | 227 | The true value should mean infinite loops, and false should mean 0 loops. 228 | 229 | # Property types 230 | 231 | Lottie has multiple properties depending on what type of layer, content and 232 | attribute they are targeting. Below is the list of different types. 233 | 234 | ## Number 235 | 236 | **Type**: number 237 | 238 | A number property is a single floating point value. Depending on the attribute, 239 | they can have valid ranges that will be specified when necessary. 240 | 241 | ## Array 242 | 243 | **Type: **array[Number] 244 | 245 | Some properties can have a single dimensional array containing the corresponding 246 | value. 247 | 248 | ## String 249 | 250 | **Type: **string 251 | 252 | ## Boolean 253 | 254 | **Type: **boolean 255 | 256 | ## Shape 257 | 258 | **Type: **object 259 | 260 | Shapes are defined by four properties that describe the collection of bezier 261 | curves that represent each path segment of the shape. 262 | 263 | ### Vertices 264 | 265 | **Property Name**: *v* 266 | 267 | **Property Type**: Array of Tuples of length 2 and type Number 268 | 269 | **Required** 270 | 271 | Vertices describe the collection of vertices needed to draw the bezier curves. 272 | 273 | ### In Points 274 | 275 | **Property Name**: *i* 276 | 277 | **Property Type**: Array of Tuples of length 2 and type Number 278 | 279 | **Required** 280 | 281 | In Points describe the collection of incoming control points needed to draw the 282 | bezier curve. The number of in points should match the number of vertices of the 283 | shape. 284 | 285 | ### Out Points 286 | 287 | **Property Name**: *o* 288 | 289 | **Property Type**: Array of Tuples of length 2 and type Number 290 | 291 | **Required** 292 | 293 | Out Points describe the collection of outgoing control points needed to draw the 294 | bezier curve. The number of out points should match the number of vertices of 295 | the shape. 296 | 297 | ### Is Closed 298 | 299 | **Property Name**: *c* 300 | 301 | **Property Type**: Boolean 302 | 303 | If true, the last vertex should connect to the first vertex of the list using 304 | the out points of the last vertex and in points of the first to draw a bezier 305 | curve that closes the shape. 306 | 307 | If false, the shape stroke between the first and last vertex should not be drawn 308 | and the shape fill should describe a straight line between them. 309 | 310 | ## Color 311 | 312 | **Type: **Tuples of length 3 and type Number 313 | 314 | A Color is expressed as a 3-dimensional tuple where the first index is the red 315 | component, the second is blue, and the third is green. All three values range 316 | from 0 to 1. 317 | 318 | Color is a special case of an Array. 319 | 320 | ## Gradient 321 | 322 | **Type: **object 323 | 324 | In order to express gradients in a concise way, gradients are described by two 325 | properties. 326 | 327 | ### Points 328 | 329 | **Property Name**: *p* 330 | 331 | **Property Type**: Number 332 | 333 | **Required** 334 | 335 | Points describe the number of stops the gradient has. 336 | 337 | ### Colors 338 | 339 | **Required** 340 | 341 | **Property Name**: *k* 342 | 343 | **Property Type**: Array[Number] 344 | 345 | Each color stop has 4 values (color stop location, red, green, blue), and they 346 | are all appended to the same array sequentially. 347 | 348 | If the gradient has opacity, since opacity stops can differ from color stops, 349 | they will be appended to the same array. All opacity values will be grouped at 350 | the end of the array expressed as a pair of floating point numbers (opacity 351 | color stop, opacity value). 352 | 353 | Although opacity can have different color stop values, the total number of 354 | opacity stops should be equal to the number of color stops. 355 | 356 | In order to identify whether the array is representing only color values or also 357 | opacity values, the Points property must be used. 358 | 359 | ## Text Document 360 | 361 | ### Font Family 362 | 363 | **Property name:** *f* 364 | 365 | **Property type**: string 366 | 367 | **Required** 368 | 369 | The font family of the rendered text 370 | 371 | ### Font Size 372 | 373 | **Property name:** *s* 374 | 375 | **Property type**: Number 376 | 377 | **Required** 378 | 379 | The font size of the text 380 | 381 | ### Font Caps 382 | 383 | **Property name:** *ca* 384 | 385 | **Property type**: Number 386 | 387 | **Required** 388 | 389 | Caps accepts 3 values. 390 | 391 | * 0 for regular, 392 | 393 | * 1 for All Caps, 394 | 395 | * 2 for Small Caps 396 | 397 | ### Paragraph Justification 398 | 399 | **Property name:** *j* 400 | 401 | **Property type**: Number 402 | 403 | **Required** 404 | 405 | Justification accepts 6 values. 406 | 407 | * 0 for left justification 408 | 409 | * 1 for right justification 410 | 411 | * 2 for center justification 412 | 413 | * 3 for full justification with last line aligned left 414 | 415 | * 4 for full justification with last line aligned right 416 | 417 | * 5 for full justification with last line aligned center 418 | 419 | * 6 for full justification 420 | 421 | ### Text Tracking 422 | 423 | **Property name:** *tr* 424 | 425 | **Property type**: Number 426 | 427 | **Required** 428 | 429 | Tracking of the text 430 | 431 | ### Paragraph Line Height 432 | 433 | **Property name:** *lh* 434 | 435 | **Property type**: Number 436 | 437 | **Required** 438 | 439 | Line height of each text line 440 | 441 | ### Baseline Shift 442 | 443 | **Property name:** *ls* 444 | 445 | **Property type**: Number 446 | 447 | **Required** 448 | 449 | Distance from the text to its baseline. It can be a positive or negative value. 450 | 451 | ### Fill Color 452 | 453 | **Property name:** *fc* 454 | 455 | **Property type**: Color 456 | 457 | **Optional** 458 | 459 | Fill color of the text 460 | 461 | ### Stroke Color 462 | 463 | **Property name:** *sc* 464 | 465 | **Property type**: Color 466 | 467 | **Optional** 468 | 469 | Stroke color of the text 470 | 471 | ### Stroke Width 472 | 473 | **Property name:** *sw* 474 | 475 | **Property type**: Number 476 | 477 | **Optional** 478 | 479 | Stroke width of the text 480 | 481 | ### Box size 482 | 483 | **Property name:** *sz* 484 | 485 | **Property type**: Number 486 | 487 | **Optional** 488 | 489 | Text layers can have a text box that defines the boundaries of the container 490 | where text would be rendered. Text lines should wrap around the box. If text 491 | exceeds the box, it should clip it. 492 | 493 | ### Box position 494 | 495 | **Property name:** *ps* 496 | 497 | **Property type**: Coordinate 498 | 499 | **Optional** 500 | 501 | If the text layer has a box size defined, this property defines the position of 502 | the box relative to the layer. 503 | 504 | # Animatable properties 505 | 506 | Lottie supports animating different types of properties. Some of them are 507 | multidimensional, some are unidimensional, and some have a spatial component. 508 | Depending on the type of property, some attributes may vary. When these 509 | properties are not animated, their signature will be different. 510 | 511 | ## Easing types 512 | 513 | Lottie has different easing types depending on the type of property that is 514 | being interpolated. 515 | 516 | ### One Dimensional Easing 517 | 518 | Properties with this easing type have a single easing function for all parts of 519 | the interpolating object. For example, shape vertices, outpoint and inpoints 520 | share a single easing function. 521 | 522 | #### Out Point 523 | 524 | **Property Name**: *o* 525 | 526 | **Property Type**: object 527 | 528 | **Required** 529 | 530 | The outpoint is the outgoing bezier control point that describes the easing 531 | function. 532 | 533 | #### Coord x 534 | 535 | **Property Name**: *x* 536 | 537 | **Property Type**: Number 538 | 539 | **Required** 540 | 541 | The x component of the control point 542 | 543 | #### Coord y 544 | 545 | **Property Name**: *y* 546 | 547 | **Property Type**: Number 548 | 549 | **Required** 550 | 551 | The y component of the control point 552 | 553 | #### In Point 554 | 555 | **Property Name**: *i* 556 | 557 | **Property Type**: object 558 | 559 | **Required** 560 | 561 | The outpoint is the outgoing bezier control point that describes the easing 562 | function. 563 | 564 | #### Coord x 565 | 566 | **Property Name**: *x* 567 | 568 | **Property Type**: Number 569 | 570 | **Required** 571 | 572 | The x component of the control point 573 | 574 | #### Coord y 575 | 576 | **Property Name**: *y* 577 | 578 | **Property Type**: Number 579 | 580 | **Required** 581 | 582 | The y component of the control point 583 | 584 | ### Multi Dimensional Easing 585 | 586 | Properties with this easing type have a different easing function for each of 587 | their dimensions. 588 | 589 | #### Out Point 590 | 591 | **Property Name**: *o* 592 | 593 | **Property Type**: object 594 | 595 | **Required** 596 | 597 | The outpoint is the outgoing bezier control point that describes the easing 598 | function. 599 | 600 | ##### Coord x 601 | 602 | **Property Name**: *x* 603 | 604 | **Property Type**: Array[Number] 605 | 606 | **Required** 607 | 608 | The list of x components of the control point 609 | 610 | ##### Coord y 611 | 612 | **Property Name**: *y* 613 | 614 | **Property Type**: Array[Number] 615 | 616 | **Required** 617 | 618 | The list of y components of the control point 619 | 620 | #### In Point 621 | 622 | **Property Name**: *i* 623 | 624 | **Property Type**: object 625 | 626 | **Required** 627 | 628 | The outpoint is the outgoing bezier control point that describes the easing 629 | function. 630 | 631 | ##### Coord x 632 | 633 | **Property Type**: Array[Number] 634 | 635 | **Required** 636 | 637 | The list of x components of the control point 638 | 639 | The x component of the control point 640 | 641 | ##### Coord y 642 | 643 | **Property Type**: Array[Number] 644 | 645 | **Required** 646 | 647 | The list of y components of the control point 648 | 649 | The y component of the control point 650 | 651 | ## Non animated 652 | 653 | When an animatable property is not animated, it will consist of a single prop 654 | called "k", and its value will depend on the type of property. 655 | 656 | ## Animated 657 | 658 | Animation objects are mostly described by five attributes: time, easing in, 659 | easing out, hold and value 660 | 661 | ### Time 662 | 663 | **Property name**: *t* 664 | 665 | **Property type**: Number 666 | 667 | **Required** 668 | 669 | Time describes, in frames, the time at which a new value is specified. 670 | 671 | ### Easing Out 672 | 673 | **Property name**: *o* 674 | 675 | **Property type**: One Dimensional Easing | Multi Dimensional Easing 676 | 677 | **Required** 678 | 679 | Easing out describes the outgoing interpolation values used to create the easing 680 | function between two keyframes. 681 | 682 | ### Easing In 683 | 684 | **Property name**: *i* 685 | 686 | **Property type**: One Dimensional Easing | Multi Dimensional Easing 687 | 688 | **Required** 689 | 690 | Easing in describes the incoming interpolation values used to create the easing 691 | function between two keyframes. 692 | 693 | ### Hold 694 | 695 | **Property name**: *h* 696 | 697 | **Property type**: Boolean 698 | 699 | **Optional** 700 | 701 | If true, the hold property indicates that the specific keyframe should not 702 | interpolate to the next value and instead should stay on its own value until it 703 | reaches the next keyframe. 704 | 705 | ### Value 706 | 707 | **Property name**: *s* 708 | 709 | **Property type**: Number | One Dimensional Array | Multi Dimensional Array | 710 | Shape | Gradient | Text Document | Color 711 | 712 | **Required** 713 | 714 | The value of the property at the specific keyframe that should be rendered at 715 | time t 716 | 717 | ## One Dimensional Animated Property 718 | 719 | One Dimensional Animated Properties include the same properties as animated 720 | properties. Their easing type is One Dimensional Easing. 721 | 722 | Their value type is a Number or an Array. 723 | 724 | ## Multi Dimensional Animated Property 725 | 726 | Multi Dimensional Animated Properties include the same properties as animated 727 | properties. Their easing type is Multi Dimensional Easing. 728 | 729 | Their value type is an Array. 730 | 731 | ## Shape Animated Property 732 | 733 | Shape Animated Properties include the same properties as animated properties. 734 | Their easing type is One Dimensional Easing and their value type is Shape. 735 | 736 | ## Gradient Animated Property 737 | 738 | Shape Animated Properties include the same properties as animated properties. 739 | Their easing type is One Dimensional Easing and their value type is Gradient. 740 | 741 | ## Spatial Animated Property 742 | 743 | Spatial properties include the same properties as animated properties but they 744 | add two extra properties that describe how the spatial interpolation should be 745 | applied. These two properties describe the bezier curve control points needed to 746 | draw the path between the spatial coordinates. Values are relative to the 747 | coordinates of each keyframe. 748 | 749 | Their easing type is One Dimensional Easing. 750 | 751 | ### Spatial Out 752 | 753 | **Property name**: *to* 754 | 755 | **Property type**: Array[Number] 756 | 757 | **Required** 758 | 759 | The coordinates of the first control point of the bezier curve relative to the 760 | initial value of the interpolated segment 761 | 762 | ### Spatial In 763 | 764 | **Property name**: *ti* 765 | 766 | **Property type**: Array[Number] 767 | 768 | **Required** 769 | 770 | The coordinates of the second control point of the bezier curve relative to the 771 | end value of the interpolated segment 772 | 773 | ## Text Document Animated Property 774 | 775 | Text Document Animated Properties include the same properties as animated 776 | properties. They don’t have an easing value and their Hold property is set to 777 | true. 778 | 779 | # Assets 780 | 781 | Assets are a collection of source objects needed to fill layer information that 782 | could be shared between multiple layer instances. 783 | 784 | They range from preComps, audios, images, font binaries. 785 | 786 | These objects do not always have a specified type, when they don’t, content can 787 | be inferred from the requester. 788 | 789 | ## Precomps 790 | 791 | Precomps have three properties: id, name and layers. 792 | 793 | ### Precomp id 794 | 795 | **Property name:** *id* 796 | 797 | **Property type:** Number 798 | 799 | **Required** 800 | 801 | The id of the precomp source 802 | 803 | ### Precomp name 804 | 805 | **Property name:** *nm* 806 | 807 | **Property type:** string 808 | 809 | **Required** 810 | 811 | The name of the source of the comp. This property is useful for expressions that 812 | reference another composition. 813 | 814 | ### Precomp layers 815 | 816 | **Property name:** *layers* 817 | 818 | **Property type:** Array[Layers] 819 | 820 | **Required** 821 | 822 | The list of layers that compose a precomposition 823 | 824 | ## Images 825 | 826 | Images contain the information to obtain an image source. It can be expressed in 827 | different ways: inline or pointing to an external path. 828 | 829 | ### Asset type 830 | 831 | **Property name:** *t* 832 | 833 | **Property type:** Enum[Number] 834 | 835 | **Property value:** 1 836 | 837 | **Optional** 838 | 839 | The type of the asset 840 | 841 | ### Image id 842 | 843 | **Property name:** *id* 844 | 845 | **Property type:** Number 846 | 847 | **Required** 848 | 849 | The id of the image source 850 | 851 | ### Image mode 852 | 853 | **Property name:** *e* 854 | 855 | **Property type:** Enum[Number] 856 | 857 | **Required** 858 | 859 | The way information is stored to retrieve the asset. Its values are 860 | 861 | * 0 when the asset is loaded externally 862 | 863 | * 1 when the asset is embedded inline in the json file 864 | 865 | ### Image width 866 | 867 | **Property name:** *w* 868 | 869 | **Property type:** Number 870 | 871 | **Required** 872 | 873 | The width of the image source 874 | 875 | ### Image height 876 | 877 | **Property name:** *h* 878 | 879 | **Property type:** Number 880 | 881 | **Required** 882 | 883 | The height of the image source 884 | 885 | ### Image path 886 | 887 | **Property name:** *u* 888 | 889 | **Property type:** String 890 | 891 | **Required** 892 | 893 | The path of the image excluding the file name 894 | 895 | ### Image name 896 | 897 | **Property name:** *p* 898 | 899 | **Property type:** String 900 | 901 | **Required** 902 | 903 | If asset mode is 0, it indicates the file name of the image. 904 | 905 | If asset mode is 1, it contains the embedded image encoded as base 64. 906 | 907 | ## Audio 908 | 909 | Audio contains the information to obtain an audio source. It can be expressed in 910 | different ways: inline or pointing to an external path. 911 | 912 | ### Asset type 913 | 914 | **Property name:** *t* 915 | 916 | **Property type:** Enum[Number] 917 | 918 | **Property value:** 2 919 | 920 | **Required** 921 | 922 | The type of the asset 923 | 924 | ### Audio id 925 | 926 | **Property name:** *id* 927 | 928 | **Property type:** Number 929 | 930 | **Required** 931 | 932 | The id of the audio source 933 | 934 | ### Audio mode 935 | 936 | **Property name:** *e* 937 | 938 | **Property type:** Enum[Number] 939 | 940 | **Required** 941 | 942 | The way information is stored to retrieve the asset. Its values are 943 | 944 | * 0 when the asset is loaded externally 945 | 946 | * 1 when the asset is embedded inline in the json file 947 | 948 | ### Audio path 949 | 950 | **Property name:** *u* 951 | 952 | **Property type:** String 953 | 954 | **Required** 955 | 956 | The path of the audio excluding the file name 957 | 958 | ### Audio name 959 | 960 | **Property name:** *p* 961 | 962 | **Property type:** String 963 | 964 | **Required** 965 | 966 | If asset mode is 0, it indicates the file name of the audio. 967 | 968 | If asset mode is 1, it contains the embedded audio encoded as base 64. 969 | 970 | # Text Data 971 | 972 | In order to render text, two different solutions are provided by the format. 973 | Text can be exported as glyphs or as regular text data. 974 | 975 | ## Glyphs 976 | 977 | Glyphs allows Lottie to detach itself from any external font file to render 978 | text. By including every character as a shape described by bezier curves, it can 979 | render text independently from the original font. 980 | 981 | ### Chars 982 | 983 | **Property name:** *chars* 984 | 985 | **Property type:** Array[Char] 986 | 987 | The chars array contains the list of all characters available to be rendered. 988 | 989 | #### Char Object 990 | 991 | **Property type:** Object 992 | 993 | A character is described by a set of properties to identify its font family, 994 | shape and other necessary properties to be rendered. 995 | 996 | ##### Character 997 | 998 | **Property name:** *ch* 999 | 1000 | **Property type:** String 1001 | 1002 | **Required** 1003 | 1004 | The character string. It should be used to map the character requested by a text 1005 | layer. 1006 | 1007 | ##### Style 1008 | 1009 | **Property name:** *style* 1010 | 1011 | **Property type:** String 1012 | 1013 | **Required** 1014 | 1015 | The font style. It should be used to map the character requested by a text 1016 | layer. 1017 | 1018 | ##### Font Family 1019 | 1020 | **Property name:** *fFamily* 1021 | 1022 | **Property type:** String 1023 | 1024 | **Required** 1025 | 1026 | The font family. It should be used to map the character requested by a text 1027 | layer. 1028 | 1029 | ##### Advance Width 1030 | 1031 | **Property name:** *w* 1032 | 1033 | **Property type:** Number 1034 | 1035 | **Required** 1036 | 1037 | The distance at which the following character should be drawn, expressed 1038 | relative to a font size of 100px. 1039 | 1040 | ##### Data 1041 | 1042 | **Property name:** *data* 1043 | 1044 | **Property type:** object 1045 | 1046 | **Required** 1047 | 1048 | The data object contains a set of extra properties relative to the character. 1049 | 1050 | ###### Shapes 1051 | 1052 | **Property name:** *shapes* 1053 | 1054 | **Property type:** Array[Shape] 1055 | 1056 | **Required** 1057 | 1058 | The list of shapes that represent the character 1059 | 1060 | ## Fonts 1061 | 1062 | **Property name:** *fonts* 1063 | 1064 | **Property type:** object 1065 | 1066 | **Required** 1067 | 1068 | Fonts contain a set of properties related to font information needed to render 1069 | text layers. 1070 | 1071 | ### Fonts List 1072 | 1073 | **Property name:** *list* 1074 | 1075 | **Property type:** Array[Font] 1076 | 1077 | The list property contains the array of fonts needed to render all text layers. 1078 | 1079 | #### Font 1080 | 1081 | **Property type:** Object 1082 | 1083 | Each font describes the font information needed to render a specific text layer 1084 | type. 1085 | 1086 | ##### Font Origin 1087 | 1088 | **Property name:** *origin* 1089 | 1090 | **Property type:** Enum[Number] 1091 | 1092 | **Required** 1093 | 1094 | The font origin indicates how to interpret the other properties in order to load 1095 | the font 1096 | 1097 | * 0 for None 1098 | 1099 | * 1 for Google 1100 | 1101 | * 2 for Typekit 1102 | 1103 | * 3 for URL 1104 | 1105 | ##### Font Path 1106 | 1107 | **Property name:** *fPath* 1108 | 1109 | **Property type:** String 1110 | 1111 | **Required** 1112 | 1113 | The path that should be used to load the font 1114 | 1115 | ##### Font Class 1116 | 1117 | **Property name:** *fClass* 1118 | 1119 | **Property type:** String 1120 | 1121 | **Optional** 1122 | 1123 | The class that should be assigned to the text element for it to get the font 1124 | assigned via a css selector 1125 | 1126 | ##### Font Name 1127 | 1128 | **Property name:** *fName* 1129 | 1130 | **Property type:** String 1131 | 1132 | **Required** 1133 | 1134 | The name of the font to identify which font should be used to render the text 1135 | 1136 | ##### Font Family 1137 | 1138 | **Property name:** *fFamily* 1139 | 1140 | **Property type:** String 1141 | 1142 | **Required** 1143 | 1144 | The value of the font family 1145 | 1146 | ##### Font Weight 1147 | 1148 | **Property name:** *fWeight* 1149 | 1150 | **Property type:** String 1151 | 1152 | **Required** 1153 | 1154 | The value of the font weight 1155 | 1156 | ##### Font Style 1157 | 1158 | **Property name:** *fStyle* 1159 | 1160 | **Property type:** String 1161 | 1162 | **Required** 1163 | 1164 | The value of the font style 1165 | 1166 | ##### Ascent 1167 | 1168 | **Property name:** *ascent* 1169 | 1170 | **Property type:** Number 1171 | 1172 | **Required** 1173 | 1174 | The value of the font ascent expressed relative to a font size of 100px. The 1175 | ascent references the yOffset by which to draw the character. 1176 | 1177 | # Layers 1178 | 1179 | ## Introduction 1180 | 1181 | A collection of layers describes an animation or a composition (see compositions 1182 | for more information). 1183 | 1184 | They are the building blocks of an animation. The order of layers represents (in 1185 | most cases) the order in which they should be rendered. The first element in the 1186 | list should be rendered above all the other elements on the stack. 1187 | 1188 | Some exceptions to this rule are camera layers that don’t have a visual 1189 | representation on the canvas. Others, that are not yet part of the 1190 | specification, are Light layers, and Adjustment layers. 1191 | 1192 | Layers are categorized by the type of content, and each should be rendered 1193 | according to their unique specification. 1194 | 1195 | ## Layer Properties 1196 | 1197 | Layers have common properties and unique properties related to their content. In 1198 | this section common properties will be covered. 1199 | 1200 | ### Transform 1201 | 1202 | **Property names**: *ks * 1203 | 1204 | **Property type**: object 1205 | 1206 | **Required** 1207 | 1208 | The transform property is a container for a set of properties that are 1209 | traditionally related to GPU operations on textures. They represent affine 1210 | operations and opacity. 1211 | 1212 | #### Anchor Point 1213 | 1214 | **Property name**: *a * 1215 | 1216 | **Property type**: Non-Animated Array | Spatial Animated Property 1217 | 1218 | **Required** 1219 | 1220 | The Anchor point is a two-dimensional (or three if layer is 3d) array that 1221 | represents the origin from which other transformations should be applied. 1222 | 1223 | #### Position 1224 | 1225 | **Property name**: *p* 1226 | 1227 | **Property type**: object | Non-Animated Array | Spatial Animated Property 1228 | 1229 | **Required** 1230 | 1231 | The position can be expressed in two different ways, and it will be indicated by 1232 | a property called "s". If s is true, dimensions are separate. If s is false, it 1233 | behaves as an Array. 1234 | 1235 | ##### Position Separate Dimensions 1236 | 1237 | **Property names**: *x, y, z * 1238 | 1239 | **Property types**: Non-Animated Number | Multi Dimensional Animated Property 1240 | 1241 | **Required** 1242 | 1243 | If dimensions are separate, the position will be a container for 2 (or 3 if the 1244 | layer is 3d) one-dimensional independent properties. Those properties are "x", 1245 | “y”, and “z” and they can be animated separately. 1246 | 1247 | #### Scale 1248 | 1249 | **Property name**: *s * 1250 | 1251 | **Property type**: Non-Animated Array | Multi Dimensional Animated Property 1252 | 1253 | **Required** 1254 | 1255 | The scale is a two dimensional (or three if layer is 3d) array that represents 1256 | the scaling percentage of the layer. If its value is 100%, no scaling is 1257 | applied. 1258 | 1259 | #### Rotation for 2d layers 1260 | 1261 | **Property name**: *r* 1262 | 1263 | **Property type**: Non-Animated Number | Multi Dimensional Animated Property 1264 | 1265 | **Conditional** 1266 | 1267 | This property is the rotation expressed in degrees applied to the layer. 1268 | 1269 | #### X Rotation for 3d layers 1270 | 1271 | **Property names**: *rx * 1272 | 1273 | **Property type**: Non-Animated Number | Multi Dimensional Animated Property 1274 | 1275 | **Conditional** 1276 | 1277 | This property is the x rotation expressed in degrees applied to the layer. 1278 | 1279 | #### Y Rotation for 3d layers 1280 | 1281 | **Property names**: *ry * 1282 | 1283 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1284 | 1285 | **Conditional** 1286 | 1287 | This property is the y rotation expressed in degrees applied to the layer. 1288 | 1289 | #### Z Rotation for 3d layers 1290 | 1291 | **Property names**: *rz * 1292 | 1293 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1294 | 1295 | **Conditional** 1296 | 1297 | This property is the z rotation expressed in degrees applied to the layer. 1298 | 1299 | #### Orientation for 3d layers 1300 | 1301 | **Property name**: *or* 1302 | 1303 | **Property type**: Non Animated Array | Spatial Animated Property 1304 | 1305 | **Optional** 1306 | 1307 | 3d layers have an extra property called orientation represented by an array of 3 1308 | floating point values expressed in degrees. It indicates the pitch, roll and yaw 1309 | of the layer. 1310 | 1311 | #### Opacity 1312 | 1313 | **Property name**: *o* 1314 | 1315 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1316 | 1317 | **REquired** 1318 | 1319 | Opacity is a percentage based value. It defaults to 100 which means the layer is 1320 | fully opaque. Value 0 means the layer is fully transparent. 1321 | 1322 | This property ranges from 0 to 100. 1323 | 1324 | #### Skew 1325 | 1326 | **Property name**: *sk* 1327 | 1328 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1329 | 1330 | Skew indicates the slant of the element. 1331 | 1332 | #### Skew Axis 1333 | 1334 | **Property name**: *sa* 1335 | 1336 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1337 | 1338 | Skew axis specifies the axis along which the character is skewed. 1339 | 1340 | ### Index 1341 | 1342 | **Property name**: *ind* 1343 | 1344 | **Property type**: Number 1345 | 1346 | The index refers to a unique id that each layer has within a stack. It is used 1347 | for parenting and also for certain expressions. 1348 | 1349 | ### Parenting 1350 | 1351 | **Property name**: *parent* 1352 | 1353 | **Property type**: Number 1354 | 1355 | **Optional** 1356 | 1357 | If present, it points to the *ind* property of the target layer whose transform 1358 | data should be included in the transform operations that affect the layer. When 1359 | a layer has this attribute set, in order to draw the content, first all the 1360 | parenting hierarchy needs to be looked up iteratively. Once the parenting chain 1361 | is complete (the top layer doesn’t have a parent property set to look up), 1362 | transforms have to be applied from the top layer down to the transforms of the 1363 | current layer. 1364 | 1365 | Note: Parenting should never target the original layer as part of the chain or 1366 | it would create an endless loop. 1367 | 1368 | ### Time Stretch 1369 | 1370 | **Property name**: *sr* 1371 | 1372 | **Property type**: Number 1373 | 1374 | **Optional** 1375 | 1376 | **Default: 1** 1377 | 1378 | This is a factor by which time should be stretched on keyframe information. A 1379 | value of 1 means that no stretching is needed. 1380 | 1381 | ## Masks 1382 | 1383 | **Property name:** *masksProperties* 1384 | 1385 | **Property type**: Array[Mask Elements] 1386 | 1387 | Masks define a list of bezier curve shapes that act as clipping paths or 1388 | composite operations on layers. Multiple masks with different properties can be 1389 | applied to the same layer where, depending on the mask mode, different rules of 1390 | stacking apply. 1391 | 1392 | ### Matte Masks 1393 | 1394 | Matte masks are pairs of layers where one acts as a mask for the other. Those 1395 | layers are indicated by a tt property on the masked layer and a td on the 1396 | masking one. They are always stacked one after to the other on the stacking 1397 | order. 1398 | 1399 | #### Masked Layer 1400 | 1401 | **Property name:** *tt* 1402 | 1403 | **Property type**: Enum[Number] 1404 | 1405 | **Optional (Required if previous layer has a td property)** 1406 | 1407 | This property only accepts four values and describes the type of mask that 1408 | should be applied. 1409 | 1410 | Its values are 1411 | 1412 | * 1 for Alpha Mask 1413 | 1414 | * 2 for Inverted Alpha Mask 1415 | 1416 | * 3 for Luminance Mask 1417 | 1418 | * 4 for Inverted Luminance Mask 1419 | 1420 | #### Masking Layer 1421 | 1422 | **Property name:** *td* 1423 | 1424 | **Property type**: Number 1425 | 1426 | **Property value**: 1 1427 | 1428 | **Optional (Required if next layer has a tt property)** 1429 | 1430 | This property only accepts one value that indicates it should be used as a 1431 | masking layer 1432 | 1433 | ### Mask elements 1434 | 1435 | A mask can be considered as a clipping shape or a composite operation depending 1436 | on their specific properties and types. 1437 | 1438 | #### Mask modes 1439 | 1440 | **Property name:** *mode* 1441 | 1442 | **Property type**: String 1443 | 1444 | **Required** 1445 | 1446 | Mask types describe how the shape should affect the underlying layer. 1447 | 1448 | * **None**: Mask has no effect on the layer. This mode is solely used for 1449 | attaching shapes to a layer that can be used by other properties, effects or 1450 | expressions. 1451 | 1452 | * **Add**: This mode will always take the original layer as input and add the 1453 | opacity values to the final output. 1454 | 1455 | * **Subtract: **This mode will take the output of masks higher in the stack as 1456 | input. If there are no masks, it will take the layer as input. As output it 1457 | will subtract the opacity values from the input. 1458 | 1459 | * **Intersect:** This mode outputs the areas of opacity that overlap with masks 1460 | higher in the stack. 1461 | 1462 | * **Difference:** This mode outputs the subtracted areas of opacity that overlap 1463 | with masks higher in the stack. 1464 | 1465 | #### Inverted property 1466 | 1467 | **Property name:** *inv* 1468 | 1469 | **Property type**: Boolean 1470 | 1471 | **Required** 1472 | 1473 | The inverted property will take the opacity values of the output of the mask 1474 | (with its corresponding higher stack of masks if it applies) and perform a 1475 | boolean filter to invert the result. 1476 | 1477 | #### Path property 1478 | 1479 | **Property name:** *pt* 1480 | 1481 | **Property type**: Non Animated Shape | Shape Animated Property 1482 | 1483 | **Required** 1484 | 1485 | The path property describes the bezier path that the mask will use to apply the 1486 | mask 1487 | 1488 | #### Opacity property 1489 | 1490 | **Property name:** *o* 1491 | 1492 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1493 | 1494 | **Required** 1495 | 1496 | The opacity property defines how clipped pixels will transfer to the final 1497 | output. When opacity is set to 0.5, the resulting output will multiply the 1498 | alpha. 1499 | 1500 | #### Expansion property 1501 | 1502 | **Property name:** *x* 1503 | 1504 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1505 | 1506 | **Required** 1507 | 1508 | Expansion affects the path property of the mask by shrinking or growing it by 1509 | the specified number of pixels. The path should be transformed by the center of 1510 | the shape itself. 1511 | 1512 | Since offsetting bezier curves is not a trivial task, this effect might be hard 1513 | to copy. 1514 | 1515 | Lottie-web makes use of the feMorphology filter and applies an erode operator to 1516 | shrink the mask. For growing it, it adds a stroke to the mask which is used as 1517 | part of the masking itself. 1518 | 1519 | ## Layer Types 1520 | 1521 | Each layer has a type attribute (‘ty’) which indicates the type of content. 1522 | 1523 | ### Solid Layer Type 1524 | 1525 | A solid layer is the simplest type of drawable layer. It has three properties 1526 | specific to the layer type (color, width, height) and others shared with other 1527 | layer types (transform, masks, effects, layer styles). 1528 | 1529 | #### Type Property 1530 | 1531 | **Property name:** *ty* 1532 | 1533 | **Property type**: Enum[Number] 1534 | 1535 | **Property value**: 1 1536 | 1537 | ### Shape Layer Type 1538 | 1539 | Shape layers define a set of shapes and shape modifiers grouped together. It has 1540 | a single specific property (shapes) and others shared with other layer types 1541 | (transform, masks, effects, layer styles). 1542 | 1543 | #### Type Property 1544 | 1545 | **Property name:** *ty* 1546 | 1547 | **Property type**: Enum[Number] 1548 | 1549 | **Property value**: 2 1550 | 1551 | #### Shapes Property 1552 | 1553 | **Property name:** *shapes* 1554 | 1555 | **Property type**: Array[Shape Properties] 1556 | 1557 | Shapes is a collection of paths and path modifiers like fills, colors, groups, 1558 | trim paths. Each property has a type defined by the "ty" prop. 1559 | 1560 | #### Group Element 1561 | 1562 | **type**: *gr* 1563 | 1564 | A group contains a list of shape properties that are rendered as part of that 1565 | group. Any modifiers defined within the group will only apply to the stack 1566 | preceding the modifier but only scoped inside the group. 1567 | 1568 | ##### Items Property 1569 | 1570 | **Property name:** *it* 1571 | 1572 | **Property type**: Array[Shape Properties] 1573 | 1574 | **Required** 1575 | 1576 | The list of items defined within the group 1577 | 1578 | #### Transform Element 1579 | 1580 | **Property name**: *tr* 1581 | 1582 | **Property type:** Transform 1583 | 1584 | **Required** 1585 | 1586 | A transform property that is applied to the stack of elements preceding it 1587 | 1588 | #### Rectangle Element 1589 | 1590 | **type**: *rc* 1591 | 1592 | A rectangle is a parametric shape defined by its size, position and roundness. 1593 | 1594 | ##### Size Property 1595 | 1596 | **Property name:** *s* 1597 | 1598 | **Property type**: Non Animated Array | Multi Dimensional Animated Property 1599 | 1600 | **Required** 1601 | 1602 | Size is a two dimensional array that represents the width and height of the 1603 | rectangle. 1604 | 1605 | ##### Position Property 1606 | 1607 | **Property name:** *p* 1608 | 1609 | **Property type**: Non Animated Array | Multi Dimensional Animated Property 1610 | 1611 | Position is a two-dimensional array that represents the coordinates of the 1612 | rectangle relative to its containing group. 1613 | 1614 | ##### Roundness Property 1615 | 1616 | **Property name:** *r* 1617 | 1618 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1619 | 1620 | Roundness is a one-dimensional value that represents the roundness of the 1621 | rectangle corners. 1622 | 1623 | #### Ellipse Element 1624 | 1625 | **type**: *el* 1626 | 1627 | An ellipse is a parametric shape defined by its size and position 1628 | 1629 | ##### Size Property 1630 | 1631 | **Property name:** *s* 1632 | 1633 | **Property type**:Non Animated Array | Multi Dimensional Animated Property 1634 | 1635 | Size is a two-dimensional array that represents the width and height of the 1636 | rectangle. 1637 | 1638 | ##### Position Property 1639 | 1640 | **Property name:** *p* 1641 | 1642 | **Property type**: Non Animated Array | Multi Dimensional Animated Property 1643 | 1644 | Position is a two-dimensional array that represents the coordinates of the 1645 | rectangle relative to its containing group. 1646 | 1647 | #### Polystar Element 1648 | 1649 | **type**: *sr* 1650 | 1651 | This element has two different subtypes that define a Star or a Polygon. 1652 | 1653 | Its points, position, rotation, outer radius and outer roundness define a 1654 | polygon. 1655 | 1656 | A star is defined by all the same properties as a polygon, and it includes an 1657 | inner roundness and inner radius. 1658 | 1659 | ##### Subtype Property 1660 | 1661 | **Property name:** *sy* 1662 | 1663 | **Property type**: Enum[Number] 1664 | 1665 | * 1 for Star 1666 | 1667 | * 2 for Polygon 1668 | 1669 | **Required** 1670 | 1671 | ##### Points Property 1672 | 1673 | **Property name:** *pt* 1674 | 1675 | **Property type**: Non Animated Shape | Shape Animated Property 1676 | 1677 | **Required** 1678 | 1679 | Points is a one-dimensional number that defines the number of outer corners the 1680 | parametric shape has. 1681 | 1682 | For a polygon, it also equals the total number of corners. 1683 | 1684 | For a star, the number of corners is double, since every segment is subdivided 1685 | by an outer circle and an inner circle. 1686 | 1687 | ##### Position Property 1688 | 1689 | **Property name:** *p* 1690 | 1691 | **Property type**: Non Animated Array | Multi Dimensional Animated Property 1692 | 1693 | **Required** 1694 | 1695 | Position is a two-dimensional array that represents the coordinates of the 1696 | rectangle relative to its containing group. 1697 | 1698 | ##### Rotation Property 1699 | 1700 | **Property name:** *r* 1701 | 1702 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1703 | 1704 | **Required** 1705 | 1706 | Position is a one-dimensional number that represents the rotation angle in 1707 | degrees of the shape. 1708 | 1709 | ##### Outer Radius Property 1710 | 1711 | **Property name:** *or* 1712 | 1713 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1714 | 1715 | **Required** 1716 | 1717 | Outer radius is a one-dimensional number that represents the radius of a circle 1718 | where the outer points of the shape should be inscribed. 1719 | 1720 | ##### Outer Roundness Property 1721 | 1722 | **Property name:** *os* 1723 | 1724 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1725 | 1726 | **Required** 1727 | 1728 | Outer roundness is a one-dimensional number that represents the length of the 1729 | control points of a bezier curve by which the corners of the shape should be 1730 | drawn. Those control points should be tangent to the circle defined by the outer 1731 | radius property. 1732 | 1733 | ##### Inner Radius Property 1734 | 1735 | **Property name:** *ir* 1736 | 1737 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1738 | 1739 | **Conditional** 1740 | 1741 | Inner radius is a one-dimensional number that represents the radius of a circle 1742 | where the inner points of the star should be inscribed. 1743 | 1744 | ##### Inner Roundness Property 1745 | 1746 | **Property name:** *is* 1747 | 1748 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1749 | 1750 | **Conditional** 1751 | 1752 | Inner roundness is a one-dimensional number that represents the length of the 1753 | control points of a bezier curve by which the corners of the inner points of the 1754 | star should be drawn. Those control points should be tangent to the circle 1755 | defined by the inner radius property. 1756 | 1757 | #### Shape Element 1758 | 1759 | **type**: *sh* 1760 | 1761 | This element has a single property defining the path of the shape 1762 | 1763 | ##### Path Property 1764 | 1765 | **Property name:** *ks* 1766 | 1767 | **Property type**: Non Animated Shape | Shape Animated Property 1768 | 1769 | **Required** 1770 | 1771 | The shape described by the collection of bezier curves. 1772 | 1773 | #### Fill Property 1774 | 1775 | **type**: *fl* 1776 | 1777 | **Required** 1778 | 1779 | This property defines the fill color that should be applied to the stack of 1780 | elements preceding it. It has two inner properties, color and opacity 1781 | 1782 | ##### Color Property 1783 | 1784 | **Property name:** *c* 1785 | 1786 | **Property type**: Color | Multi Dimensional Animated Property 1787 | 1788 | **Required** 1789 | 1790 | The color of the fill 1791 | 1792 | ##### Opacity Property 1793 | 1794 | **Property name:** *o* 1795 | 1796 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1797 | 1798 | **Required** 1799 | 1800 | The opacity of the fill 1801 | 1802 | #### Gradient Fill Property 1803 | 1804 | **type**: *gf* 1805 | 1806 | This property defines the gradient fill color that should be applied to the 1807 | stack of elements preceding it. It has seven properties: Type, Start Point, End 1808 | Point, Highlight Angle, Highlight Length, Colors, Opacity. 1809 | 1810 | ##### Type Property 1811 | 1812 | **Property name:** *t* 1813 | 1814 | **Property type**: Enum[Number] 1815 | 1816 | **Required** 1817 | 1818 | This property only accepts two values and describes the type of gradient that 1819 | should be applied. 1820 | 1821 | * 1 for Linear 1822 | 1823 | * 2 for Radial 1824 | 1825 | ##### Start Point Property 1826 | 1827 | **Property name:** *s* 1828 | 1829 | **Property type**: Non Animated Array | Spatial Animated Property 1830 | 1831 | **Required** 1832 | 1833 | A two-dimensional array that represents the coordinates of the starting point of 1834 | the gradient interpolation. 1835 | 1836 | ##### End Point Property 1837 | 1838 | **Property name:** *e* 1839 | 1840 | **Property type**: Non Animated Array | Spatial Animated Property 1841 | 1842 | **Required** 1843 | 1844 | A two-dimensional array that represents the coordinates of the end point of the 1845 | gradient interpolation. 1846 | 1847 | ##### Highlight Length Property 1848 | 1849 | **Property name:** *h* 1850 | 1851 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1852 | 1853 | **Conditional** 1854 | 1855 | A value that offsets the starting point of the gradient. 1856 | 1857 | ##### Highlight Angle Property 1858 | 1859 | **Property name:** *a* 1860 | 1861 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1862 | 1863 | **Conditional** 1864 | 1865 | A value that defines the angle by which the starting point of the gradient will 1866 | be offset. 1867 | 1868 | ##### Color Property 1869 | 1870 | **Property name:** *g* 1871 | 1872 | **Property type**: Gradient | Gradient Animated Property 1873 | 1874 | **Required** 1875 | 1876 | The set of colors that define the gradient 1877 | 1878 | ##### Opacity Property 1879 | 1880 | **Property name:** *o* 1881 | 1882 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1883 | 1884 | **Required** 1885 | 1886 | The opacity of the gradient fill 1887 | 1888 | #### Stroke Property 1889 | 1890 | **type**: *st* 1891 | 1892 | This property defines the stroke color and width that should be applied to the 1893 | stack of elements preceding it. It has six inner properties, color, opacity, 1894 | stroke width, line cap, line join, miter limit. 1895 | 1896 | ##### Color Property 1897 | 1898 | **Property name:** *c* 1899 | 1900 | **Property type**: Color | Multi Dimensional Animated Property 1901 | 1902 | **Required** 1903 | 1904 | The color of the fill 1905 | 1906 | ##### Opacity Property 1907 | 1908 | **Property name:** *o* 1909 | 1910 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1911 | 1912 | **Required** 1913 | 1914 | The opacity of the fill 1915 | 1916 | ##### Stroke Width Property 1917 | 1918 | **Property name:** *w* 1919 | 1920 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1921 | 1922 | **Required** 1923 | 1924 | The width of the stroke applied to the shapes. It does not accept negative 1925 | numbers. 1926 | 1927 | ##### Line Cap Property 1928 | 1929 | **Property name:** *lc* 1930 | 1931 | **Property type**: Enum[Number] 1932 | 1933 | **Required** 1934 | 1935 | The line cap of the stroke 1936 | 1937 | Its values are 1938 | 1939 | * 1 for Butt Cap 1940 | 1941 | * 2 for Round Cap 1942 | 1943 | * 3 for Projecting Cap 1944 | 1945 | ##### Line Join Property 1946 | 1947 | **Property name:** *lj* 1948 | 1949 | **Property type**: Enum[Number] 1950 | 1951 | **Required** 1952 | 1953 | The line join of the stroke 1954 | 1955 | Its values are 1956 | 1957 | * 1 for Miter Join 1958 | 1959 | * 2 for Round Join 1960 | 1961 | * 3 for Bevel Join 1962 | 1963 | ##### Miter Limit Property 1964 | 1965 | **Property name:** *ml* 1966 | 1967 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1968 | 1969 | The miter limit is a one-dimensional value that applies only if the line join 1970 | value of the stroke is Miter Join. 1971 | 1972 | #### Gradient Stroke Property 1973 | 1974 | **type**: *st* 1975 | 1976 | Defines the gradient stroke color and width that should be applied to the stack 1977 | of elements preceding it. It has eleven inner properties, color, opacity, stroke 1978 | width, line cap, line join, miter limit. 1979 | 1980 | ##### Color Property 1981 | 1982 | **Property name:** *g* 1983 | 1984 | **Property type**: Gradient | Gradient Animated Property 1985 | 1986 | **Required** 1987 | 1988 | Describes the set of colors that define the gradient 1989 | 1990 | ##### Opacity Property 1991 | 1992 | **Property name:** *o* 1993 | 1994 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 1995 | 1996 | **Required** 1997 | 1998 | The opacity of the fill 1999 | 2000 | ##### Stroke Width Property 2001 | 2002 | **Property name:** *w* 2003 | 2004 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2005 | 2006 | **Required** 2007 | 2008 | The width of the stroke applied to the shapes 2009 | 2010 | ##### Line Cap Property 2011 | 2012 | **Property name:** *lc* 2013 | 2014 | **Property type**: Number 2015 | 2016 | **Required** 2017 | 2018 | The line cap of the stroke 2019 | 2020 | Its values are 2021 | 2022 | * 1 for Butt Cap 2023 | 2024 | * 2 for Round Cap 2025 | 2026 | * 3 for Projecting Cap 2027 | 2028 | ##### Line Join Property 2029 | 2030 | **Property name:** *lj* 2031 | 2032 | **Property type**: Number 2033 | 2034 | **Required** 2035 | 2036 | The line join of the stroke 2037 | 2038 | Its values are 2039 | 2040 | * 1 for Miter Join 2041 | 2042 | * 2 for Round Join 2043 | 2044 | * 3 for Bevel Join 2045 | 2046 | ##### Miter Limit Property 2047 | 2048 | **Property name:** *ml* 2049 | 2050 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2051 | 2052 | **Required** 2053 | 2054 | The miter limit is a value that applies only if the line join value of the 2055 | stroke is Miter Join. 2056 | 2057 | ##### Type Property 2058 | 2059 | **Property name:** *t* 2060 | 2061 | **Property type**: Enum[Number] 2062 | 2063 | **Required** 2064 | 2065 | This property only accepts two values and describes the type of gradient that 2066 | should be applied. 2067 | 2068 | Its values are 2069 | 2070 | * 1 for Linear 2071 | 2072 | * 2 for Radial 2073 | 2074 | ##### Start Point Property 2075 | 2076 | **Property name:** *s* 2077 | 2078 | **Property type**: Non Animated Array | Multi Dimensional Animated Property 2079 | 2080 | **Required** 2081 | 2082 | A two dimensional array that represents the coordinates of the starting point of 2083 | the gradient interpolation. 2084 | 2085 | ##### End Point Property 2086 | 2087 | **Property name:** *e* 2088 | 2089 | **Property type**: Non Animated Array | Multi Dimensional Animated Property 2090 | 2091 | **Required** 2092 | 2093 | A two-dimensional array that represents the coordinates of the end point of the 2094 | gradient interpolation. 2095 | 2096 | ##### Highlight Length Property 2097 | 2098 | **Property name:** *h* 2099 | 2100 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2101 | 2102 | **Required** 2103 | 2104 | ##### Highlight Angle Property 2105 | 2106 | **Property name:** *a* 2107 | 2108 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2109 | 2110 | **Required** 2111 | 2112 | #### Merge Paths Property 2113 | 2114 | **type**: *mm* 2115 | 2116 | A merge path acts as a shape boolean operation applied to the set of shapes 2117 | preceding it. It contains a single property, the merge mode. 2118 | 2119 | ##### Merge Mode Property 2120 | 2121 | **Property name:** *mm* 2122 | 2123 | **Property type**: Enum[Number] 2124 | 2125 | **Required** 2126 | 2127 | The merge mode defines the type of operation that should be applied to shapes. 2128 | 2129 | Its values are: 2130 | 2131 | * 1 for Merge 2132 | 2133 | * 2 for Add 2134 | 2135 | * 3 for Subtract 2136 | 2137 | * 4 for Intersect 2138 | 2139 | * 5 for Exclude Intersections 2140 | 2141 | #### Offset Paths Property 2142 | 2143 | **type**: *op* 2144 | 2145 | The offset path modifier should grow or shrink the set of shapes preceding it. 2146 | It is defined by three properties: amount, line join and miter limit. 2147 | 2148 | ##### Amount Property 2149 | 2150 | **Property name:** *a* 2151 | 2152 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2153 | 2154 | A one-dimensional value that defines how much the shape should grow or shrink 2155 | 2156 | ##### Line Join Property 2157 | 2158 | **Property name:** *lj* 2159 | 2160 | **Property type**: Enum[Number] 2161 | 2162 | The line join of the stroke 2163 | 2164 | Its Values are 2165 | 2166 | * 1 for Miter Join 2167 | 2168 | * 2 for Round Join 2169 | 2170 | * 3 for Bevel Join 2171 | 2172 | ##### Miter Limit Property 2173 | 2174 | **Property name:** *ml* 2175 | 2176 | **Property type**: object 2177 | 2178 | A one-dimensional value that applies only if the line join value of the stroke 2179 | is Miter Join 2180 | 2181 | #### Repeater Property 2182 | 2183 | **type**: *rp* 2184 | 2185 | The repeater modifier creates copies of the set of shapes preceding it. It is 2186 | defined by three properties: copies, offset, transform. 2187 | 2188 | ##### Copies Property 2189 | 2190 | **Property name:** *c* 2191 | 2192 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2193 | 2194 | **Required** 2195 | 2196 | A one-dimensional value that defines how many copies (including the original 2197 | shape) of the shapes should be drawn 2198 | 2199 | ##### Offset Property 2200 | 2201 | **Property name:** *o* 2202 | 2203 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2204 | 2205 | **Required** 2206 | 2207 | A one-dimensional value that defines how many copies should be skipped before 2208 | starting the count of shapes to be drawn. 2209 | 2210 | This value should be accounted for in order to calculate the following 2211 | *transform* property. 2212 | 2213 | ##### Transform Property 2214 | 2215 | **Property name:** *tr* 2216 | 2217 | **Property type**: Transform 2218 | 2219 | **Required** 2220 | 2221 | For each copy of a repeater, this transform operation is applied before the 2222 | drawing operation is applied. This allows to generate copies of the original 2223 | drawing with a combination of regular transform operations between them. 2224 | 2225 | When the offset property is different from 0, these transform operations should 2226 | accumulate by the amount that the offset value defines before being applied to 2227 | the first copy. 2228 | 2229 | #### Round Corners Property 2230 | 2231 | **type**: *rd* 2232 | 2233 | This modifier affects any vertex of a shape whose bezier control points are 0. 2234 | It has a single property that defines the radius of the effect. 2235 | 2236 | ##### Copies Property 2237 | 2238 | **Property name:** *r* 2239 | 2240 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2241 | 2242 | A one-dimensional value that defines the length of the control points of the 2243 | bezier curve that should be applied to the vertex. The direction of the control 2244 | point should be tangent to the vertex itself. 2245 | 2246 | #### Trim Paths Property 2247 | 2248 | **type**: *tm* 2249 | 2250 | This modifier changes the shape of the set of elements preceding it. Although in 2251 | general, trim paths are expected to only affect the stroke of a shape, this 2252 | modifier should affect both how strokes and fills are applied. 2253 | 2254 | The way the new shape is calculated should measure the full perimeter of the 2255 | shape individually (or the full set of shapes if Trim Multiple Shapes property 2256 | is set to Individually) and regenerate the new set of paths as a percentage of 2257 | the original set. 2258 | 2259 | It is defined by four properties: Start, End, Offset and Trim Multiple Shapes. 2260 | 2261 | ##### Start Property 2262 | 2263 | **Property name:** *s* 2264 | 2265 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2266 | 2267 | **Required** 2268 | 2269 | A one-dimensional value that defines the initial point of the shape that should 2270 | be drawn relative to the initial point of the original shape. It is expressed as 2271 | a percentage of the initial value. 2272 | 2273 | ##### End Property 2274 | 2275 | **Property name:** *e* 2276 | 2277 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2278 | 2279 | **Required** 2280 | 2281 | A one-dimensional value that defines the end point of the shape that should be 2282 | drawn relative to the end point of the original shape. It is expressed as a 2283 | percentage of the end value. 2284 | 2285 | ##### Offset Property 2286 | 2287 | **Property name:** *o* 2288 | 2289 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2290 | 2291 | **Required** 2292 | 2293 | A one-dimensional value that defines an offset by which the start and end points 2294 | should be calculated. A whole cycle is expressed as a 360 offset. 2295 | 2296 | ##### Trim Multiple Shapes Property 2297 | 2298 | **Property name:** *m* 2299 | 2300 | **Property type**: Enum[Number] 2301 | 2302 | **Required** 2303 | 2304 | This property accepts only two values: 2305 | 2306 | * 1 for Simultaneous 2307 | 2308 | * 2 for Individual 2309 | 2310 | Simultaneous means that all shapes should be trimmed applying the calculations 2311 | separately. Individual means that a single trim effect should be applied to all 2312 | of them by calculating the full length of all shapes together. 2313 | 2314 | ### Text Layer Type 2315 | 2316 | A text layer defines a container for text data. It has a single specific 2317 | property (text) and others shared with other layer types (transform, masks, 2318 | effects, layer styles). 2319 | 2320 | #### Type Property 2321 | 2322 | **Property name:** *ty* 2323 | 2324 | **Property type**: Enum (Number) 2325 | 2326 | **Property value**: 5 2327 | 2328 | #### Text 2329 | 2330 | **Property name:** *t* 2331 | 2332 | **Property type**: object 2333 | 2334 | **Required** 2335 | 2336 | A text object is composed of four different objects: document data, animators, 2337 | text path, more options. 2338 | 2339 | #### Document Data 2340 | 2341 | **Property name:** *d* 2342 | 2343 | **Property type**: Text Document | Text Document Animated Property 2344 | 2345 | **Required** 2346 | 2347 | This property contains a single animatable property, k, that is a set of all the 2348 | paragraph data of the text. 2349 | 2350 | #### Text Path Data 2351 | 2352 | **Property name:** *p* 2353 | 2354 | **Property type**: object 2355 | 2356 | **Required** 2357 | 2358 | When enabled, a text layer will use a mask defined on the layer to describe an 2359 | irregular baseline that the text should follow when being rendered. If the text 2360 | has multiple lines, each line will use the same path described by the mask 2361 | offsetted by the line height of the text. 2362 | 2363 | If a line of text exceeds the path described by the mask, both ends of the mask 2364 | should be extended infinitely, parallel to the the first and last vertex of the 2365 | path. 2366 | 2367 | ##### Mask 2368 | 2369 | **Property name:** *m* 2370 | 2371 | **Property type**: Number 2372 | 2373 | **Optional** 2374 | 2375 | The index of the mask defined in the *masksProperties *attribute of the layer 2376 | that will be used as baseline of the text. 2377 | 2378 | ##### First Margin 2379 | 2380 | **Property name:** *f* 2381 | 2382 | **Property type**: Non-Animated Number | Multi Dimensional Animated Property 2383 | 2384 | A margin to offset the drawing of the text from the first vertex of the shape 2385 | 2386 | ##### Last Margin 2387 | 2388 | **Property name:** *l* 2389 | 2390 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2391 | 2392 | **Required** 2393 | 2394 | A margin to offset the drawing of the text from the last vertex of the shape 2395 | 2396 | ##### Force Alignment 2397 | 2398 | **Property name:** *a* 2399 | 2400 | **Property type**: Boolean 2401 | 2402 | **Required** 2403 | 2404 | If active, each line of text should be rendered contained within the shape 2405 | defined by the mask by adjusting the tracking. 2406 | 2407 | ##### Perpendicular to Path 2408 | 2409 | **Property name:** *p* 2410 | 2411 | **Property type**: Boolean 2412 | 2413 | **Required** 2414 | 2415 | If active, text should be rendered perpendicular to the direction of the 2416 | baseline. 2417 | 2418 | ##### Reversed 2419 | 2420 | **Property name:** *r* 2421 | 2422 | **Property type**: Boolean 2423 | 2424 | **Required** 2425 | 2426 | If active, text should be rendered starting from the last vertex of the mask. 2427 | 2428 | #### Other Options 2429 | 2430 | **Property name:** *m* 2431 | 2432 | **Property type**: object 2433 | 2434 | **Required** 2435 | 2436 | This object contains other properties affecting the rendering of the text. 2437 | 2438 | ##### Anchor Point Grouping 2439 | 2440 | **Property name:** *g* 2441 | 2442 | **Property type**: Enum(Number) 2443 | 2444 | **Required** 2445 | 2446 | This property defines how each character anchor point should be grouped relative 2447 | to the defined value to apply animators and drawing along a path. 2448 | 2449 | Its values are: 2450 | 2451 | * 1 aligned to character 2452 | 2453 | * 2 aligned to word 2454 | 2455 | * 3 aligned to line 2456 | 2457 | * 4 aligned to all textbox 2458 | 2459 | ##### Grouping Alignment 2460 | 2461 | **Property name:** *a* 2462 | 2463 | **Property type**: Non Animated Array | Multi Dimensional Animated Property 2464 | 2465 | **Required** 2466 | 2467 | Controls the alignment of the anchor point relative to the anchor point group. 2468 | The tuple defines a pair of coordinates based on a percentage of the group 2469 | anchor point. 2470 | 2471 | #### Animators 2472 | 2473 | **Property name:** *a* 2474 | 2475 | **Property type**: list 2476 | 2477 | **Required** 2478 | 2479 | Animators are a collection of transformations that can be applied to a text 2480 | layer. They consist of a range selector and a set of optional properties. 2481 | 2482 | ##### Range Selector 2483 | 2484 | **Property name:** *s* 2485 | 2486 | **Property type**: object 2487 | 2488 | **Required** 2489 | 2490 | The range selector property has a set of properties that define how 2491 | transformations are applied to the text. This range allows for animations on 2492 | more granular parts of the text, like characters, words, lines and the text box. 2493 | 2494 | ###### Type 2495 | 2496 | **Property name:** *t* 2497 | 2498 | **Property type**: Enum[Number] 2499 | 2500 | **Required** 2501 | 2502 | It specifies the type of selector, it can be expression based or parametric. 2503 | 2504 | * 0 for parametric 2505 | 2506 | * 1 for expression 2507 | 2508 | ###### Range Units 2509 | 2510 | **Property name:** *r* 2511 | 2512 | **Property type**: Enum[Number] 2513 | 2514 | **Required** 2515 | 2516 | It specifies the units that are used to calculate ranges. 2517 | 2518 | * 1 for percentage based 2519 | 2520 | * 2 for index based 2521 | 2522 | ###### Range Start 2523 | 2524 | **Property name:** *s* 2525 | 2526 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2527 | 2528 | **Required** 2529 | 2530 | It specifies the start of the range that transformations will be applied to. If 2531 | range units are percentage based, the values range from 0 to 100, if they are 2532 | index based, valid values are any positive number. 2533 | 2534 | ###### Range End 2535 | 2536 | **Property name:** *e* 2537 | 2538 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2539 | 2540 | **Required** 2541 | 2542 | It specifies the end of the range that transformations will be applied to. If 2543 | range units are percentage based, the values range from 0 to 100. If they are 2544 | index based, valid values are any positive number. 2545 | 2546 | ###### Range Offset 2547 | 2548 | **Property name:** *o* 2549 | 2550 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2551 | 2552 | **Required** 2553 | 2554 | It specifies an offset of the range that transformations will be applied to. If 2555 | range units are percentage based, the values range from -100 to 100. If they are 2556 | index based, valid values are any positive number. 2557 | 2558 | ###### Range Base Mode 2559 | 2560 | **Property name:** *b* 2561 | 2562 | **Property type**: Enum[Number] 2563 | 2564 | **Required** 2565 | 2566 | Specifies how ranges should affect text. It has four values: Characters, 2567 | Characters excluding Spaces, Words and Lines. Depending on this option, all the 2568 | other properties will operate on the block specified by it. 2569 | 2570 | * 1 for Characters 2571 | 2572 | * 2 for Characters excluding Spaces 2573 | 2574 | * 3 for Words 2575 | 2576 | * 4 for Lines 2577 | 2578 | ###### Range Shape 2579 | 2580 | **Property name:** *sh* 2581 | 2582 | **Property type**: Enum[Number] 2583 | 2584 | **Required** 2585 | 2586 | The shape indicates how the range will operate over the selected blocks within 2587 | the range. The default value is square. You can think of this property as a 2588 | factor that should be multiplied to all transformations before applying the 2589 | final value. 2590 | 2591 | * 1 for Square. All blocks within the range will have their transformations 2592 | applied equally. Factor is always 1. 2593 | 2594 | * 2 for Ramp Up. Transformations will be applied linearly increasing within the 2595 | range. Factor grows from 0 to 1. 2596 | 2597 | * 3 for Ramp Down. Transformations will be applied linearly decreasing within 2598 | the range. Factor grows from 1 to 0. 2599 | 2600 | * 4 for Triangle. Transformations will be applied linearly up to the middle of 2601 | the range. First half increasingly, second half decreasing. Factor grows 2602 | linearly from 0 to 1 and then from 1 to 0. 2603 | 2604 | * 4 for Round. Similar to Triangle but instead of progressing linearly, it 2605 | progresses describing half a circle. 2606 | 2607 | * 5 for Smooth. Similar to Triangle but it describes two segments with easing 2608 | values to progress from 0 to 1 and 1 to 0. 2609 | 2610 | ###### Amount 2611 | 2612 | **Property name:** *a* 2613 | 2614 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2615 | 2616 | **Required** 2617 | 2618 | A multiplier expressed in percentage applied to the result of the factor of 2619 | transformation 2620 | 2621 | ###### Max Ease 2622 | 2623 | **Property name:** *xe* 2624 | 2625 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2626 | 2627 | **Required** 2628 | 2629 | An easing value that affects the speed of change as selection values change from 2630 | fully included (high) to fully excluded (low) 2631 | 2632 | ###### Min Ease 2633 | 2634 | **Property name:** *ne* 2635 | 2636 | **Property type**: Non Animated Number | Multi Dimensional Animated Property 2637 | 2638 | **Required** 2639 | 2640 | An easing value that affects the speed of change as selection values change from 2641 | fully included (high) to fully excluded (low) 2642 | 2643 | ###### Random 2644 | 2645 | **Property name:** *rn* 2646 | 2647 | **Property type**: Enum[Number] 2648 | 2649 | **Required** 2650 | 2651 | If active, transformations should be applied randomly to each selected block. 2652 | Random seed is not enforced. 2653 | 2654 | ###### Transform Properties 2655 | 2656 | This is the list of all supported properties that can modify a text within the 2657 | ranges described above: 2658 | 2659 | * Anchor Point (**a**) 2660 | 2661 | * Position (**p**) 2662 | 2663 | * Scale (**s**) 2664 | 2665 | * Rotation (**r**) 2666 | 2667 | * Rotation X (**rx**) 2668 | 2669 | * Rotation Y (**ry**) 2670 | 2671 | * Opacity (**o**) 2672 | 2673 | * Fill Color (**fc**) 2674 | 2675 | * Fill Hue (**fh**) 2676 | 2677 | * Fill Saturation (**fs**) 2678 | 2679 | * Fill Brightness (**fb**) 2680 | 2681 | * Fill Opacity (**fo**) 2682 | 2683 | * Stroke Color (**sc**) 2684 | 2685 | * Stroke Hue (**sh**) 2686 | 2687 | * Stroke Saturation (**ss**) 2688 | 2689 | * Stroke Brightness (**sb**) 2690 | 2691 | * Stroke Width (**sw**) 2692 | 2693 | * Stroke Opacity (**so**) 2694 | 2695 | * Tracking (**t**) 2696 | 2697 | * Text Skew (**sk**) 2698 | 2699 | * Text Skew Axis (**sa**) 2700 | 2701 | * Text Blur (**bl**) 2702 | 2703 | * Text Line Spacing (**ls**) 2704 | 2705 | All properties are animatable and optional. 2706 | 2707 | ### Image Layer Type 2708 | 2709 | Image layers are a container for an image. 2710 | 2711 | #### Type Property 2712 | 2713 | **Property name:** *ty* 2714 | 2715 | **Property type**: Enum[Number] 2716 | 2717 | **Property value**: 2 2718 | 2719 | #### Reference Property 2720 | 2721 | **Property name:** refId 2722 | 2723 | **Property type**: Number 2724 | 2725 | **Required** 2726 | 2727 | A reference to the asset id that should be painted within the container. The 2728 | asset information is located in the assets property and can be retrieved in 2729 | different ways. 2730 | 2731 | ### Null Layer Type 2732 | 2733 | Null layers don’t have a visual representation. But they share the same 2734 | transform properties as any other drawable layer. 2735 | 2736 | Null layers are often used to parent other layers to them so they can be used as 2737 | a detached hierarchy of transformations. Parenting can be recursive and null 2738 | layers can be parented to other null layers as well. 2739 | 2740 | Another usage of null layers is for holding expressions properties that don’t 2741 | belong to a specific layer but can be shared among multiple ones. 2742 | 2743 | They don’t have any specific properties but they share others with other layer 2744 | types (transform, masks, effects, layer styles). 2745 | 2746 | #### Type Property 2747 | 2748 | **Property name:** *ty* 2749 | 2750 | **Property type**: Enum[Number] 2751 | 2752 | **Property value**: 3 2753 | 2754 | ### Precomp Layer Type 2755 | 2756 | A Precomps is a container for a set of layers that are grouped and are adjusted 2757 | by the properties that govern the precomp. It has four properties specific to 2758 | the layer type (width, height, time remap, refId) and others shared with other 2759 | layer types (transform, masks, effects, layer styles). 2760 | 2761 | #### Type Property 2762 | 2763 | **Property name:** *ty* 2764 | 2765 | **Property type**: Enum[Number] 2766 | 2767 | **Property value**: 0 2768 | 2769 | #### Width 2770 | 2771 | **Property name:** *w* 2772 | 2773 | **Property type**: Number 2774 | 2775 | **Required** 2776 | 2777 | Width defines the width of the surface that has to be rendered from the precomp. 2778 | Whatever is outside that area won’t be visible even if it is within the visible 2779 | area of the precomp container. It basically works as the width of a clipping 2780 | mask of the inner layers. 2781 | 2782 | #### Height 2783 | 2784 | **Property name:** *h* 2785 | 2786 | **Property type**: Number 2787 | 2788 | **Required** 2789 | 2790 | Height defines the height of the surface that has to be rendered from the 2791 | precomp. Whatever is outside that area will not be visible even if it is within 2792 | the visible area of the precomp container. It basically works as the height of a 2793 | clipping mask of the inner layers. 2794 | 2795 | #### Time Remap 2796 | 2797 | **Property name:** *tm* 2798 | 2799 | **Property type:** Multi Dimensional Animated Property 2800 | 2801 | **Required** 2802 | 2803 | Time remap allows control of the timeline of a precomp independently from the 2804 | main timeline. It is expressed in seconds and since it is animatable, it can 2805 | support any amount of keyframes, easing and expressions. 2806 | 2807 | #### Asset Reference 2808 | 2809 | **Property name:** *refId* 2810 | 2811 | **Property type:** Number 2812 | 2813 | **Required** 2814 | 2815 | The refId property points to an object on the assets list that completes the 2816 | composition information. 2817 | 2818 | -------------------------------------------------------------------------------- /Notices.md: -------------------------------------------------------------------------------- 1 | # Notices 2 | 3 | # Community Specification Contributor License Agreement 1.0 4 | 5 | By making a Contribution to this repository, I agree to the terms of the 6 | following documents located at 7 | [https://github.com/CommunitySpecification/1.0](https://github.com/CommunitySpecification/1.0): 8 | 9 | (a) Community Specification License 1.0 10 | (0.\_Community_Specification_License-v1.md) 11 | 12 | (b) Community Specification Governance Policy 1.0 (5.\_Governance.md) 13 | 14 | (c) Community Specification Contribution Policy 1.0 (6.\_Contributing.md) 15 | 16 | (d) Community Specification Code of Conduct (8.\_Code_of_Conduct.md) 17 | 18 | In addition, for source code contributions, I certify that: 19 | 20 | (a) The contribution was created in whole or in part by me and I have the right 21 | to submit it under the open source license indicated in the file; or (b) The 22 | contribution is based upon previous work that, to the best of my knowledge, is 23 | covered under an appropriate open source license and I have the right under that 24 | license to submit that work with modifications, whether created in whole or in 25 | part by me, under the same open source license (unless I am permitted to submit 26 | under a different license), as indicated in the file; or (c) The contribution 27 | was provided directly to me by some other person who certified (a), (b) or (c) 28 | and I have not modified it. (d) I understand and agree that this working group 29 | and the contribution may be public and that a record of the contribution 30 | (including all personal information I submit with it, including my sign-off) is 31 | maintained indefinitely and may be redistributed consistent with this agreement 32 | or the open source license(s) involved. 33 | 34 | I represent that I am legally entitled to make the grants set forth in the 35 | documents above. If my employer(s) has rights to intellectual property that may 36 | be infringed by the materials developed by this Working Group, I represent that 37 | I have received permission to enter these agreements on behalf of that employer. 38 | 39 | ## License Acceptance 40 | 41 | --- 42 | 43 | Licensee’s name: Joseph Gregorio 44 | 45 | Authorized individual and system identifier: jcgregorio@google.com 46 | 47 | Specification version: 1.0 48 | 49 | --- 50 | 51 | Licensee’s name: Florin Malita 52 | 53 | Authorized individual and system identifier: fmalita@google.com 54 | 55 | Specification version: 1.0 56 | 57 | --- 58 | 59 | Licensee’s name: Hernán Torrisi 60 | 61 | Authorized individual and system identifier: hernantorrisi@gmail.com 62 | 63 | Specification version: 1.0 64 | 65 | --- 66 | 67 | Licensee’s name: Mike Reed 68 | 69 | Authorized individual and system identifier: reed@google.com 70 | 71 | Specification version: 1.0 72 | 73 | --- 74 | 75 | Licensee’s name: Mattia Basaglia 76 | 77 | Authorized individual and system identifier: glax@dragon.best 78 | 79 | Specification version: 1.0 80 | 81 | --- 82 | 83 | Licensee's name: Jorge Betancourt 84 | 85 | Authorized individual and system identifier: jmbetancourt@google.com 86 | 87 | Specification version: 1.0 88 | 89 | --- 90 | 91 | Licensee's name: Jawish Hameed 92 | 93 | Authorized individual and system identifier: jawish@lottiefiles.com 94 | 95 | Specification version: 1.0 96 | 97 | --- 98 | 99 | Licensee's name: Aidos Sabit 100 | 101 | Authorized individual and system identifier: aidosmf@gmail.com 102 | 103 | Specification version: 1.0 104 | 105 | --- 106 | 107 | Licensee's name: Alistair Thomson 108 | 109 | Authorized individual and system identifier: alistair@lottielab.io 110 | 111 | Specification version: 1.0 112 | 113 | --- 114 | Licensee's name: Marcus Stenbeck 115 | 116 | Authorized individual and system identifier: marcus.stenbeck@gmail.com 117 | 118 | Specification version: 1.0 119 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Lottie Animation Format Documentation 2 | 3 | This repository is for the development of the Lottie Animation Format. 4 | 5 | All work here is guided by the [Community Specification License](1._Community_Specification_License-v1.md). 6 | 7 | ## CLA 8 | 9 | Participation in this group requires signing the 10 | [Contributor License Agreement](0._CS_Contributor_License_Agreement.md), which you can 11 | do by creating a pull request that adds your name, email address, and Community 12 | Specification License version that you agree to be bound by. 13 | 14 | Here is an [example of what that pull request should look like](https://github.com/lottie-animation-community/docs/pull/2). 15 | 16 | --------------------------------------------------------------------------------